Class 5: CSS
Today we'll start our foray into CSS. CSS stands for Cascading Style Sheets, and has become the most well-known way to style webpages. With HTML, we tend to focus strictly on the content. With CSS, we focus on presenting that content in different ways.
Tasks to complete for this class
- Read through this document and watch the embedded videos
- Finish CSS Tutorial (opens in a new tab). You should try all the examples, finish all the exercises, take CSS Quiz (opens in a new tab), and submit a screenshot that shows you have finished the quiz and how much time it took.
- If you'd like more information or feel that the lectures are not providing you with enough information, you can watch the Introduction to CSS video (opens in a new tab). (check Pacific Lynda (opens in a new tab) if you would like to have full access to all the materials in Lynda (opens in a new tab))
Video Intro
This 10 min video (embedded below) (opens in a new tab) will go over the first two sections of the material:
CSS Zen Garden
So far, many of you have already asked about changing how your content looks, either by wanting to center text, or introducing colors onto a webpage or just changing the overall look of a page. CSS will help us with this. To give you an idea of how much CSS can style a webpage, it would be great for you to spend a couple of minutes navigating through CSS Zen Garden (opens in a new tab) Which takes the same content and provides different ways of imagining that content via CSS.
Here are two of the main themes shown when you first visit the page.
| Verde Moderna | A Robot Named Jimmy |
|---|---|
 |  |
Notice how both of these have the sections Road to Enlightment and So What is This About, but both of them look very different. If your page is wide enough, you'll be able to immediately see around 8 different versions. However, realize that there are many more options that you can look through by clicking on the View All Designs (opens in a new tab) option on the site
Setting up HTML to use CSS
The first thing to realize is that for us to use CSS, we need to tell the HTML page that we want to style our content. While there are different ways of doing this, including the use of a style attribute from within HTML, in this section we'll only show the traditional way of separating the CSS from the content itself. Separating content from how it looks follow traditional paradigms like Model View Controller, and while how to manage content and how it looks has still been debated, we will separating CSS from HTML in this class.
Therefore we will create a separate CSS file that we will use to store all of our rules. To let the HTML file know that we have CSS data, we'll provide a tag in the header component of our HTML page.
<head>
<!--- more header information in here -->
<link href="mynewstylefile.css" rel="stylesheet" />
</head>This would mean that we can place our CSS into the mynewfile.css file
that would be created in the same directory as this HTML file.
CSS Basics
Please make sure to watch this short video (opens in a new tab) on the basics of CSS as well as colors, which we'll discuss further below.
CSS rules and selectors
CSS is largely based on the idea of having a bunch of rules. selectors and a list of properties to apply to those selectors.
h1 {
color: blue;
}FYI: In the video above, I mention how there are many ways for you to be able to specify colors in different ways. While CSS has support for many color names (shout out to
salmon), you also have support for millions of colors. The video embedded above spends a good amount of time showing different ways to reference those colors, including the most popular version used in HTML, hexadecimal color notation (opens in a new tab).
In the example above, we have a selector h1 that CSS will look for.
This means that any elements in our HTML file that are h1 elements, will apply the properties
that are enclosed in the parenthesis.
In this case, it means that they apply the color property of the h1 tag to be blue.
In a way, css follows the popular JSON syntax of having curly braces and then inside of those braces following the format for properties:
key: value;Where key is the name of the styling property that is an official property for an element,
while value would be what you would like to apply to that property.
Overall, there are many properties that can be applied to CSS. In this class, I will not expect you to know or memorize every single property, but you should know the ones covered in the videos.
Text styling
Here's another short video (opens in a new tab) that discusses some of the different ways for you to stylize text.
As mentioned in the video above, CSS also allows you to stylize text in a number of different ways, including:
| styling | CSS property | sample values |
|---|---|---|
| font | font-family (opens in a new tab) | monospace, "Comic Sans MS", sans-serif |
| sizing | font-size (opens in a new tab) | 150%, 20px, x-large |
| italics, underline | font-style (opens in a new tab) | italic, normal |
| bolding | font-weight (opens in a new tab) | bold, normal, 900 |
| centering or aligning text lines | text-align (opens in a new tab) | center, right |
| word spacing | word-space (opens in a new tab) | 1.5em, 10px |
There are many others that you can be made aware of that transform the text, and the video above shows a few more of them in-depth, but as with most things in this class, the goal should be to just try it out and play around with CSS instead of just watching the videos!
This all sounds great! What's the gotcha?
CSS will also allow you to group selectors, meaning that you can have for example both ul and ol elements share the same type of styling, just by having a comma in between:
ol, ul {
color:orange;
}This would then make any of your lists all orange.
While this is not the ideal solution, as you can get the same features by doing li as orange instead:
li {
color: orange;
}
we'll keep this here to illustrate our next point.
Because CSS is so expressive and flexible, you could run into particular issues of how CSS decides what to apply.
For example take the following code:
```css
ol, ul {
color:orange;
}
ol {
color: gray;
}In the example above, all ul elements would be orange,
but then because the last selector for ol mentioned gray,
CSS would follow that result.
And what about in this case?
li {
color: gray;
}
ol, ul {
color:orange;
}Here all elements would end up being gray, because when you have elements that have more than two selectors that it could be, CSS picks the rule that binds closest to elements. In this case, it makes sense to look at some sample HTML code:
<ul>
<li>What color am I?</li>
<li>Am I orange or gray?</li>
</ul>because most of your text is most closely connected to li,
since ul is further away (as that tag is encloses the li) then the text will be gray.
I recommend watching this video (opens in a new tab) which will re-explain this concept and allow you to see the changes in real-time as I go more in-depth into the topic there.