Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
183 views

Css Tutorial

This document provides a summary of a CSS beginner tutorial. It discusses CSS (Cascading Style Sheets) and how it is used to style HTML documents. It then covers applying CSS through inline, internal and external styles, and describes CSS selectors, properties and values. Finally, it discusses various text properties in CSS like font, size, weight, style, decoration and transformation.

Uploaded by

api-325341486
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
183 views

Css Tutorial

This document provides a summary of a CSS beginner tutorial. It discusses CSS (Cascading Style Sheets) and how it is used to style HTML documents. It then covers applying CSS through inline, internal and external styles, and describes CSS selectors, properties and values. Finally, it discusses various text properties in CSS like font, size, weight, style, decoration and transformation.

Uploaded by

api-325341486
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

CSS Beginner Tutorial

CSS: Cascading Style Sheet


Avinash Malhotra

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the
style sheet is the presentation of that document.
Styles don't smell or taste anything like HTML, they have a format of 'property: value' and most
properties can be applied to most HTML tags.









Applying CSS - The different ways you can apply CSS to HTML.
Selectors, Properties, and Values - The bits that make up CSS.
Colours - How to use colour.
Text - How to manipulate the size and shape of text.
Margins and Padding - How to space things out.
Borders - Erm. Borders. Fings wot go around fings.
Putting It All Together - Throwing all of the above ingredients into one spicy hotpot.

Applying CSS
There are three ways to apply CSS to HTML.

In-line
In-line styles are plonked straight into the HTML tags using the style attribute.
They look something like this:

<p style="color: red">text</p>

This will make that specific paragraph red.


But, if you remember, the best-practice approach is that the HTML should be a standalone, presentation free document, and so in-line styles should be avoided wherever possible.

Internal ( or Embedded)
Embedded, or internal styles are used for the whole page. Inside the head tags, the style tags
surround all of the styles for the page.
This would look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...

This will make all of the paragraphs in the page red and all of the links blue.
Similarly to the in-line styles, you should keep the HTML and the CSS files separate, and so we are
left with our saviour...

External
External styles are used for the whole, multiple-page website. There is a separate CSS file, which
will simply look something like:

p {
color: red;
}
a {
color: blue;
}

If this file is saved as "web.css" then it can be linked to in the HTML like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...

To get the most from this guide, it would be a good idea to try out the code as we go along, so start a
fresh new file with your text-editor and save the blank document as "web.css" in the same directory
as your HTML file.
Now change your HTML file so that it starts something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...

Save the HTML file. This now links to the CSS file, which is empty at the moment, so won't change a
thing. As you work your way through the CSS Beginner Tutorial, you will be able to add to and change
the CSS file and see the results by simply refreshing the browser window that has the HTML file in it,
as we did before.

CSS Selectors, Properties, and Values


Whereas

HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and

external style sheets. In this CSS Beginner Tutorial we will be concentrating on HTML selectors,
which are simply the names of HTML tags and are used to change the style of a specific tag.
For each selector there are 'properties' inside curly brackets, which simply take the form of words
such as color, font-weight or background-color.
A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate
the properties.

body {
font-size: 0.8em;
color: navy;
}

This will apply the given values to the font-size and color properties to the body selector.
So basically, when this is applied to an HTML document, text between the body tags (which is the
content of the whole window) will be 0.8 ems in size and navy in colour.

Lengths and Percentages


There are many property-specific units for values used in CSS, but there are some general units that
are used in a number of properties and it is worth familiarising yourself with these before continuing.
em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example,
is two times the current font size.
px (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).
When a value is zero, you do not need to state a unit. For example, if you wanted to specify no
border, it would be border: 0.
A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed
to view the web page how the hell they like, which includes the font size and the size of the screen.
Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes (and
possibly even heights and widths, which we shall come across in the CSS Advanced Tutorial), rather
than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for
border sizes for example.

Colours
CSS brings 16,777,216 colours to your disposal. They can take the form of a name,
an rgb (red/green/blue) value or a hex code.

red
Is the same as

rgb(255,0,0)
Which is the same as

rgb(100%,0%,0%)
Which is the same as

#ff0000
Which is the same as

#f00
There are 17 valid predefined colour names. They
are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, r

