CSS

tutorial html basic

Now you know that an HTML file contains tags that mark the content so the client knows how to render that content. You’ve seen a few examples of tags you can use, such as the <p> paragraph tag, the <h1> heading tag, and the <img> image tag. You know to look at W3Schools and Mozilla Developer Network to find other tags, and you can use all of that knowledge to write an HTML page.

One problem with what we’ve seen so far is that the pages aren’t very pretty. HTML tags tell the browser what type of content should be shown (like the <p> tag telling the browser that the content is a paragraph, or the <h1> tag telling the browser that the content is a heading), but they don’t tell the browser what that content should look like, or how that content should be laid out.

That might seem like a contradiction, but think about it this way: the <p> tag tells the browser that the content is a paragraph, but it doesn’t tell the browser what font size that paragraph should be, whether it should be aligned to the left, center, or right, whether it should have a border or a color, etc. The browser has some default settings, but those settings aren’t very exciting.

If we want to make our content look more interesting, then we have to use CSS.

CSS

CSS stands for Cascading Style Sheets, and it’s another type of language that allows us to create style rules for our HTML tags.

Let’s start with an unstyled HTML page, without any CSS:

<!DOCTYPE html>
<html>
	<head>
		<title>My First Webpage</title>
	</head>
	<body>
		<h1>Happy Coding</h1>
		<p>Hello world!</p>
	</body>
</html>

This renders the content in a pretty boring webpage with a white background and black, left-aligned text.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

unstyled html

If we want to style this HTML page, we can use CSS by adding a <style> tag into the <head> section of our HTML, and then listing our style rules inside the <style> element. Here’s an example:

<!DOCTYPE html>
<html>
	<head>
		<title>My First Webpage</title>
		<style>
			body{
				background-color:#666666;	
			}
		
			p{
				color:white;
				text-align: center;
				font-size: 24pt;
			}
			
			h1{
				border: thin solid red;
				text-align: right;
			}
		
		</style>
	</head>
	<body>
		<h1>Happy Coding</h1>
		<p>Hello world!</p>
	</body>
</html>

This sets up three style rules:

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

styled html

CSS Syntax

To create a style rule, you list a selector (more on that later), followed by { } curly brackets, then a list of css properties and values, each ending with a ; semicolon.

p{
	color:white;
	text-align: center;
	font-size: 24pt;
}

For example, this style rule selects every <p> tag and lists three properties and their values. This causes every <p> tag on the page to have white, 24pt, center-aligned text.

There are a ton of CSS properties to use, and each property has a ton of values you can choose from. You can learn more about your options here and here, but generally you can find a CSS property and value you’re looking for by Googling something like “css text alignment” or similar.

Element Selectors

So far we’ve seen CSS that selects a particular tag, which styles all of the content with that tag on the page. This is called an element selector, because it selects every element with that tag.

Here’s another example that styles three <p> tags:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS P Selector</title>
		<style>		
			p{
				text-align: center;
				font-size: 24pt;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<p>This is the first paragraph.</p>
		<p>This is the second paragraph!</p>
		<p>And here's a third one!</p>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

styled html

ID Selectors

But what if we want to have multiple <p> tags with different styles? Element selectors are too broad, because they end up styling every <p> tag. One way to get more specific is to give our <p> tags IDs by adding an id attribute to the HTML tags:

<p id="first">This is the first paragraph.</p>
<p id="second">This is the second paragraph!</p>
<p id="third">And here's a third one!</p>

Now that our tags have IDs, we can use a id selectors in our CSS to select each <p> tag individually.

To use an id selector in your CSS, you use a # pound sign, then the id, then style rules inside { } curly brackets, like this:

#first{
	background-color: red;
}

Putting it all together, it looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS ID Selector</title>
		<style>		
			p{
				text-align: center;
				font-size: 24pt;
				background-color: lightblue;
			}

			#first{
				background-color: red;
			}

			#second{
				text-align: left;
			}

			#third{
				font-size: 12pt;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p id="first">This is the first paragraph.</p>
		<p id="second">This is the second paragraph!</p>
		<p id="third">And here's a third one!</p>
	</body>
</html>
Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

styled html

Now we can style each <p> tag individually. Also notice that the <p> tags have both the styles from our element selector and the styles from their respective id selectors. This is what cascading means: the style rules “stack” so you can go from general rules to more specific rules.

Class Selectors

Note that IDs should be unique, so you shouldn’t have more than one tag with the same ID. Also note that each tag can only have one ID. But what if you want to apply the same style to multiple tags, or you want multiple styles to apply to the same tag?

This is where class selectors come in handy. CSS classes are similar to IDs, except multiple tags can have the same class, and one tag can have multiple classes.

For example, we can have multiple <p> tags with multiple classes, separated by spaces:

