In the first two parts of this series, we took a brief walk through HTML's history and then looked at the basic structure of an HTML5 doucment. Then we examined the more common elements of HTML5.
With a basic understanding of HTML5, we can now turn to CSS. In this chapter, we will look at:
- Setting up a CSS Document
- Basic CSS Syntax
- Id and Class Selectors
- Backgrounds, Text, and Fonts
- Where and How to Use CSS
CSS stands for Cascading Style Sheet. The term "cascading" refers to the inherent design of CSS which allows the style of the document to be defined by the author, the browser, the reader, and even the display device, through one centralized process which allows the style wishes of each participant to come together, presumably like waters cascading into a singular river.
Setting up a CSS Document
A CSS document is a text file. In that file, we define rules that match elements on our web page and apply styling parameters to the elements' contents.
So, the first step is to open up your text editor and create a new file. Save this file as Beginner3.html. This will serve as the web page to showcase our styling. If you like, you can copy and paste the following into the document:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Beginner's HTML5 Part 3</title>
<style type="text/css">
i {
text-decoration: underline;
}
</style>
</head>
<body>
<p>[Example of no styling]</p>
<!-- Inline demonstration -->
<h1 style="color: blue;">Inline</h1>
<p style="font-family: Arial, sans;">
Inline styling describes the method of placing CSS styles
<i>directly into an element</i> in the web page. All elements use
the style attribute for this.</p>
</body>
</html>
Feel free to add elements as you wish.
The second step is to create another new file and save it as part3.css. This file will hold our CSS rules. We will come back to this later.
For now, make sure your HTML5 file is saved and open it in the browser. It should look like this:
You will notice that the h1 element is colored blue, the font in the paragraph is different than the default font in the browser, and text between the opening and closing tags for the i element are displayed in italic and underlined.
Cool! Now that you see a tiny bit of what CSS can do, let's examine the syntax a bit.
CSS exits in one of three states: Inline, Embedded, or External.
Inline styling occurs when you add CSS property definitions to the style attribute of an element. Here is the heading element from the example:
<h1 style="color: blue;">Inline CSS</h1>
The style attribute is declared after the element name and before the closing bracket in the opening tag. In the case of this element, the style is set to "color: blue;".
The word "color" is a property, and the text "blue" is the value. These are separated by a colon and then terminated with a semicolon.
All elements can be styled by using the style attribute.
Embedding CSS means to create a style element in the head element of your web document and fill it with styling definitions. Here, you need to add two things to make it work: the selector and the curly braces.
In the file you created at the top of this article, there is an element called "style" inside the head element. In this style element, we have an embedded CSS definition. Here is the relevant text:
<style type="text/css">
i {
text-decoration: underline;
}
</style>
The style tag holds the CSS definitions for this document. The type attribute, which is set to "text/css" defines the type of styling that the style element will contain. Because the browser can interpret the type of styling by merely looking at what you have typed, the declaration of this attribute is not necessary.
Also, the style element can appear just about anywhere in the document and it will work fine. However, a validated document must have the style element placed inside the head element (unless you specify the scoped attribute, but that is not covered in this series).
Selector
You are probably wondering what line "i {" means here. Well, the i part is called the "selector", and it is followed by a curly brace. Between that opening curly brace ('{') and a subsequent closing brace ('}') lies the CSS definition for the selector.
The selector is one or more patterns used by the browser to associate a style definition with one or more elements. The selector is not the same thing as a regular expression, but it does perform a similar function. The selector pattern will match elements based on:
- element name (p, table, i, a, span, etc.) ,
- element attribute id value,
- element attribute class value,
- the state of the element (checkbox checked e.g.),
- the relationship of the element to other elements, or
- a combination of the above.
In your CSS document, you can create selectors for each element type individually:
h1 {
...
}
p {
...
}
i {
...
}
...etc
Or you can combine them by separating the element names with commas:
h1, p, i, {
...
}
You can even select everything with the ever-powerful meta-character: the asterisk:
* {
...
}
In the code the "i" selector matches all i elements. If, instead, the i was replaced by "p", then the p elements in the web page would be assigned the styling.
So this (Notice the i is now a p...):
<style type="text/css">
p {
text-decoration: underline;
}
</style>
Now gives this:
Notice that the paragraphs are now underlined. That is because the CSS selector "p" matched the p elements in the document and applied the text-decoration property of "underline".
Properties and Values
Just like with the way CSS is defined in the style attribute of all elements, the styling definitions between the curly braces begin with an property, followed by a colon (':'), then a value, and finally the semicolon (';').
p {
text-decoration: underline;
}
- - - - - - - - - - - - - - - -
selector = p
start definition = {
property = text-decoration
value = underline
end definition = }
External
Unlike the inline and embedded CSS methods, the external method uses a separate file, usually called the CSS or styling document.
So, now that we have working embedded CSS code, let's put it into that new file we created earlier. This will be our external CSS document. Copy the text between the script tags and paste it directly into part3.css, then save the file. The contents of the CSS file should just look like this:
p {
text-decoration: underline;
}
Now we need to tell the web document where the style sheet is. To do that, we need to create a new element in our web page. To do this, get rid of the style attribute--tags and all--and replace it with the following:
<link rel="stylesheet" href="part3.css">
The link element points to external files. Its rel attribute defines the type of resource in the link, and the href attribute contains the URL to the resource. Because it can point to many different types of resources, the rel attribute is required. When we are linking in CSS files, set rel to the value "stylesheet".
Make sure the href attribute is set to "part3.css" and the two files (part3.css and Beginner3.html) exist in the same folder.
Because our sample web page and the resource share the same directory, all the link element needs in the href field is the name of the file.
Here is what Beginner3.html should now contain:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Beginner's HTML5 Part 3</title>
<link rel="stylesheet" href="part3.css">
</head>
<body>
<p>[Example of no styling]</p>
<!-- Inline demonstration -->
<h1 style="color: blue;">Inline</h1>
<p style="font-family: Arial, sans;">
Inline styling describes the method of placing CSS styles
<i>directly into an element</i> in the web page. All elements use
the style attribute for this.</p>
</body>
</html>
Now, save everything. Bring the web page up in the browser. You should see a lot of underlined text if you changed the "i" to a "p" in part3.css.
With that, you now have a web page and an external stylesheet. When you make changes to the stylesheet and save it, you can just refresh the web page in the browser (usually the F5 button) and see your changes come to life.
The selectors in a CSS description which match an element name are called element Selectors. In this section, we will look at two other ways to select elements on the web page:
- attribute id value
- attribute class value
Id selectors match elements that have the same value for their id attribute. Class selectors match elements that have the same value for their class attribute.
Remember the global attributes? The id attribute holds a unique identifier for an element. The class attribute assigns a class value to an element. Only one element can have a given id value, whereas many elements can belong to the same class. Depending upon the structure of the document and your styling needs, one type of selector may work better than another.
The Id selector begins with a hash ('#') and is immediately followed by the id value. The Class selector begins with a period ('.') and is immediately followed by the class name. To wit:
#myuniqueid {
...
}
.myclassname {
...
}
<p id="myuniqueid">This element is styled via id selector "#myuniqueid".</p>
<p class="myclassname">This element is styled via class selector ".myclassname".</p>
<span class="myclassname">This is also styled via the ".myclassname" selector.</span>
Well, now that we have a good idea how to select elements on a page, we can take a look at what display features we can change for these elements.
Most elements have a background to them and can be set to a variety of things. We can kick things off by setting the background for the entire web page. Enter this new text into your CSS document:
body {
background: lightskyblue;
}
Now save the CSS file and refresh the page in the browser. You should now have a page with a blue background.
Even though we only set a color to the background, the background property can set much more. In fact, the background property lets you set all background-related properties on one line. This is generally what you can set:
background : color position repeat attachment image size origin clip
Each property value is separated by one space. The CSS3-specific properties are size, origin, and clip; the others were defined in CSS1 and CSS2. If your browser does not fully support CSS3, the CSS3-specific properties may cause parsing errors. For now, we will focus on the color.
Colors
CSS colors can be defined in one of three ways:
- Keyword color
- RGB color
- Hexadecimal color
Keyword colors are a modified subset of the X11 colors (originally from the X Window System) which give you a good idea of what you will see by the name alone. The background color specified in the body selector above, 'lightskyblue', is just one of many pre-defined colors, each matched with a specific color value. Here is a small sampling:
| AntiqueWhite | #FAEBD7 |
| Black | #000000 |
| Coral | #FF7F50 |
| DarkSeaGreen | #8FBC8F |
| Gold | #FFD700 |
| LightSkyBlue | #87CEFA |
| SandyBrown | #F4A460 |
| SteelBlue | #4682B4 |
| White | #FFFFFF |
RGB colors use the rgb functional notation. The color values can be expressed as a decimal from 0 to 255 or a percent value.
background : rgb(0, 0, 255);
background : rgb(0%, 0%, 100%);
background : rgb(128, 128, 128);
background : rgb(-23, 999, 0);
Opacity is set to 100% by default, but it can also be changed by using a variant on the rgb notation: rgba. The fourth parameter, the alpha channel, must contain a float value between 0 and 1, inclusive:
background : rgba(135, 206, 250, .5)
background : rgba(53%, 81%, 98%, .5)
Hexadecimal colors are expressed as a hash character ('#') followed by three or six digits. If three, then the resultant is made by replicating each digit. So, #3c9 actually represents #33cc99:
background : #00f;
background : #0000ff;
background : #87cefa;
There is also one special color called 'transparent'. It makes the background of the element invisible.
background : transparent
Images
How about images? CSS uses a url functional notation to point to an image file. Here is how you may specify an image in the same directory as the web page:
body {
background: url('bkg_1.jpg');
}
Images in backgrounds are, by default, tiled. Here is how you can show just one iteration of an image in a web page background in the upper-left corner of the page:
background: url('bkg_1.jpg') top left no-repeat;
The order of the values in the background property is not set in stone. Care must be taken, however, with the position property. The values are word pairs that must be specified in the correct order:
| Property | Values |
| background-position | left top |
| | left center |
| | left bottom |
| | right top |
| | right center |
| | right bottom |
| | center top |
| | center center |
| | center bottom |
| | xpos ypos (pixels or percent values) |
There are assumed and unwritten standards most people follow, either because they have always done things a certain way or they have learned from their mistakes. One such standard is the suggestion that the CSS author always include a color property with an image when defining a background:
body {
background: url('bkg_1.jpg');
background-color: lightskyblue;
}
The reasoning is simple: If the image goes away or cannot be loaded, you will always have a color to display as your backup plan, because there is nothing in a web page that indicates a missing background image file.
Containing Text
Before discussing fonts and text, it would be helpful to first look at three ways text can be isolated.
- Paragraphs (p element)
- Blocks (div element)
- Inline (span element)
The p element has already been covered. It groups a specific amount of text, visually separating it from the rest of the document with margins above and below the element.
But, there are many cases where margins are not wanted, or the text needs do be constrained within a specific area on the web page. Paragraphs (using the p element) cannot be set to a certain width or height, because the p element is not a block element. Block elements can be constrained by width and height, meaning the contents of the block element can be constrained as well.
The div element is one such block element.
<div></div>
There are no special attributes associated with a div. However, a div's position and size can be controlled via CSS definitions. This makes the div a very good element to use when text must be isolated or constrained in some fashion.
<div style="width: 220px;">
Block elements can be positioned and sized. The div element is
an excellent example of a block element. Prior to HTML5, it
was used as the go-to element for web designers who opted to
stay away from tables and frames in their designs. This text
is constrained by a div that is 220 pixels wide.
</div>
The above code shows text inside a div element that has a width of 220 pixels. Because the div is constrained, all lines of text inside the div will not exceed 220 pixels in width. This is what it looks like in the Chrome browser:
The span element, on the other hand, is similar to the p element in that it cannot be sized, but it does not separate its contents from the rest of the document in any visible manner, unless it has a styling change.
Here is some code with two span elements. One has no styling and the other does. (Note we are using inline styling here.)
<div style="width: 300px;">
<p>
This is some text <span>with part of it wrapped
in a span element.</span> Notice the browser
does not indicate anything special.</p>
<p>
This is some text <span style="color: green;">with part of it wrapped
in a span element with CSS styling.</span> Notice the browser
shows a change in text color.</p>
<p>
</div>
When rendered, the browser shows a change in the text only with the span which has styling:
The div and span elements can be used to modify the appearance of text via CSS properties. Let us now take a look at how other text properties can be changed.
Text and Font Properties
Text on a web page is displayed in a font with text decoration properties. Without a custom CSS selector, the browser controls the default font, size, and decorator values. CSS gives you the ability to display text in many different ways, enabling your pages to override the defaults.
The font properties are as follows:
| Font Property | Example Values |
| font-family | Arial, Helvetica, sans |
| font-style | normal, italic, oblique |
| font-variant | normal, small-caps |
| font-weight | normal, bold, 700 |
| font-size | 20pt, larger, 1.2em, 150% |
There are also a few system font names that can be used to specify a font:
| System Font | Description |
| caption | captioned controls (button, etc) |
| icon | icon labels |
| menu | font used in menus |
| message-box | dialog boxes font |
| small-caption | labels for small controls |
| status-bar | window status bar font |
Here is an example of specifying various font properties for a web page:
body {
font-family: Helvetica, Arial, sans;
font-style: italic;
font-variant: normal;
font-weight: normal;
font-size: 12pt;
}
There is a shorthand way to set font properties:
font: font-style font-variant font-weight font-size/line-height font-family
When using the shorthand, any properties not specified default to normal. For example, the following does the same thing as the declaration above:
body {
font: italic 12pt Helvetica, Arial, sans;
}
Note the comma-separated list for font-family. CSS interprets this list as a request; the most important on the left and the least important on the right. If the first font in the list is not available, CSS checks the next font. The list is traversed like this until a valid font is found on the client system.
If, for example, we don't have Helvetica loaded on our system, but we do have Arial, then the body declaration above will cause text in the body to be shown in Arial font.
There are also a few generic font names that can be used to represent a font defined in the user agent:
- serif
- sans-serif
- cursive
- fantasy
- monospace
When specifying fonts in CSS, it is a good idea to use one of these generic names as the last choice. If no fonts in a list match, a default font will be used based on the generic font name (assuming a generic is listed). If no generic has been defined in the list, then the browser will use its own default.
Text presentation can also be altered using properties. Here is a list of the available choices:
| Decoration Property | Description |
| text-indent | value to indent first line of text |
| text-align | describes horizontal alignment of text |
| text-decoration | decorates text using text color |
| text-transform | controls capitalization effects |
| letter-spacing | defines spacing between characters |
| word-spacing | defines spacing between words |
| white-space | defines how white space is handled |
The text-indent and text-align properties are demonstrated in the following:
<div style="width: 240px; text-indent: 30px;">
Notice how the first line of text in this div element
is indented 30 pixels. Alignment defaults to the left.
</div>
<div style="width: 240px; text-align: center;">
This text is<br />centered.<br /> Line breaks have been added to
empasize the alignment. Also note the lack of space
between these two divs, unlike the spacing feature of
the p element.
</div>
When CSS was young, browsers did not implement a lot of its features and web designers made due with elements like <font> and <blink>. Fast forward to today, and you will find CSS just about everywhere.
To be clear, let us take a look at what CSS can not do:
- Make your site more informative (It all comes down to content.)
- Make your pages display faster (Sorry, but that's usually a bandwidth thing.)
- Make you rich (If it did, there would be a lot more millionares in this world.)
- Solve your personal problems (Dude...really...CSS?)
CSS is all about style, and style should come after structure and substance.
So, here is a recommended order of operations:
- Nail down the vision. You may have an idea for a cool site, but all you can see in your head is a cool blue background and spacey font text wrapped around awesome pictures. Unfortunately, if all you can envision for a web page is color and font, then you need to get cracking on foundational work. The "vision" is the reason for its existence and the thing it is trying to accomplish.
- Make a sketch or two. All the best artists make sketches before applying inks. Taking the pictures out of your head and putting them on paper gets you focused on reasonable goals.
- Create your HTML5 code with no CSS. Yes, this sounds like torture, but the purpose of creating the bland content is twofold:
- You get the substance formed without any styling distractions.
- You create the semantics first, which seriously helps organize the content.
- Make it pretty with CSS.
One other recommended procedure I like to impress upon impressionable folk is:
Always use external CSS files.
The author recommends this, because you can have your CSS file open in a text editor while the web page is up in a browser window, make changes, and refresh with F5 (or whatever your browser uses). The changes will update right away and you can go through iterative changes very quickly.
The big plus here is even more apparent for those of us who create web pages that are compiled from some other source code like C# or Java. With CSS, you will not need (usually) to re-compile the code over and over for each little styling change.
Oh, and the second plus lies with standardization. By this, I mean to say that external CSS files act as templates when the classes and definitions are repeated on all the pages in a web site. Making changes to embedded CSS code across many files usually leads to embarassing errors.
Summary
Well, that's a bit of a scratch upon the surface of what CSS has to offer. This chapter introduced you to the simple syntax of CSS and a handful of useful properties.
In the next chapter, we will walk the talk and go through the process of designing a web page: vision, sketch, coding, and styling.
History
2014-04-01: Initial posting.
