What is a CSS Rule
A CSS Rule is a rule which states how an element or tag will look or should look. Using a valid syntax the rule can be applied to a single element or tag or many elements or tags.
CSS Selectors are case sensitive, so they must match element names and attribute values exactly.
CSS Rules Break Down
//Selector
P {
color: blue; //Declaration 1
font-size: 14px; //Declaration 2
}
Note - The declaration block is defined by the "{}". Declarations are always placed inside the curly braces and you can place as many declarations as you would like inside of the curly braces.
Selector - selects the element or tag that the CSS rule will style.
Declaration - defines the style to be applied (the look).
Declaration syntax - declarations are always defined by a declaration block : declaration value ;
The colon is the separator between the property or declaration name and the value.
The semicolon defines the end of the declaration.
Different Types of Selectors
| Selector Type | Description | Example |
|---|---|---|
| Universal Selector | Applies to all elements in the document | * {} targets all elements on the page |
| Type Selector | Matches Elements Names | h1, h2, h3 {} Targets the elements <h1>, <h2><h3> at the same time. |
| Class Selector | Matches an element whose class attribute value is the same one after the period. | .test{} Targets any element whos class value = target. ol.test{} Targets only order lists whose class value is test. |
| ID Selector | Matches an element whos id attribute value matches the one after the pound or hash symbol | #complete {} Matches any element or tag with an id that has a value of complete or id=”complete” |
| Child Selector | Matches any element who has a direct child of another | P > a {} Matches any anchor tag that is a direct child of a paragraph. |
| Descendant Selector | Matches an element or tag that is a descendent of another specified element. | P a {} Targets any anchor tag that sits inside of a paragraph element no matter how deep into the paragraph. |
| Adjacent Sibling Selector | Matches an element that is the next sibling of another | h4 + p {} Matches any paragraph directly after the h4 but not other paragraphs |
| General Sibling Selector | Matches a element that is a sibling of another but doesn’t have to directly after | h4 ~p {} Matches any paragraphs that are siblings of an h4. |