ed, silver,teal, white, and yellow.


transparent is also a valid value.
The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red),
255 being the highest level (for example full red). These values can also be a percentage.
Hexadecimal (previously and more accurately known as 'sexadecimal') is a base-16 number
system. We are generally used to the decimalnumber system (base-10, from 0 to 9), but
hexadecimal has 16 digits, from 0 to f.
The hex number is prefixed with a hash character (#) and can be three or six digits in length.
Basically, the three-digit version is a compressed version of the six-digit
(#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher
(the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit
version gives you more control over the exact colour.

'color' and 'background-color'


Colours can be applied by using color and background-color (note that this must be the
American English 'color' and not 'colour').
A blue background and yellow text could look like this:

h1 {
color: yellow;
background-color: blue;
}

These colours might be a little too harsh, so you could change the code of your CSS file for slightly
different shades:

body {

font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}

Save the CSS file and refresh your browser. You will see the colours of the first heading
(the h1 element) have changed to yellow and blue.
You can apply the color and background-color properties to most HTML elements,
including body, which will change the colours of the page and everything in it.

Text
You can alter the size and shape of the text on a web page with a range of properties, outlined below:

font-family
This is the font itself, such as Times New Roman, Arial, or Verdana.
The font you specify must be on the user's computer, so there is little point in using obscure fonts.
There are a select few 'safe' fonts (the most commonly used are arial, verdana and times new
roman), but you can specify more than one font, separated by commas. The purpose of this is that if
the user does not have the first font you specify, the browser will go through the list until it finds one
it does have. This is useful because different computers sometimes have different fonts installed.
So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC
(which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have
arial and so helvetica, which it does normally have, will be used).
Note: if the name of a font is more than one word, it should be put in quotation marks, such
as font-family: "Times New Roman".

font-size
The size of the font. Be careful with this - text such as headings should not just be a paragraph in a
large font; you should still use headings (h1, h2etc.) even though, in practice, you could make the
font-size of a paragraph larger than that of a heading (not recommended for sensible people).

font-weight
This states whether the text is bold or not. In practice this usually only works as font-weight:

bold or font-weight: normal. In theory it can also


be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but seeing as many
browsers shake their heads and say "I don't think so", it's safer to stick with bold and normal.

font-style
This states whether the text is italic or not. It can be font-style: italic or font-style:

normal.

text-decoration
This states whether the text is underlined or not. This can be:

text-decoration: overline, which places a line above the text.

text-decoration: line-through, strike-through, which puts a line through the text.

text-decoration: underline should only be used for links because users generally expect
underlined text to be links.
This property is usually used to decorate links, such as specifying no underline with text-

decoration: none.

text-transform
7

This will change the case of the text.

text-transform: capitalize turns the first letter of every word into uppercase.

text-transform: uppercase turns everything into uppercase.

text-transform: lowercase turns everything into lowercase.

text-transform: none I'll leave for you to work out.


body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}

Text spacing
The letter-spacing and word-spacing properties are for spacing between letters or words. The
value can be a length or normal.
The line-height property sets the height of the lines in an element, such as a paragraph, without
adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so '2' will
be two times the font size, for example), a length, a percentage or normal.
The text-align property will align the text inside an element to left, right, center or justify.
The text-indent property will indent the first line of a paragraph, for example, to a given length
or percentage. This is a style traditionally used in print, but rarely in digital media such as the web.

p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;

Margins and Padding


margin and padding are the two most commonly used properties for spacing-out elements. A
margin is the space outside of the element, whereas padding is the space insidethe element.
Change the CSS code for h2 to the following:

h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}

You will see that this leaves one-character width space around the secondary header and the header
itself is fat from the three-character width padding.
The four sides of an element can also be set individually. margin-top, margin-right, margin-

bottom, margin-left, padding-top, padding-right,padding-bottom and padding-left are


the self-explanatory properties you can use.

The Box Model


Margins, padding and borders are all part of what's known as the Box Model. The Box Model works
like this: in the middle you have the content area (let's say an image), surrounding that you have the
padding, surrounding that you have the border and surrounding that you have the margin. It can be
visually represented like this:
Margin box
Border box
Padding box
Element box
You don't have to use all of these, but it can be helpful to remember that the box model can be
applied to every element on the page, and that's a powerful thing!

CSS Borders
Borders can be applied to most HTML elements within the body.

To make a border around an element, all you need is border-style. The values can
be solid, dotted, dashed, double, groove, ridge, inset andoutset.

border-width sets the width of the border, which is usually in pixels. There are also properties
for border-top-width, border-right-width, border-bottom-width and border-left-

width.
Finally, border-color sets the colour.
Add the following code to the CSS file:

h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3
pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden
the 3 pixel wide width of the entire border).

10

CSS Beginner Tutorial - Putting It All Together


The code below covers all of the CSS methods in this section. If you save this as your CSS file and
look at the HTML file then you should now understand what each CSS property does and how to apply
them. The best way to fully understand all of this is to mess around with the HTML and the CSS files
and see what happens when you change things.

body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* this is a comment */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}

11

h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}

12

CSS Intermediate Tutorial

Contents


Class and ID Selectors - Make your own selectors without the need for sticky-backed plastic!

Grouping and Nesting - Properties assigned to multiple selectors or selectors within selectors.

Pseudo Classes - Defining various states of a link selector.

Shorthand Properties - Various properties, such as borders and margins that amalgamate other
properties into one.

Background-images - Guess.

13

Class and ID Selectors


For the CSS Beginner Tutorial we looked solely at HTML selectors - those that represent an HTML tag.
You can also define your own selectors in the form of Class and ID selectors.
The benefit of this is that you can have the same HTML element, but present it differently depending
on its class or ID.

#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
The HTML refers to the CSS by using the attributes id and class. It could look something like this:

<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>

The difference between an ID and a class is that an ID can be used to identify one element, whereas a
class can be used to identify more than one.
You can also apply a selector to a specific HTML element by simply stating the HTML selector first,
so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.

14

Grouping and Nesting


Grouping
You can give the same properties to a number of selectors without having to repeat them by
separating the selectors by commas.
For example, if you have something like:

h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}

You could make it:

h2, .thisOtherClass, .yetAnotherClass {


color: red;
}

Nesting
If the CSS is structured well, there shouldn't be a need to use many class or ID selectors.
This is because you can specify properties to selectors within other selectors.
For example:

#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;

font-weight: bold;

15

Removes the need for classes or ID's if it is applied to


this:

HTML that looks something like

<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>

This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0'
and 'p inside ID top is red and bold'.
This can get quite complicated (because it can go for more than two levels, such as this inside this
inside this inside this etc.) and may take a bit of practice.

16

Pseudo Classes
Pseudo classes are bolted on to selectors to specify a state or relation to the selector. They
take the form of selector:pseudo class { property: value; }, simply with a colon in between the
selector and the pseudo class.
Many CSS proposals are not supported by all browsers, but there are four pseudo classes that can be
used safely when applied to links.

link is for an unvisited link.

visited is for a link to a page that has already been visited.

active is for a link when it is gains focus (for example, when it is clicked on).

hover is for a link when the cursor is held over it.

a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}

Although CSS gives you control to bypass it, maintaining different colours for visited links is good
practice as many users still expect this. As pseudo classes (other than hover) are not often used, this
is a feature that is unfortunately not as common as it once was. Because of this, it is less important
than it used to be, but if you are looking for the optimum user response, then you should use it.
Traditionally, text links were blue if not visited and purple if visited, and there is still reason to
believe that these are the most effective colours to use, although, again, with the increasingly
widespread use of CSS, this is becoming less commonplace and the average user no longer assumes
that links must be blue or purple.
You should also be able to use the hover pseudo class with elements other than links.
Unfortunately, Internet Explorer doesn't support this method. This is a bloody irritation because there
are lots of nice little tricks you can do that look delightful in other browsers.

17

Shorthand Properties
Some

CSS properties allow a string of values, replacing the need for a number of properties. These are

represented by values separated by spaces.

margin, padding and border-width allow you to amalgamate margin-top-width, marginright-width, margin-bottom-width etc. in the form of property: top right bottom
left;
So:

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}

Can be summed up as:

p {
border-width: 1px 5px 10px 20px;
}

border-width, border-color and border-style can also be summed up as, for example:
p {
border: 1px red solid;
}

