CSS Introduction

CSS is how we take that HTML frame and make it look good. Like HTML, CSS has some basic formatting rules and a list of properties. These properties, like “margin”, define styling rules for specific HTML elements. CSS uses Selectors to define what it is styling. The selector could be “h1”, which means the properties defined in the rule would be applied to all h1 tags in the HTML document. Selectors can also be used to target HTML tags by their “id” or “class” attributes, as follows:

.red{color: red; font-family: arial;}

The above example uses the selector “.red”, which targets any HTML tag with the attribute and value pair ” class=”red” “, and assigns the “color” property to the value “red”. Notice the formatting- the selector is given, then the property and value pairs are inside of “{ }” brackets, the pairs are formatted as ” property ” ” : ” ” value “, and are separated by a ” ; ” , allowing you to define multiple properties in one CSS rule. The second property defined in the above rule sets the “font-family” property to “arial”. The effect of this rule is that any HTML tag with the class “red” will have red-colored text with the arial font.

The best way to style your website is by using a CSS Stylesheet. A stylesheet is a separate document that contains all your CSS styling rules and is pulled into your HTML by a “link” tag as follows:

<link href=”style.css” rel=”stylesheet” />

The link tag should be placed in your document header, or, in other words, inbetween the <head> tags. This will cause the stylesheet, named style.css in the example above, to be loaded with the site and its styling rules applied.

A Simple Example

In the following examples, we will construct a basic web page with an image, a h1 heading, and a paragraph, and will write a stylesheet to modify how those elements display on the page.

HTML Sample

<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<h1>Really Big Headers are Always Green with the Sample Stylesheet</h1>
<img src=”mydogspot.jpg” alt=”Spot, my new dog” id=”mainImage” />
<p class=”firstParagraph”>This is the first paragraph of the section, and the class assigned to it gives it special properties when combined with our stylesheet. Notice how the font size is a little larger than the next paragraph. This is because of cascading styles!</p>
<p>This paragraph has different styling than the first because we gave additional rules to the first paragraph through the class “firstParagraph”. This paragraph only has the rules for paragraphs in general applied to it.</p>
</body>
</html>

CSS Sample

h1{color: green;}

p{font-size: 14px; color: blue; }

.firstParagraph{font-size: 18px; font-weight: bold;}

#mainImage{border: 2px; padding: 3px; margin: 5px;}

The above sample code shows how HTML and CSS work together to make a website. Yes, this code makes an ugly website, but it’s a start. A couple of things to note with this- the paragraphs have two different style rules in the stylesheet: one for the p tag, which is applied to all paragraphs, defining the size of the font and the color, and the second applied to the class firstParagraph, which changes the font size and makes the font bold. The first paragraph will have both rules applied to it as it is a p tag and has that class. Because the class is more specific than the p tag the font size in the class rule will override the font size in the p tag rule. This way you can define a general style and make it more specific to different things by adding classes or ids to them.