This is CSS

Cascading Style Sheets

The adjectives of the webpage. The skin.

The General rule

    
        selector {
          attribute: value;
          otherAttribute: value;
        }
    
  

Injecting CSS into HTML

1. Inline Style

   • As a property of the HTML tag

2. Style Tag

   • Inside HTML's Tags

3. Link Tag

   • Reference to another file

Selectors

• Element

  Select all instances of a given element.

          
              a {
                font-size: 3em;
              }
          
        

• #ID

  Target an element with a specific ID (only one –unique– ID name per page)

          
              #someId {
                text-decoration: none;
              }
          
        

• .Class

  Selects all elements with a given class

          
              .someClass {
                display: absolute;
              }
          
        

• *Star

  Selects all elements within a given range

          
              * {
                border: 1px solid black;
              }
          
        

• Descendant

  Selects an element nested inside another element

          
              li a {
                text-decoration: none;
              }
          
        

• +Adjacent

  Selects an element sibling of another element

          
              h4 + ul {
                font-size: 17px;
              }
          
        

• []Attribute

  Selects elements with a specific attribute

          
              a[href="http://www.somelink.com/"] {
                color: blue;
              }
      
              input[type="checkbox"] {
                background-color: green;
              }
          
        

• -nth of type

  Selects every element within a specific range

          
              ul:nth-of-type(3) {
                font-weight: 900;
              }
          
        

• :Pseudo Classes & Elements

          
              div::after {
                margin: 1em;
              }
          
        

Specificity

1. Inline Styles
2. IDs
3. Classes, attributes and pseudo-classes
4. Elements and pseudo-elements

• Inheritance

          
              ul {
                color: purple;
              } // li inside a ul inherit ul style
          
        

• The closest element rule (specificity)

  The closest element to specify an attribute wins

          
              body {
                color: red;
              } // everything inherits red from body
              ul {
                color: purple;
              } // li inside a ul inherits ul style because it's the closest
          
        

The Box Model

In a document, each element is represented as a rectangular box.

In CSS each of these boxes is described using the standard Box Model.

Each box has four edges:

• Margin Edge
• Border Edge
• Padding Edge
• Content Edge

Floats

Interrupts the normal document flow and stacks things horizontally instead of vertically

Clearfix hack after a float:

    
        <div class="cf"></div>
    
  

    
        .cf:before,
        .cf:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }
        
        .cf:after {
            clear: both;
        }
    
  

Units

Many units for different use-cases. Not all atribbutes accept the same kind of units

• Pixels: [value]px
• EM - Inherited Font Size: [value]em
• REM - Root Font Size: [value]rem
• % - Percentage of the parent element: [value]%

Colors in CSS

• HTML Colors:

  red, blue, rebeccapurple, coral

• Hexadecimal:

  #000000, #FFFFFF, #4B0082

  #redgreenblue:______
        

  #RRGGBB - Range: 00-FF

• Decimal - Base 10:

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9

• Binary - Base 2:

  0, 1

• HexaDecimal - Base 16:

  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

• RGB/a:

  rgb(255,255,255), rgba(0,0,0, 0.9)

  rgb(Red, Green, Blue) - Range: 0-255

• HSL/a:

  hsl(210, 100%, 50%), hsla(240, 100%, 50%, .7)

  hsl(Hue, Saturation, Light) - Range: 360deg + 0-100%

• Alpha Channel:

  rgba(0,0,0, 0.9), hsla(240, 100%, 50%, .7)

  Range: 0.0-1