While HTML defines the meaning and structure of web content, Cascading Style Sheets (CSS) are responsible for describing a web page’s appearance and presentation. CSS gives you a language to use to selectively style HTML elements. For example, the following turns all paragraph text (the tags in HTML) blue:
p {
color: blue;
}
CSS rules like the one above consist of a few parts. First is the selector. In the example above, the selector is the “p”, which will apply the rules found inside the curly braces to all elements on your page. We can include multiple elements within a selector, or be more specific about which elements we would like to style using things like IDs or classes.
Each statement inside the curly braces are called declarations, and there can be many of these for each selector. Declarations are made up of properties, found on the left side of the colon, which are the ways you can style an element, and property values on the right side of the colon, which chooses from one of many different options for a given property. So for the example above, we are modifying the property “color” of the paragraph element, and setting its value to blue. Each declaration ends with a semicolon.
There are a lot of properties that can be set for different HTML elements with CSS, and there are often many different property values available for each property. CSS is a fairly powerful and flexible way of styling HTML content (and sometimes pretty confusing!). You can put CSS directly into an HTML file, or separate it out into its own .css file, and include a reference to that in your HTML.
We won’t go deep into CSS into this workshop, but like HTML, it is something you should try to familiarize yourself with if you are interested in developing websites, web applications, etc. It isn’t necessary to memorize every property or value, but it is good to have a basic understanding of what can be done with CSS and have a good reference site on hand.
Here are some good resources to learn more about CSS: