HTML Styles

<!DOCTYPE html>
<html>
<head>
	<title>Nature</title>
	<link rel="stylesheet" href="html-styles.css">
	<style type="text/css">
	h1 { color:limegreen; }
	.big { font-size:200%; }
	</style>
</head>
<body>
	<h1>Mountains</h1>
	<p>I like mountains. Especially <span class="big">big</span> ones and <span class="sweet">orange</span> ones.</p>
</body>
</html>

Above is a small example of adding styles to a web page using CSS. We change some colors and increase a font size.

In this example, we use all three methods of adding styles to an HTML document. More on that in a minute.

First, let's make sure we understand what CSS is and why we need it (if we want our web pages to look nice).

About CSS

CSS (Cascading Style Sheets) is used to apply styles to HTML documents. This is because HTML is not intended to provide styles. HTML is intended to provide the structure of an HTML document and each HTML element has a predefined meaning . CSS is used for presentation.

CSS allows you to do things like change colors, fonts, size, add borders, background images, position elements, add margins, add shadows, create animations, and much more.

But just as importantly, it also allows you to specify how your content should be presented across different types of media. For example, you could create one style sheet for screens, another for audio devices, and another for when the page is printed. This gives you precise control over how each HTML element is presented across different media.

CSS also allows you to create different styles for different sized screens. So you could create one style sheet for large screens (such as desktops/laptops), one for medium (say, for tablets), and another for small (smartphones).

No need to rewrite your HTML document for every screen size, device, or media type. You simply write your HTML page once, then create your style sheets as needed.

How CSS Works

A CSS style sheet consists of a list of statements. There are two kinds of statements: rule sets and at-rules.

A rule set (also called a rule) consists of a selector followed by a declaration block.

Like this:


selector {declaration block}

So, in the following code example, the <h1> element is the selector, and the rest is the declaration block.


h1 { color: limegreen }

The declaration block starts with a left curly brace ({) and ends with a right curly brace (}). It contains zero or more declarations separated by a semi-colon (;). It can also contain white space, therefore, the above statement could also be written like this:


h1 {
	color: limegreen
	}

This can make your style sheets more readable, especially if you have lots of declarations:


h1 {
	color: limegreen;
	font-family: 'Open Sans';
	font-size: 2em;
	margin: 5px;
	... etc
	}

You can also include multiple selectors. If you do this, you must separate them with commas:


h1, h2, h3, h4, h5, h6 {
	color: limegreen
	}

The above declaration block sets the color of all 6 levels of heading at once. This has the same effect as doing this:


h1 { color: limegreen }
h2 { color: limegreen }
h3 { color: limegreen }
h4 { color: limegreen }
h5 { color: limegreen }
h6 { color: limegreen }

The difference is that the first one uses less code, thus, lowers the file size, and makes your website quicker. So it's a good idea to combine selectors whenever possible. Obviously, you can only do this when the styles are exactly the same for each element.

However, you can also do this:


h1, h2, h3, h4, h5, h6 {
	font-family: 'Museo Slab';
	color: limegreen;
	}
h1 {
	color: orange;
	}

The above style sheet would result in all six heading sizes being set to lime green and a font called "Museo Slab". However, the second declaration block would override the color for heading level 1 to orange.

So, the end result would be: All headings are rendered in the "Museo Slab" font, the <h1> elements are orange, and all other headings are lime green.

Classes & IDs

CSS also allows you to apply styles based on an element's class or ID. You can create your own classes and IDs, so this provides enormous flexibility. Each class or ID that you create can have its own style.

Classes allow you to group things based on their logical function (or other purpose).

IDs allow you to attach a unique identification to an element that no other element can have. This can be useful not only when using CSS, but also when using JavaScript and other scripting languages.


#logo { margin: 9px }
.search { width: 100% }

The above style sheet sets the margin property for the element with an ID of logo. ID selectors start with a hash (#) followed by the ID value.

It also sets the width property of all elements that have been assigned the class search. Class selectors start with a period (.) followed by the class value.

Classes can also be referenced using ~= notation. Therefore, the following two statements have the same effect:


div.search { width: 100% }
div[class~=search] { width: 100% }

So how do these elements get assigned a class or ID?

Glad you asked. In the HTML document, it looks something like this:


<div id="logo">
	...
</div>

<div class="search">
	...
</div>

In this case, I've used the <div> element, but you can assign IDs and classes to any HTML element.

Note that an ID can only be assigned to one element on the page. This is what gives the element its unique identification (which can be crucial when working with JavaScript). Classes on the other hand, can be assigned to as many elements as you like.

Other Selectors

CSS supports many possible selector patterns. This enables you to get quite granular with which elements you select to apply styles to.

Consider the following example:


form input { color: green }

The above code selects all <input> elements that are a decendent of a <form> element.

Now let's modify it a little:


form.comments input { color: green }

The above code selects all <input> elements that are a decendent of a <form> element with a class of comments.

And let's add some more complexity:


form.comments input[type="text"] { color: green }

The above code selects all <input> elements that have the type attribute set to the text value, but only if that element is a descendent of a <form> element with a class of comments. Only elements that pass that test are styled green.

As you see, you can get quite specific. And we haven't even mentioned pseudo classes yet!

If you're interested, here's the official list of selectors in CSS3.

How HTML & CSS Work Together - Adding Styles to HTML Documents

In HTML, there are three ways of adding styles to a web page.

Inline Style Sheet

Use the global style attribute to apply styles at the element level. Doing this only affects the element that you're applying the style against.

Here's an example:


<p style="color:blue;">Content...</p>

Embedded Style Sheet

Use the <style> element to apply styles at the page level (by placing the element within the <head> element). This allows you to apply styles to any element on that page. You won't need to modify each element, as it is being done once, at the top of the page. Doing this only affects the page that the styles are declared on.

Example:


<head>
	...
	<style type="text/css">
		h1 { color:limegreen; }
		.big { font-size:200%; }
	</style>
	...
</head>

Note that with recent changes in the HTML specification, you will also be able to use this tag outside of the <head> element (i.e. within the <body>) by using the scoped attribute. This will allow styles to apply from the parent element down.


<style type="text/css" scoped>
	h1 { color:limegreen; }
	.big { font-size:200%; }
</style>

External Style Sheet

Use the <link> element to link to an external style sheet (by placing the element within the <head> element). This allows you to apply styles to any element on any page that links to the style sheet. This is recommended for setting styles across a whole website, as each page can link to the same style sheet. If you need to update the styles, you only need to do it in one place—the external style sheet (not in each page). This method allows you to update the styles across a whole website without opening any HTML document.

So this code would go in the <head> element:


<head>
	...		
	<link rel="stylesheet" href="html-styles.css">
	...
</head>

And the style sheet file (in this case we've called it html-styles.css) looks like this:


.sweet {
color:orange;
font-size:1.5em;
}

As you can see, not an HTML tag in sight. Purely CSS code (after all, it's a .css file).

This is actually the external style sheet that we link to in the HTML editor at the top of the page. In practice, you would include many more styles—styles for every HTML element on the page if you like.

You can also import styles from an external style sheet by using the @import rule within the <style> element or from within another external style sheet.

Like this:


<style type="text/css" scoped>
	@import url('html-styles.css');
</style>

While this method might have its place, it is not normally a recommended method, mainly for performance reasons. It's normally best to use the <link> method.

OK, now let's apply styles to an HTML table.