Skip to main content

CSS

 

CSS – CASCADING STYLE SHEET

Presentation Layer

HTML ELEMENT / CSS RULE

Property + Value = Rule

background-color : red;

CSS – CaseSensitive

COMMENT     /*    */

 

 

HOW TO USE CSS

Inline CSS

<p style="color:brown;font-size:30px;">Lorem ipsum dolor sit amet consectetur 
adipisicing elit. Omnis tempore reprehenderit a dignissimos aperiam accusamus
 numquam, eum recusandae, fugiat suscipit officia in asperiores quae aspernatur 
iure sit, facere harum ad?</p>
</body>

 

 Internal CSS

<style>
        body{
            background-color:aquamarine;

        }
    </style>

 External CSS

 <link rel="stylesheet" href="index.css">

 

CSS SELECTOR

ELEMENT SELECTOR  - Third Preference

ID SELECTOR  -  #idname  - First Preference

CLASS SELECTOR  -  .classname – Second Preference

UNIVERSAL SELECTOR  - *  (Similar to body Element Selector)

GROUPING SELECTOR - add coma between different selectors and group them to apply the same css rule for all.

 

<style>
       
        #first{
            color:yellow;
        }
       
        .a{
            color:turquoise;
        }
        p{
            color:red;
        }
    </style>
 
<body>
    <h4 class='a'>CSS SELECTOR</h4>
    <p class='a' id='first'>Lorem ipsum dolor sit amet consectetur adipisicing
 elit. Qui, commodi ipsum facilis officiis impedit iste. Dolorem maxime voluptate 
repudiandae mollitia, quod labore iusto perferendis libero ipsa officiis corporis 
deleniti voluptates?</p>
    <p id='Second'>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Corporis aliquid blanditiis culpa! Hic minima dolorum sit impedit cumque quae,
 porro quaerat, ipsa nam, pariatur a voluptatibus officia? Omnis, laborum atque.</p>
    <pre class='a' >Lorem ipsum dolor sit amet consectetur adipisicing elit. 
Molestias quod aliquam voluptatem recusandae ad expedita quidem quos corrupti
 illum, perspiciatis maxime est delectus? Tempore cupiditate, provident 
similique commodi iure rerum.</pre>
    <h4>ID vs CLASS</h4>
</body>

 

 

ID vs CLASS

Whatever class name applied to one tag we can use the same class name to multiple tags to put them in a same class.

Even though the same thing is applicable on id also ,practically we use only once the id name we never use the same id name  for two different tags(id – identification purpose)

! important

 First Preference -Inline CSS

Second Preference depend upon Cascading Rule.

!important will change the preference of the CSS Rule.

 

<style>
         h2{
            background-color: violet !important ;
            color: yellowgreen ;
        }
    </style>
    <link rel="stylesheet" href="index.css">
    
</head>
<body>
    <h2 style="background-color: yellow;color:red;" >ok ok ok </h2>
</body>

 

 

 

 

TEXT PROPERTY

text-align : left , right, center, justify;

text-transform: uppercase, lowercase, capitalize;

text-decoration: underline,overline,line-through;

SPACING

text-intend

line-height

word-spacing

line-spacing

LINK PROPERTY

a:link{

}

a:hover;

a:active;

a:visited

LIST PROPERTY

 

list-type-style : square,circle ,(upper,lower)roman,latin,alpha,greek

 

BOX MODEL

CONTENT

PADDING

BORDER

MARGIN

 

TRBL  --- Top,Right,Bottom,Left.

Margin : TRBL

Padding : TRBL

For Border we can able to give only one size not TRBL

Model – Solid,Dotted,Grove

Border : Size   Model   Color;  or Border-radius : Size;

 


<style>
    h2{
       margin-left: 200px;
       padding: 100px 20px 20px 20px;
       border :20px solid yellow;
      border-radius: 30px ;
    }
</style>


<body>
<h2 style="color:red;background-color: green;" >BOX MODEL </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid ea 
consequatur, atque qui suscipit repellat libero quasi sit animi aliquam deleniti
modi earum nisi eos necessitatibus in a nam placeat?</p>
</body>

 

 

SHADOW PROPERTY

text-shadow :  10px  -6px  3px red;

box-shadow : -8px  10px  5px  brown;

