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.
Sample Rules
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%;
}
}
Syntax
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;
}
Selectors
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;
}
Rule Declaration
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;
}
}
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.
Why 1SMARTchicken?
See More →
Thanks for your support!
CSS Books
All are affiliate links. Thank you for your support!
CSS NOTES:
- The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
- In CSS there are many ways to express a color value in a property
Feedback
If you see an error on the page or the code itself is incorrect or incomplete, or just plain wrong, please let us know. We’re always learning. NOTE: we do not sell your information and will not send you spam emails.