<p class="dark">This is a dark paragraph.</p>
<p class="light">This is a light paragraph.</p>
<p class="highlighted">This paragraph is highlighted.</p>
<p class="dark highlighted">This paragraph is dark and highlighted.</p>
<p class="light highlighted">This one is light and highlighted.</p>

Notice that the same classes are used in multiple <p> tags, and a single <p> tag can have multiple classes.

Then we can define our style rules using the class selector, which is a . dot followed by a class name, followed by style rules inside { } curly brackets.

.dark{
	background-color: black;
	color: white;
}

Putting it all together, it looks like this:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS Class Selectors</title>
		<style>		
			.dark{
				background-color: black;
				color: white;
			}

			.light{
				background-color: white;
				color: black;
				font-style: italic;
			}

			.highlighted{
				border: thick dotted red;
			}
		</style>
	</head>
	<body>
		<p class="dark">This is a dark paragraph.</p>
		<p class="light">This is a light paragraph.</p>
		<p class="highlighted">This paragraph is highlighted.</p>
		<p class="dark highlighted">This paragraph is dark and highlighted.</p>
		<p class="light highlighted">This one is light and highlighted.</p>
		
	</body>
</html>

The style rules in the classes for each element are combined. For example, the <p class="dark highlighted"> element follows the rules from the dark class and the rules from the highlighted class. This is another form of cascading, where rules are combined.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

styled html

External Style Sheets

So far we’ve been using internal style sheets, which just means that we’ve been defining our CSS inside a <style> tag inside the <head> section of our HTML file.

However, most of the time you’ll use external style sheets, which means your CSS style rules will go in their own file, then you’ll point to that CSS file from your HTML file. For example, I could create a file named styles.css and save these style rules into it:

.dark{
	background-color: black;
	color: white;
}

.light{
	background-color: white;
	color: black;
	font-style: italic;
}

.highlighted{
	border: thick dotted red;
}

Now that I have my styles.css file, I can point to it from my index.html file. To use an external style sheet, I use the <link> tag, and set its href attribute to the name of the CSS file.

<link rel="stylesheet" type="text/css" href="styles.css">

This goes into the <head> section of my HTML file, like this:

<!DOCTYPE html>
<html>
	<head>
		<title>External CSS</title>
		<link rel="stylesheet" type="text/css" href="styles.css">
	</head>
	<body>
		<p class="dark">This is a dark paragraph.</p>
		<p class="light">This is a light paragraph.</p>
		<p class="highlighted">This paragraph is highlighted.</p>
		<p class="dark highlighted">This paragraph is dark and highlighted.</p>
		<p class="light highlighted">This one is light and highlighted.</p>
	</body>
</html>

This allows me to separate my HTML content from its style rules. This is especially handy if I want to apply the same styles across multiple pages, or if I want to be able to swap out different styles (try clicking the button in the upper-right of this page).

Inline Styles

In addition to internal and external style rules, we can also use inline styles by setting the style attribute of a tag, then putting our style rules in that attribute.

For example, this line would style a <p> tag with a red background, black text, and center alignment:

<p style="background-color:red; color:black; text-align:center">This paragraph has inline styles.</p>

This approach can seem easier because it’s more obvious exactly what styles an element has, but in “real” webpages this actually makes it harder to style your content.

Cascading

The cool (and confusing) thing about CSS is that it cascades so multiple rules can combine from multiple sources to style an element. In other words, you can mix and match all of the above.

For example, many webpages will use an external style sheet for the styles that are on every page, then an internal <style> tag for styles specific to a particular page, and then inline styles on special case elements. All of those rules “trickle down” to style the content.

The selector logic also cascades. So it’s very common to have style rules that apply to every element with a particular tag, then have some of those elements have classes, and then have some of those have an ID. The rules from all of the selectors will combine to style your content.

<!DOCTYPE html>
<html>
	<head>
		<title>Cascading CSS</title>
		<style>		
			p{
				background-color: pink;
				color: black;
				text-align: center;
			}

			.highlighted{
				border: thick dotted blue;
			}

			#top{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<p id="top" class="highlighted">This is the top paragraph.</p>
		<p class="highlighted">This is a highlighted paragraph.</p>
		<p>This is a regular paragraph.</p>
	</body>
</html>

This CSS styles every <p> tag by giving it a pink background, black text, and center alignment. Then it gives elements with the highlighted class a border. Finally, it gives the element with an id of top a red background.

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

styled html

Notice that the background-color rule in the #top id selector overrides the background-color rule in the p element selector, because the id selector is more specific. This is an important rule to keep in mind: as style rules cascade, rules from more specific selectors take precedence.

Similarly, rules from external style sheets are overriden by rules from internal style sheets, which are overridden by inline style rules.

Homework

Next: CSS Layouts

Go back up