horizontal-offset   vertical-offset  blur-value  color

 

  <style>
        #text {
            text-shadow: 6px -3px 3px red;
        }

        #box {
            background-color: indianred;
            box-shadow: -3px 20px 5px goldenrod;

        }
    </style>

</head>

<body>
    <h2 id='text'>TEXT SHADOW</h2>
    <h2 id='box'>BOX SHADOW</h2>

</body>

 

 

OVERFLOW PROPERTY

overflow:  visible; hidden; scroll; auto

Default : Visible;

SCROLL : create scroll bar for all

AUTO : Automatically create scroll bar only for required portion

 

DISPLAY PROPERTY

 

display : inline ;  block ;  inline-block;

 

block : helps to display inline element in block  and its accept height and width

inline : helps to display block element in inline but it doesn’t accept height and width

inline-block: : helps to display block element in inline and  it accept height and width

 

GRADIENT PROPERTY

 

https://cssgradient.io/

 

Choose the style and color from the above the website.

It will automatically generate the CSS rule according to your selection ,just copy paste the CSS rule at required place

FONT & ICON PROPERTY

 

Fonts.google.com

Select the font which u like

Copy paste the link tag content in html- head portion

Copy paste the font-family CSS rule in style tag

 

Fontawsome.com

Generate your kit for fontawsome website and copy paste the script tag content in html- head portion

Select the icon which u need

Copy paste the icon’s HTML code.

 

Comments

Post a Comment

Popular posts from this blog

CODEKATA BITWISE

Given a number N and an array of N elements, find the Bitwise XOR of the array elements. Input Size : N <= 100000 Sample Testcase : INPUT 2 2 4 OUTPUT 6   // ONE TESTCASE PASSED const   readline  =  require ( "readline" ); const   inp  =  readline . createInterface ({    input :   process . stdin }); const   userInput  = []; inp . on ( "line" , ( data )  =>  {    userInput . push ( data ); }); inp . on ( "close" , ()  =>  {    var   N  =  Number ( userInput [ 0 ]);    var   str  = String ( userInput [ 1 ])    var   arr  =  str . split ( ' ' ). map (( val ) => Number ( val ))       var   first  =  arr [ 0 ]       for ( i = 1 ; i < N ; i ++)   {  first  = first ^ arr [ i ]}    console . log ( first ...
Post a Comment
Read more

DATA BASE

  DATA BASE Backend deals with Server and Data Base CLOUD COMPUTING Cloud – Cloud Computing -- Rented Computer Service Ram, Processor, OS, Storage WHY WE PREFER CLOUD COMPUTING 1. Capital Investment (at initial stage renting is better than purchasing) 2. Maintenance Problem (Power Backup, Hard Disk, Upgrade) 3. Easily Swappable (Scale Up & Scale Down) (festival time ecommerce need extra storage and facilities after that it may need less, College websites during exam time (E.g)   Anna university website ,recent time – income tax website – pan card & aadhar card linking) 4.   Don’t need any separate place to keep those Systems. TOP COMPANIES AWS – Amazon Web Service - Netflix GCP – Google Cloud Platform Azure - Microsoft Azure WHY LINUX PREFERRED THAN OTHER OS Linux, Windows, Mac 1. Open Source 2.   Secure than Windows & Mac. 3. Command Line Usage In the Linux OS, the command line is a very handy and powerful tool used for...
Post a Comment
Read more

DAY 15 - AUG 08

  DOM – DOCUMENT OBJECT MODE   HTML DOC –Browser – Browser Engine(html parser) – DOM   Tree structure takes less time for searching that’s why we prefer tree structure in DOM. Why we prefer object model? Object model means OOPS concept based it have features like data abstraction, encapsulation…. Window   -- Window is the default thing available in the Browser’s JavaScript Engine. Document -- Document is property of Window Screen – Physical dimension of   the browser   Draw some sampl tree We can create html with the help of tag and make it dynamic(to do some action) by adding   javascript   using script tag then why specifically we need this dom à Will understand in future classes that we can’t do something directly with the tag.   DOM MANIPULATION   var element =document.createElement(‘tag’) Element.setAttribute(“attribute”,”name”) If we have morethan one same attribute for the element we can’t use s...
Post a Comment
Read more