CSS

A pattern to select (or find) elements in the DOM

A CSS rule has three parts

• selector
• declaration block
• one or more properties with values

Basic selectors

div { … } select by tag type
.foo { … } select by class name
#a { … } select by element id attribute
[type="text"] { … } select elements matching attribute value

Hierarchal selectors

div > div { … } select child elements by parent-child relationship
div div { … } select child elements by descendant relationship

Pseudo class selectors (many more …)

:first-child select first child
:hover select when mouse is over element

Combining selectors

div#a { … } select elements matching all selectors
div, #a { … } select elements matching at least one selector

/* universal selector */
* { 
    background-color: hsl(325, 63%, 82%); 
    text-align: center; 
} 
/* type selector */
span { 
    background-color: skyblue; 
} 
/* id selector */
#div1 { 
    color: green; 
    text-align: center; 
    font-size: 20px; 
    font-weight: bold; 
} 
/* class selector */
.div2 { 
    color: orange; 
    text-align: left; 
    font-size: 10px; 
    font-weight: bold; 
} 
/* attribute selector */
div[style] { 
    text-align: center; 
    color: purple; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: -20px; 
} 
/* combinator selector */
div>p { 
    color: #009900; 
    font-size: 32px; 
    font-weight: bold; 
    margin: 0px; 
    text-align: center; 
} 
/* class selector */
.box { 
    background-color: yellow; 
    width: 300px; 
    height: 100px; 
    margin: auto; 
    font-size: 30px; 
    text-align: center; 
} 
/* pseudo selector */
.box:hover { 
    background-color: orange; 
}