After covering the fundamentals of CSS in previous articles, in this demonstrates how to create CSS styled web pages.
Just like part one, it’s an interactive guide, with plenty of code examples. By the end, we’ll have constructed a classic two-column page template. So, let’s get started.
A Skeleton Page
First, we’ll need a basic HTML page skeleton. Open a blank text document in your favourite text editor and enter the below HTML code.
<html>
<head>
<title>Begin css - Part 2</title>
<link “text/css” rel=” stylesheet” align=” centers’/>
</head>
<body>
<div id=” page-container”>
<div id= “page-banner”> </div>
<div class=”left-column">
</div>
<div class=”right-column”>
</div>
</div>
</body>
</html>
Then save this code using an appropriate file name, such as ‘part2.html’.
As you can see, the HTML has a very simple, clean-looking structure. It’s easy to read and easy to see where to add content. Indenting the source code also helps clarity. All the styles will be defined in the ‘external’ stylesheet, ‘part2.css’.
The two main areas of the web page are identified by the style IDs ‘page- container’ and ‘page-footer’. An ID selector is appropriate here, as there’ll only ever be one of these on a page. Inside the ‘page-container’ there are <div> areas for the ‘page-banner’ and two columns, ‘left- column’ and ‘right-column’.
Body Styling
Now we have the skeleton HTML we can start to define the styles. The <head> area of the web page links to a stylesheet file called ‘part2.css’. Create an empty text file with that name and open it in your editor. (If you’d rather use the ‘internal’ styles option and have all the code in the the HTML file, that’s fine.)
It’s often useful to define some generic styles for the whole page. So, let’s add these lines to the stylesheet:
body {
background-color: black;
font-family: Verdana, sans-serif;
}
The first line sets a black background with the ‘background-color’ property. The second line declares a default font family for the page document. Don’t worry about the multiple property values for now, as I’ll be covering font styles in detail later on.
Does a plain colour seem a little too bland? Well, how about using an image instead? Replace the ‘background-colour’ property line with this one (using an image file of your choice):
background: black url(stars.jpg) repeat;
Now we’re using the shorthand ‘background’ property. The default colour is still black, but this time a background image is declared and tiled over the whole page with the ‘repeat’ value. Check out a good reference site or book to uncover the full list of possible values for CSS shorthand properties.
The Main Container
The ‘page-container’ <div> element is the parent container for the main content, in this case the banner and column elements. A hierarchical structure means there’s now a place to set certain content-specific styles.
With this in mind, let’s declare a few ‘page-container’ styles:
#page-container {
background-color: whitesmoke;
color: black;
min-width: 600px;
min-height: 350px;
margin: 0px;
}
First, the background is set to a very light colour - in contrast to the black <body> colour we set earlier. Then the text colour is set to black. These will be the default background and text colours for all child elements.
Next, the minimum width and height is set. But notice it’s not a fixed value, such as ‘width: 900px’. This means the dimensions will be determined by the browser window size. The ‘min’ values ensure the page content will remain readable (via scrolling) when the browser window is small.
Finally, all margins are defaulted to zero using another shorthand property, ‘margin’, which simultaneously sets the left, right, top and bottom values.
Footer Treatment
Before moving on to the main content, let’s look at the footer. This is typically the place where general information is placed, such as copyright or contact information. As it’s not part of the main content, it can be styled in a different manner.
Here’s an example:
#page-footer {
margin: 10px;
text-align: center;
font-family: Verdana;
font-size: 80%;
color: #333;
}
First, a margin width of ten pixels is set to separate the footer information from the other content. The ‘text-align’ property will centre the text. And this text will appear in the Verdana font, at 80% of the normal font size and in a light grey colour, so as to be visible on the <body> element’s black background.
Add A Banner
On a typical website, each page will have the same banner. This can be an image, text or a combination of both. Let’s create a banner style and introduce the concept of positioning.
Here’s the stylesheet code:
#page-banner {
position: relative;
top: 0px;
left: 0px;
background: url(banner.png) no-repeat center top;
text-align: center;
}
The ‘position’ property value affects any subsequent ‘top’ and left’ properties. A ‘relative’ value ensures the element is placed in the normal HTML layout flow. In other words, the HTML element hierarchy will dictate the initial position, before any specific positional property values are applied. An ‘absolute’ value will ignore the HTML hierarchy and force any positional values to be relative to the parent container’s top- left corner.
The banner image is specified with the shorthand ‘background’ property. A ‘no-repeat’ value means don’t tile this image. Instead it’s positioned at the top and centre of the banner’s <div> element.
The banner image is specified with the shorthand ‘background’ property. A ‘no-repeat’ value means don’t tile this image. Instead it’s positioned at the top and centre of the banner’s <div> element.
Any text added inside the banner <dlv> element will be layered over the top of the image and centred via the ‘text-align’ property value. The banner’s text style is best defined in a separate declaration.
Creating Columns
As the <div> class names ‘left-column’ and ‘right-column’ might suggest, the objective here is to create a classic two-column layout. It’s an ideal layout for displaying a contents list in one column and the actual content items in the other. An example would be a blog entry list in the left column and the actual blog text in the right column.
In pure HTML you’d probably create a table element. However, in CSS we can take advantage of more flexible features such as dynamic sizing and ‘floating’. These are the column style declarations:
.left-column {
width: 28%;
float: left;
}
.right-column (
width: 70%;
float: right;
}
These are class selectors rather than lDs, so they can be applied to multiple elements if required. Both define a width in terms of a percentage instead of with a fixed number. It’s the percentage of the parent element’s width, in this case ‘page-container’. As the width of the parent element changes, so the width of these columns will change proportionally. Note they don’t quite add up to 100% by design, as it provides a little wiggle room for some extra touches.
Dynamic sizing might not be appropriate in some situations. However, it’s a useful technique, particularly when a web page will be viewed on small-screen devices, such as netbooks, tablets and smartphones.
Now to the ‘float’ property. Floating takes an element out of its normal vertical flow positioning and pushes it either to the left or right of the parent container. Other content will flow around a ‘floated’ element, rather like water flowing around a large rock in a stream.
Floating can be applied to all sorts of elements and is particularly useful when combining text and images. In this case, the text will flow around the image, adjusting itself in a dynamic manner depending on the dimensions of the container.
Column Styles
Before considering column content let’s make them a little more distinctive. First, we’ll change the ‘left-column’ style declaration to this:
left-column {
width: 28%;
float: left;
border: 2px solid #DDD;
text-align: left;
}
The new border property will apply a two pixel (2px) thick, light grey (#DDD) coloured border to the column. And a ‘text-align’ property value ensures the text is left aligned with the left-hand side.
Now let’s make a similar change to the ‘right-column’ style, like this:
.right-column {
width: 70%;
float: right;
border: 2px solid #DDD;
text-align: left;
background-color: white;
}
Note the right column will have a different background colour as well as a border.
Choose Your Font
There’s quite a lot you can do to make web page text a little more interesting. Setting the font family is a good place to start.
A well-chosen font will aid readability and make your pages stand out from the norm. Browsers typically support a collection of popular font families, such as Times, Anal, Verdana, Courier. However, just in case a particular font isn’t supported by the user’s browser, it’s best to define alternatives. The family names as specified in a comma separated list as here:
font-family: Georgia, Times, serif;
font-family: Verdana, Anal, sans-serif;
Here the values define a list of serif and sans-serif style fonts respectively. Each name will be assessed by the browser one at a time, in the order specified, and applied if supported.
But what if the browser-supported fonts seem a little constraining? Well, it’s possible to add new fonts. Take Google’s web fonts for example. First, find a suitable font from the webfonts site (google.com/webfonts), then add a new CSS <link> entry into your page <head> area. Here’s an example using the ‘Acme’ font:
<link href=”http://fonts.googleapis.com/css?family=Acme” rel= “stylesheet” type= text/css”/>
Now the ‘Acme’ font will be obtained from Google’s site and can be used as a ‘font-family’ property value.
Fun With Text
However, the font family is only part of the picture. The ‘font-size’, ‘font-weight’, ‘font- style’, ‘font-variant’ and colour properties can be used to identify headings, highlight a phrase or emphasise a particular word. Here’s an example that sets some of these properties in a paragraph element specific style class:
p.item-title {
font-size: 120%;
font-weight: bold;
font-variant: small-caps;
}
Here the font-size is enlarged to 120% of the default font size. However, the font-size property can also have absolute, relative, and length options. Absolute values can range from ‘xx-small’ all the way to ‘xx-large’. Relative values are ‘smaller’ or ‘larger’. And length can be expressed in points (pt), pixels (px), centimetres (cm), millimetres (mm), inches (in) and ems (em).
The example also sets the font-weight to ‘bold’, but it could be ‘bolder’, ‘lighter’, or ‘normal’. The weight can also be expressed as a number from 100 (the lightest) to 900 (the boldest).
And finally the font-variant property replaces the ‘normal’ default value with ‘small-caps’, to make this title stand out even more.
CSS also has a shorthand ‘font’ property, which can combine all the font properties into a single line. Check out a CSS reference for a full definition.
But there’s more. The ‘text-transform’ property can apply case characteristics to text, as here:
h1 { text-transform: uppercase }
h2 { text-transform: capitalize }
Now all <h1> element text will be capitalised (first letter uppercase, rest lowercase), and all <h2> element text will be forced to uppercase. There’s a ‘lowercase’ option too.
Then there’s a ‘text-decoration’ property that can apply underlines, overlines, strike-outs or even make the text blink. The underline decoration setting is invariably used with a colour change to identify hyperlinks.
Css styles can also control the spacing of characters, words and lines. Check out the entries for ‘text-indent’, ‘letter- spacing’, ‘word-spacing’, ‘line-height’, and ‘white-space’ in a CSS reference.
In CSS3, the latest version of the language, there’s even more possibilities. Fonts can be size adjusted, smoothed, stretched and emphasised.
Unmissable Hyperlinks
Is the default hyperlinks style appropriate for your page? Depending on the fonts and colour scheme chosen, the embedded hyperlinks may either not stand out enough or be too prominent, distracting attention away from the text.
However, they can be restyled. A significant proportion of the text styling armoury we’ve already discussed can be utilised. Different fonts, sizes, weights, decoration and colours can make a big difference to hyperlink visibility and overall readability.
Hyperlink elements also have another feature. They can exist in different states, including ‘hover’, ‘focus’, ‘active’ and ‘visited’. In CSS it’s possible to apply different styles to each of these states. To show how that’s achieved, I’ll need to introduce a more specialised class selector called a pseudo class.
In a pseudo class, the selector has two parts separated by a colon. The syntax looks like this:
selector:pseudo-element {
property: value
}
Typically, this will be defined using a combination of an element selector and a characteristic of this element as the ‘pseudo-element’. To demonstrate, let’s create some hyperlink style declarations. In this case, a subtle effect using just colour:
a:link {color: #F80;}
a:hover {color: #F08;}
a:visited {color: #888;}
The first line style sets the default hyperlink colour. The second causes a hyperlink to change colour as the mouse hovers over them. And the last line defines a third colour for any hyperlink site that’s already been visited. Note that style cascading ensures other hyperlink styles are still applied, such as the underline decoration.
Of course, we can be much more radical with our styling. Try these replacements for ‘link’ and ‘hover’:
a:link {
color: #F80;
text-decoration: underline blink;
}
a:hover {
background-color: black;
text-decoration: underline;
}
Wrapping Up
Well, that’s the end of this introductory guide to CSS. I hope you found it both informative and fun.
0 comments:
Post a Comment