Playing with CSS

Applying CSS to your HTML


Creating my test HTML now!


Class Selectors ".whatever". (MDN web docs link).

This paragraph has dark red text.

This paragraph has dark red text & a yellow background.

This paragraph has dark red text & "fancy" styling.


The CSS "ID" selector matches an element based on the value of its id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector. For example, this <div> has a special ID on it!

The CSS "class" selector matches an element based on the value of its class attribute. In order for the element to be selected, its class attribute must match exactly the value given in the selector. For example, this paragraph in a <div> has a special class with a descendant combinator on it!

The ":first-child" CSS pseudo-class represents the first element among a group of sibling elements. In this example the "boxChild p:first-child" selctor, selects any <p> that is the first element among its siblings(<p> elements)(grey background /w black text applied).

However, this paragraph was not selected as it is the second element in this division (no background /w default blue text).

What color am I? A class selector is described as being more specific, or having more specificity than the element selector, so this text is red!

The inner box is 60% - 32px.
Example of values for transform, such as rotate().