(This can also be applied to border-top, border-right etc.)


By stating just two values (such as margin: 1em 10em;), the first value will be the top and bottom
and the second value will be the right and left.
Font-related properties can also be gathered together with the font property:

p {
font: italic bold 1em/1.5 courier;
}
(Where the '/1.5' is the line-height)
So, to put it all together, try this code:

p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;

18

border-color: red green blue yellow;


margin: 1em 5em;
}

19

Background Images
There are a number of properties involved in the manipulation of background images.
Luckily, the property background can deal with them all.

body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat
top right;
}

This amalgamates these properties:

background-color, which we have come across before.

background-image, which is the location of the image itself.

background-repeat, which is how the image repeats itself. This can be repeat (equivalent to a
'tile' effect across the whole background),repeat-y (repeating on the 'y-axis', above and
below), repeat-x (repeating on the 'x-axis', side-by-side) or no-repeat (which shows just one
instance of the image).

background-position, which can be top, center, bottom, left, right or any sensible
combination, such as above.
Background-images can be used in most HTML elements - not just for the whole page (body) and can
be used for simple but effective results, such as shaped corners.

Background-images can be used in most

HTML elements - not just for the whole page (body) and can

be used for simple but effective results, such as shaped corners.


It is easy to get carried away with background images and plaster them all over your web pages.
Some visually hyperactive people might believe it looks good to have a full-on brightly coloured
photograph tiled across the background of a page, giving the user a Mensa-esque challenge in
deciphering the foreground text. This is an extreme example, but the fact is that the most userfriendly, readable text is black on a plain white background or white on a plain black background
(there is also a suggestion that a slightly off-white or off-black background is better as this reduces
glare).
So, the best use of background images is either to use them where there will be no content over the
top or making the background image very light, which would also reduce the file size of the image,
because there should be less colours involved (supposing you are using an indexed-colour format,
such as GIF).

20

The Display Property


A key trick to the manipulation of HTML elements is understanding that there's nothing at all special
about how most of them work. Most pages could be made up from just a few tags that can be styled
any which way you choose. The browser's default visual representation of most HTML elements
consist of varying font styles, margins, padding and, essentially, display types.
The most fundamental types of display are inline, block-line and none and they can be manipulated
with the display property and the values inline, block and none.

inline does just what it says - elements that are displayed inline follow the flow of a
line. Strong, anchor and emphasis elements are traditionally displayed inline.

block puts a line break before and after the element. Header and paragraph elements are
examples of elements that are traditionally displayed block-line.

none, well, doesn't display the element, which may sound pretty useless but can be used to good
effect with accessibility considerations (seeAccessible Links), alternate stylesheets or advanced hover
effects.
The original default style-sheet for this site for example, manipulates a few traditionally in-line and
block-line elements to fit the design.

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

This enabled the title 'techaltum.com' and the tag-line to be displayed next to each other rather than
above and below each other while maintaining optimum accessibility.

#navigation, #seeAlso, #comments, #standards {


display: none;
}

The above code is used in the print-only styles to basically 'turn-off' those elements, such as
navigation, which are insignificant to the single page.
display: none and visibility: hidden vary in that display: none takes the element completely
out of play, whereas visibility: hidden keeps the element and its flow in place without visually
representing its contents. For example, if the second paragraph of 3 were set to display: none, the
first paragraph would run straight in to the third whereas if it were set to visibility: hidden, there
would be a gap where the paragraph should be.

21

Tables
Perhaps the best way to understand the table-related display property values is to think of HTML
tables. table is the initial display and you can mimic the tr and td elements with the table-

row and table-cell values respectively.


The display property goes further by offering table-column, table-row-group, table-

column-group, table-header-group, table-footer-group and table-caption as values,


which are all quite self-descriptive. The immediately obvious benefit of these values is that you can
construct a table by columns, rather than the row-biased method used in HTML.
Finally, the value inline-table basically sets the table without line breaks before and after it.

Getting carried away with CSS tables can seriously damage your accessibility. HTML should be used to
convey meaning, so if you have tabular data it should be arranged in HTML tables. Using CSS tables
exclusively could result in a mash of data that is completely unreadable without the CSS. Bad. And
not in a Michael Jackson way.

