CSS stands for Cascading Style Sheets and is the language used to describe how HTML elements on a web page or printed page should be displayed and styled.

While HTML gives the browser important document information, structure, and the content itself, CSS gives detailed information on where each element should be placed, the sizing, the colors, the fonts used, borders, margin, padding, etc.

CSS is used to describe all these things, while also taking into consideration how they should be changed if the screen is of a certain size, or is being displayed in portrait versus landscape mode, or even dependent on the device likely being used. This falls under the scope of making sure the site is responsive in nature. Page elements may move, be shown, be hidden, or be changed in how they look and where they sit depending on these factors.

The first example sets the HTML <div> container to a specific width. The second example says that if the screen size is under 768px, set that same <div> container to be the full width of the screen (probably a phone or small tablet).

.my_div {
    width: 400px;
}

@media screen and (max-width: 767px) {
    .my_div {
        width: 100%;
    }
}

Our CSS rule will always contain the following:

• The selector (in this case an element with the class .my_div)
• A rule declaration (in this case, set the width of the element to 400px)

.my_div {
    width: 400px;
}

The selector is used to point to the specific element or set of elements you want styled with that rule. It could be an HTML tag (div, span, p, h1, etc.), an element with a specific #id (#my_div), or an element / set of elements with a specific class (.my_div). Besides these three examples, there are many ways to “select” the element you want to style.

More than one element can be selected by separating them with commas. In this example, we are applying the width rule to six separate elements.

.my_div, .my_footer, #my_header, h1, h2, h3 {
    width: 400px;
}

You can also be more specific to which element you are choosing by including the element’s father, grandfather, etc.

The following selects all <h2> tags but only if they are inside the .my_div element. Notice that there isn’t a comma between the two elements. This is what tells the browser that this is one, more specific selector and not two selectors, as above, separated by commas.

.my_div h2 {
    width: 400px;
}

In our example, our rule declaration lives inside { }, and many rules can be placed within the { } so long as each rule ends with a semi-colon.

In the following, we are setting three rules for all elements with the class of .my_div.

.my_div {
    width: 400px;
    font-size: 18px;
    background-color: red;
}

Furthermore, each rule has a property, followed by a colon, followed by the value.

width: 400px;
font-size: 18px;
background-color: red;

Finally, CSS rules can be specific to a screen size, orientation, or media type (print, for instance). The selector and rule stay the same, but they are placed within the @media rule, which gives the browser a basis on when the rule is to be applied.

The first example below shows just the structure of the @media rule, while the second example shows the element’s property and value within the @media rule.

@media screen and (max-width: 767px) {

}

@media screen and (max-width: 767px) {
    .my_div {
        width: 100%;
    }
}

Notice that both the @media rule and the specific stying rules each contain a set of { }. So you could have many elements with their rules inside the @media rule, so long as they are all placed within the outer { }.

@media screen and (max-width: 767px) {
    .my_div {
        width: 100%;
    }
    .my_span {
        color: red;
    }
}

---