Chapter 3: Using CSS to add Style#

In the previous chapter, we introduced you to HTML. You learned some basic syntax and walked away with a rough understanding of what a web page is.

Admittedly, all the examples in that chapter didn't look very good. They were rather dull, with no color or unique font. In this chapter, we are going to change that.

Here we are going to introduce you to CSS. CSS works hand-in-hand with HTML to give your web page "style."

This chapter is an overview of CSS, covering some of the more essential concepts, and reviewing basic syntax.

What is CSS#

Cascading Style Sheets, better known as CSS, is a stylesheet language.

You may be asking yourself, why two different languages: HTML and CSS? Without getting into the history of it all, the simple answer to that question is: each has a role. Where HTML defines the structure, CSS gives the structure style.

Style includes things like color, font, size, layout, and position. Need to make a paragraph blue? HTML defines the paragraph, and CSS makes the paragraph blue.

Our First Introduction to CSS#

The best way to get familiar with CSS is to play around with it. I've created some HTML files we can play with.

Exercise 1 of 6: HTML & CSS in one file#

1. In the code that comes with this book, open the following HTML file with your text editor: 3-adding-style/1-html-css.html

2. Once open, you should see HTML that looks like the following screenshot. I've added the pink circle to show the area where we are going to be adding CSS.

3. Next, open the file in a browser window. Watch the porcupine video; it's well worth it.

4. Right now the file doesn't have any CSS on it. We are going to change that.

We're going to use the CSS code below to add some style. Either copy and paste the following CSS into the area where it says /* put your css here */, or type it in.

You can copy the CSS from the file 3-adding-style/2-html-css-final.html if you'd rather not type it in (row 6-18).

When you put this code in the HTML file, the code goes in-between the opening <style> and closing </style> tags.

In the following screenshot, I have highlighted in a pink box the CSS that we are adding in, replacing the /* put your css here */.

5. Once you've added the CSS above to the HTML file, save the file, switch to your browser, and refresh the page.

6. Don't be too concerned with the semantics of the CSS itself; focus on what the CSS does. In the screenshot, I added pink boxes around the chunks of CSS to help show what CSS is affecting what HTML element.

Notice how the header is now a darkcyan, and the paragraph text is now blueviolet? All of the content is also centered. That was all done via CSS. We didn't change the HTML at all.

7. Now let's try modifying some of the CSS. We'll keep it simple.

In your text editor, change the heading color from darkcyan to blue. Also, try changing the paragraph from center to right.

After making the changes, press save in your text editor and refresh your browser window.

Your style changes and web page should now look something like the following:

Notice the header color changed to blue and the paragraph text is now aligned right? We'll learn more about how CSS is doing this and specifics about the syntax, but give yourself a pat on the back, you've just written CSS!

CSS via the DevTools#

Next, we are going to look at CSS in the DevTools. The DevTools is an interface to play with CSS and HTML in real-time.

Exercise 2 of 6: Looking at CSS in the DevTools#

1. Go back to your "Teddy the Porcupine" page in a browser window. In case you closed the previous file, here it is again: 3-adding-style/1-html-css.html

Make sure you're using the previous 1-html-css.html that you added style information to. If you don't have styles added to that file, go ahead and use the 3-adding-style/2-html-css-final.html instead.

2. Open the DevTools (command + alt + j). By default, you will be taken to the "Console" panel. To the left of the Console, click on the "Elements" panel.

Right away, you'll notice a lot is happening in the Elements panel. For our purposes, we will be focusing only on a couple of elements and styles. Don't get overwhelmed or feel like you need to understand everything you see here.

3. In addition to the Elements panel, you should also see a Styles pane - to the right of the Elements panel view.

No discussions yet