Other display types


list-item is self descriptive and displays as in the way that you would usually expect an li HTML
element to. To work properly then, elements displayed this way should be nested in
a ul or ol element.

run-in makes an element either in-line or block-line depending on the display of its parent. It
doesn't work on IE or Mozilla based browsers. Very helpful.

compact also makes the element inline or block-line depending on the context. It doesn't work that
well either...

marker is used exclusively with the :before and :after pseudo elements to define the display of
the value of the content property. The automatic display of the contentproperty is
already marker, so this is only useful if you are overriding a previous display property for the
pseudo element.

22

Page Layout
Layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear
difficult, but it isn't, it's just different and actually makes much more sense.
You need to look at each part of the page as an individual chunk that you can shove wherever you
choose. You can place these chunks absolutely or relative to another chunk.

Positioning
The position property is used to define whether an element
is absolute, relative, static or fixed.
The value static is the default value for elements and renders the position in the normal order of
things, as they appear in the HTML.

relative is much like static, but the element can be offset from its original position with the
properties top, right, bottom and left.

absolute pulls an element out of the normal flow of the HTML and delivers it to a world all of its
own. In this crazy little world, the absolute element can be placed anywhere on the page
using top, right, bottom and left.

fixed behaves like absolute, but it will absolutely position an element in reference to the
browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly
where they are on the screen even when the page is scrolled. Why theoretically? Why else - this
works great in browsers such as Mozilla and Opera, but in IE it doesn't work at all.

Layout using absolute positioning


You can create a traditional two-column layout with absolute positioning if you have something like
the following HTML:

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra
banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

And if you apply the following CSS:

23

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}

You will see that this will set the navigation bar to the left and set the width to 10 em's. Because the
navigation is absolutely positioned, it has nothing to do with the flow of the rest of the page, so all
that is needed is to set the left margin of the content area to be equal to the width of the navigation
bar.
How bloody easy. And you aren't limited to this two-column approach. With clever positioning, you
can arrange as many blocks as you like. If you wanted to add a third column, for example, you could
add a 'navigation2' chunk to the HTML and change the CSS to:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and
left margin to 10em */
}

The only downside to absolutely positioned elements is that because they live in a world of their own,
there is no way of accurately determining where they end. If you were to use the examples above and
all of your pages had small navigation bars and large content areas, you would be okay, but,
especially when using relative values for widths and sizes, you often have to abandon any hope of
placing anything, such as a footer, below these elements. If you wanted to do such a thing, it would
be necessary to float your chunks, rather than absolutely positioning them.

24

Floating
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it.
Floating is normally used to position smaller elements within a page (in the original default CSS for
this site, the 'Next Page' links in the HTML Beginner Tutorial and CSS Beginner Tutorial are floated
right. See also the :first-letter example in Pseudo Elements), but it can also be used with bigger
chunks, such as navigation columns.
Taking the HTML example below, you could apply the following CSS:

#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}

If you do not want the next element to wrap around the floating objects, you can apply the clear
property. clear: left will clear left floated elements, clear: right will clear right floated elements and
clear: both will clear both left and right floated elements. So if, for example, you wanted a footer to
your page, you could add a chunk of HTML with the id 'footer' and then add the following CSS:

#footer {
clear: both;
}

And there you have it. A footer that will appear underneath all columns, regardless of the length of
any of them.
This has been a general introduction to positioning and floating, with emphasis to the larger 'chunks'
of a page, but remember, these methods can be applied to any element within those chunks too. With
a combination of positioning, floating, margins, padding and borders, you should be able to represent
ANY web design and there is nothing that can be done in tables that can not be done with CSS.
The ONLY reason for using tables for layout at all is if you are trying to accommodate ancient
browsers. This is where CSS really shows its advantages - it results in a highly accessible page a
fraction of the weight of an equivalent table-based page.

25

Pseudo Elements
CSS pseudo-classes are used to add special effects to some selectors.
Pseudo elements suck on to selectors much like pseudo classes, taking the form
of selector:pseudoelement { property: value; }

Hover
mouse over link
p{
font-size: 3em;
float: left;
}
p:hover {
font-weight: bold;
}

26

You might also like