Understanding CSS

Understanding CSS Element Class And ID

Sizes-Relatives sizes

em -   Based on the font size of the current element

rem -  Based on the font size of the html element (16px by default)

The main size is denote in the style sheet as mentioned below

html {
    font-family:Verdana;
    font-size:16px;
}

The subsequent sizes in the different elements are based out of it. "rem" is calculated based out of 

size mentioned in the html element.

   div:first-child {
        font-size:1.25rem;
    }

And "em " is based out of size mentioned in the current element

ex   -  Height of the font's lowercase x- height

ch   -  Width of the font's 0 (zero) character

Puseudo Element and Pseudo Class

Pseudo Element represents those elements where some actions

causes the css to fire 

Pseudo class is denoted by single ":"  and Pseudo Element is denoted by double "::" as denoted below

/*The below div represent the parent and child relatoinships .
 In the entire HTML document the first div element undergoes
  such changes.   */

div{
  font-family: sans-serif;
}

    div:first-child {
        font-size:1.25rem;

    }

        div:first-child::first-line {
            color:dimgrey;
            font-size:1.25rem;
        }

        div:first-child::first-letter {
            color: darkkhaki;
            font-style:italic;
            font-size:2.25rem;

        }

Pseudo class is denoted by single ":"

View Window

It is denoted by the tag "vw" . The below element article is displayed over 75 % of the total viewing window available

 

     article {
           width:75vw;
     }

Page Layout with CSS - 

Positioning the Elements

1) Fixed

2) Relative

3) Inline   - Al the elements are arranged side by side

4) Absolute 

The Box Model

1)Margin:  Space outside /around and element

2) Border: Visible border around the element

3)Padding : Space withing the element but outside the content