1.13 Skill Builder: Hello color

Introducing Cascading Style Sheets

Ah! Cascading Style Sheets — CSS — the better looking, better dressed cousin of HTML.

When HTML was invented, the internet was young, and speeds were too slow to for a visual web-browsing experience. Because computers were slow (it could take 10 minutes to download a picture), the first version of HTML had limited formatting. Later versions added more and more formatting features, but eventually programmers and designers became frustrated by cool-looking webpages that had incredibly clunky and difficult to read code.

So they decided to separate the structure (HTML code) of a document from it's style and design (CSS code).

Modern web pages are split into three fairly distinct chunks: HTML, Javascript, and CSS - and good programmers try not to mix them up.

The problem is that HTML will allow you to use some formatting codes within the HTML in order to allow backwards compatibility. Because of this it takes discipline to fully separate page structure, HTML, from it's formatting, CSS. However, you will save yourself enormous maintenance headaches by keeping all your style code apart from your page structure.

Applying CSS to your HTML code

CSS formatting can be pretty powerful. In your documents it can control the size, shape, positioning, angle, justification, font use, color, and much more.

Applying CSS to types of tags

This is pretty easy to do. Let's say that I wanted to change every piece of text in my document that is inside the <p> tags. I can do this by inserting the following code inside the <style> block inside the <head> of my document:


p {
	font-family: 	Arial;
	font-style: 	italic;
	font-weight: 	bold;
	font-size: 	20px;
	color: 		Blue;
}
			

This will turn all of the paragraph text into blue, 20 pixel high, bold italic Arial. Ugly, yes, but it will do it.

The part at the front of the CSS code - the p { - is the most important part. It is called the selector.

Applying CSS to a particular ID

Often though, you want to apply a style to just one specific id. For example, let's say that I had one particular medium sized heading that I wanted to make different from the rest. I could give that heading an id - say "specialHeader" - and code it like this:

<h3 id="specialHeader">This header will have unique formatting.</h3>

And in the <style> block inside the <head> I could add:


#specialHeader {
	font-weight: 	bold;
	font-size: 	18px;
	color: 		Orange;
	background-color: Grey;
}
			

Notice that the selector has changed. The # symbol indicates that the CSS code will be applied to the element with the specific ID.

Saving your work

Download the template and save it as "1.13S-HelloColor-LastName.html" in your Computer Programming 12 directory.

The Assignment

Recreate the following document using the same colors, type face, styles, and colors.

Construct the basic document using <p>, <li>, <h1>, <h3>, and <strong> tags.

Then apply the formatting by adding the appropriate CSS to the text by defining the text properties for each of the tags above.

However, one part of the text is unique, and should be designated with an HTML id="uniqueText", and a CSS selector of #uniqueText {.

This example is not pretty, but it will show you how to apply basic text formatting.