Академический Документы
Профессиональный Документы
Культура Документы
Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. It can
save you a lot of time and it enables you to design websites in a completely new way. CSS is a must
for anyone working with web design.
This tutorial will get you started with CSS in just a few hours. It is easy to understand and it will teach
you all the sophisticated techniques.
Learning CSS is fun. As you go along through the tutorial, remember to take enough time to properly
experiment with what you learn in each lesson.
Using CSS requires basic experience with HTML. If you are not familiar with HTML, please start
with our HTML tutorial before moving on to CSS.
<body bgcolor="#FF0000">
With CSS the same result can be achieved like this:
As you will note, the codes are more or less identical for HTML and CSS. The above example also
shows you the fundamental CSS model:
But where do you put the CSS code? This is exactly what we will go over now.
The trick is to create a link from the HTML document (default.htm) to the style sheet (style.css).
Such link can be created with one line of HTML code:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Notice how the path to our style sheet is indicated using the attribute href.
The line of code must be inserted in the header section of the HTML code i.e. between
the <head>and </head> tags. Like this:
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css"
href="style/style.css" />
</head>
<body>
...
This link tells the browser that it should use the layout from the CSS file when displaying the HTML
file.
The really smart thing is that several HTML documents can be linked to the same style sheet. In
other words, one CSS file can be used to control the layout of many HTML documents.
This technique can save you a lot of work. If you, for example, would like to change the background
color of a website with 100 pages, a style sheet can save you from having to manually change all
100 HTML documents. Using CSS, the change can be made in a few seconds just by changing one
code in the central style sheet.
Let's put what we just learned into practice.
Try it yourself
Open Notepad (or whatever text editor you use) and create two files - an HTML file and a CSS file -
with the following contents:
default.htm
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>My first stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Now place the two files in the same folder. Remember to save the files with the right extensions
(respectively ".htm" and ".css")
Open default.htm with your browser and see how the page has a red background. Congratulations!
You have made your first style sheet!
Hurry on to the next lesson where we will take a look at some of the properties in CSS.
Lesson 3: Colors and backgrounds
In this lesson you will learn how to apply colors and background colors to your websites. We will also
look at advanced methods to position and control background images. The following CSS properties
will be explained:
• color
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background
h1 {
color: #ff0000;
}
• Show example
Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the
names of the colors ("red") or rgb-values (rgb(255,0,0)).
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
• Show example
Notice that we applied two properties to <h1> by dividing them by a semicolon.
To insert the image of the butterfly as a background image for a web page, simply apply the
background-image property to <body> and specify the location of the image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
• Show example
NB: Notice how we specified the location of the image as url("butterfly.gif"). This means that the
image is located in the same folder as the style sheet. You can also refer to images in other folders
using url("../images/butterfly.gif") or even on the Internet indicating the full address of the
file: url("http://www.html.net/butterfly.gif").
For example, to avoid repetition of a background image the code should look like this:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
• Show example
For example, the code below will fix the background image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
• Show example
background-position: 2cm The image is positioned 2 cm from the left and 2 cm Show
2cm down the page example
background-position: 50% The image is centrally positioned and one fourth down Show
25% the page example
background-position: top The image is positioned in the top-right corner of the Show
right page example
The code example below positions the background image in the bottom right corner:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
• Show example
Compiling [background]
The property background is a short hand for all the background properties listed in this lesson.
With background you can compress several properties and thereby write your style sheet in a
shorter way which makes it easier to read.
For example, look at these five lines:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
Using background the same result can be achieved in just one line of code:
These two properties that are not specified would merely be set to their default values which as you
know are scroll and top left.
Summary
In this lesson, you have already learned new techniques that would not be possible using HTML.
The fun continues in the next lesson which examines the broad range of possibilities when using
CSS to describe fonts.
Lesson 4: Fonts
In this lesson you will learn about fonts and how they are applied using CSS. We will also look at
how to work around the issue that specific fonts chosen for a website can only be seen if the font is
installed on the PC used to access the website. The following CSS properties will be described:
• font-family
• font-style
• font-variant
• font-weight
• font-size
• font
When you list fonts for your web site, you naturally start with the most preferred font followed by
some alternative fonts. It is recommended to complete the list with a generic font family. That way at
least the page will be shown using a font of the same family if none of the specified fonts are
available.
An example of a prioritized list of fonts could look like this:
• Show example
Headlines marked with <h1> will be displayed using the font "Arial". If this font is not installed on the
user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from
the sans-serif family will be used to show the headlines.
Notice how the font name "Times New Roman" contains spaces and therefore is listed using
quotation marks.
• Show example
If font-variant is set to small-caps and no small-caps font is available the browser will most likely
show the text in uppercase instead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
• Show example
• Show example
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
• Show example
There is one key difference between the four units above. The units 'px' and 'pt' make the font size
absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit. Many users are
disabled, elderly or simply suffer from poor vision or a monitor of bad quality. To make your website
accessible for everybody, you should use adjustable units such as '%' or 'em'.
Below you can see an illustration of how to adjust the text size in Mozilla Firefox and Internet
Explorer. Try it yourself - neat feature, don't you think?
Compiling [font]
Using the font short hand property it is possible to cover all the different font properties in one
single property.
For example, imagine these four lines of code used to describe font-properties for <p>:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Using the short hand property, the code can be simplified:
p {
font: italic bold 30px arial, sans-serif;
}
Summary
You have now learned about some of the possibilities related to fonts. Remember that one of the
major advantages of using CSS to specify fonts is that at any given time, you can change font on an
entire website in just a few minutes. CSS saves time and makes your life easier. In the next
lesson we will look at text.
Lesson 5: Text
Formatting and adding style to text is a key issue for any web designer. In this lesson you will be
introduced to the amazing opportunities CSS gives you to add layout to text. The following properties
will be described:
• text-indent
• text-align
• text-decoration
• letter-spacing
• text-transform
p {
text-indent: 30px;
}
• Show example
td {
text-align: center;
}
p {
text-align: justify;
}
• Show example
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
• Show example
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
• Show example
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
• Show example
Summary
In the last three lessons you have already learned several CSS properties, but there is much more to
CSS. In the next lesson we will take a look at links.
Lesson 6: Links
You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts,
underline, etc). The new thing is that CSS allows you to define these properties differently depending
on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it
possible to add fancy and useful effects to your website. To control these effects you use so-called
pseudo-classes.
What is a pseudo-class?
A pseudo-class allows you to take into account different conditions or events when defining a
property for an HTML tag.
Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore
use a as a selector in CSS:
a {
color: blue;
}
A link can have different states. For example, it can be visited or not visited. You can use pseudo-
classes to assign different styles to visited and unvisited links.
a:link {
color: blue;
}
a:visited {
color: red;
}
Use a:link and a:visited for unvisited and visited links respectively. Links that are active have
the pseudo-class a:active and a:hover is when the cursor is on the link.
We will now go through each of the four pseudo-classes with examples and further explanation.
Pseudo-class: link
The pseudo-class :link is used for links leading to pages that the user has not visited.
In the code example below, unvisited links will be light blue.
a:link {
color: #6699CC;
}
• Show example
Pseudo-class: visited
The pseudo-class :visited is used for links leading to pages that the user has visited. For
example, the code below would make all visited links dark purple:
a:visited {
color: #660099;
}
• Show example
Pseudo-class: active
The pseudo-class :active is used for links that are active.
This example gives active links a yellow background color:
a:active {
background-color: #FFFF00;
}
• Show example
Pseudo-class: hover
The pseudo-class :hover is used when the mouse pointer hovers over a link.
This can be used to create interesting effects. For example, if we want our links to be orange and be
italicized when the cursor is pointed at them, our CSS should look like this:
a:hover {
color: orange;
font-style: italic;
}
• Show example
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
• Show example
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
• Show example
The two examples gives you an idea about the almost endless possibilities for combining different
properties. You can create your own effects - give it a try!
a {
text-decoration:none;
}
Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
• Show example
Summary
In this lesson you have learned about pseudo-classes, using some of the properties from the
previous lessons. This should give you an idea of some the possibilities CSS provides.
In the next lesson we will teach you how to define properties for specific elements and groups of
elements.
Lesson 7: Identification and grouping of elements
(class and id)
Sometimes you want to apply a special style to a particular element or a particular group of
elements. In this lesson, we will take a closer look at how you can use class and id to specify
properties for selected elements.
How can you color one particular headline differently than the other headlines on your website? How
can you group your links into different categories and give each category a special style? These are
just examples of questions we will answer in this lesson.
• Show example
Then we want the white wine links to be yellow, the red wine links to be red and the rest of the
existing links on the webpage to stay blue.
To achieve this, we divide the links into two categories. This is done by assigning a class to each link
using the attribute class.
Let us try to specify some classes in the example above:
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
• Show example
As shown in the example you can define the properties for elements which belong to a certain class
by using .classname in the style sheet of the document.
<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...
The above could be headings of any document split into chapters or paragraphs. It would be natural
to assign an id to each chapter as follows:
Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:
#c1-2 {
color: red;
}
• Show example
As shown in the example above you can define the properties in a specific element by using #id in
the stylesheet of the document.
Summary
In this lesson we have learned that through the use of the selectors, class and id, you are able to
specify properties for specific elements.
In the next lesson, we will take a closer look at two HTML-elements which is widely used in
connection with CSS: <span> and <div>.
Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away
emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then
added a class, which we can define in our style sheet:
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
span.benefit {
color:red;
}
• Show example
Of course you may also use id to add style to the <span>-elements. Just as long as you remember,
that you'll have to apply a unique id to each of the three <span>-elements, as you learned in the
previous lesson.
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
And in our style sheet, we can utilize the grouping in the exact same way as above:
#democrats {
background:blue;
}
#republicans {
background:red;
}
• Show example
In the examples above, we have only used <div> and <span> on very simple things such as text
and background colors. Both elements have the potential to do much more advanced things.
However this will not be introduced in this lesson. We will look into these later in this tutorial.
Summary
In lesson 7 and 8, you have learned about the selectors id and class and the
elements span anddiv.
You should now be able to group and identify, more or less, all parts of a document, which is a big
step in the direction of mastering CSS. In lesson 9 we will introduce you to the box model.
The illustration above might seem pretty theoretical to look at, so let's try to use the model in an
actual case with a headline and some text. The HTML for our example is (from the Universal
Declaration of Human Rights):
<h1>Article 1:</h1>
By adding some color and font-information the example could be presented as follows:
The example contains two elements: <h1> and <p>. The box model for the two elements can be
illustrated as follows:
Even though it may look a bit complicated, the illustration shows how each HTML-element is
surrounded by boxes. Boxes which we can adjust using CSS.
<% '
The properties which regulate the different boxes are: padding, margin and border. The next two
lessons deal with exactly these three properties:
'
'
• Lesson 10: The box model - margin & padding
'
• Lesson 11: The box model - border
'
'
When you have finished these two lessons, you will master the box model and be able to layout your
documents much finer and more precise than in the old fashion using tables in HTML.
%>
Summary
In this lesson you have been introduced to the box model. In the following three lesson we will take a
closer look at how to create and control elements in the box model.
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body {
margin: 100px 40px 10px 70px;
}
• Show example
You can set the margins in the same way on almost every element. For example, we can choose to
define margins for all of our text paragraphs marked with <p>:
body {
margin: 100px 40px 10px 70px;
}
p {
margin: 5px 50px 5px 50px;
}
• Show example
h1 {
background: yellow;
}
h2 {
background: orange;
}
• Show example
By defining padding for the headlines, you change how much filling there will be around the text in
each headline:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
• Show example
Summary
You are now on your way to master the box model in CSS. In the next lesson, we will take a closer
look at how to set borders in different colors and how to shape your elements.
The property border-color defines which color the border has. The values are the normal color-
values for example "#123456", "rgb(123,123,123)" or "yellow" .
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
ul {
border-width: thin;
border-style: solid;
border-color: orange;
}
• Show example
It is also possible to state special properties for top-, bottom-, right- or left borders. The following
example shows you how:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
• Show example
Compilation [border]
As it is also the case for many other properties, you can compile many properties into one using
border. Let us take a look at an example:
p {
border-width: 1px;
border-style: solid;
border-color: blue;
}
p {
border: 1px solid blue;
}
Summary
In this lesson you have learned about the endless options CSS gives you when using borders in
your pages.
In the next lesson, we will look at how you define the dimensions in the box model - height and
width.
div.box {
width: 200px;
border: 1px solid black;
background: orange;
}
• Show example
div.box {
height: 500px;
width: 200px;
border: 1px solid black;
background: orange;
}
• Show example
Summary
Lesson 9, 10, 11 and 12 have given you an introduction to the box model in CSS. As you can
probably see, the box model gives you many new options. You might have been using tables in
HTML to create your layouts until now, but with CSS and the box model you should now be able to
achieve elegant layouts more precisely and in accordance with the recommendations of W3C.
If we for example would like to have a text wrapping around a picture, the result would be like this:
How is it done?
The HTML code for the example above, look as follows:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
To get the picture floating to the left and the text to surround it, you only have to define the width of
the box which surrounds the picture and thereafter set the property float to left:
#picture {
float:left;
width: 100px;
}
• Show example
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to
the left by defining the property float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
• Show example
float can be set as either left, right or none.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
To avoid the text from floating up next to the picture, we can add the following to our CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
• Show example
Summary
Floats are useful in many situations and will often be used together with positioning. In the next
lesson we will take a closer look at how to position a box, either relative or absolute.
The principle behind CSS positioning is that you can position any box anywhere in the system of
coordinates.
Let's say we want to position a headline. By using the box model (see lesson 9) the headline will
appear as follows:
If we want this headline positioned 100px from the top of the document and 200px from the left of
the document, we could type the following in our CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
Absolute positioning
An element which is positioned absolute does not obtain any space in the document. This means
that it does not leave an empty space after being positioned.
To position an element absolutely, the position property is set as absolute. You can subsequently
use the properties left, right, top, and bottom to place the box.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
• Show example
Relative positioning
To position an element relatively, the property position is set as relative. The difference between
absolute and relative positioning is how the position is being calculated.
The position for an element which is relatively positioned is calculated from the original position
in the document. That means that you move the element to the right, to the left, up or down. This
way, the element still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original
position on the page. Notice how the pictures leave empty spaces at their original positions in the
document:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
}
• Show example
Summary
In the previous two lessons, you learned how to float and position elements. These two methods
give you many opportunities to construct your pages without having to use some of the old-
fashioned methods with tables and transparent images in HTML. Use CSS instead. It is more
precise, gives you more advantages, and it is also far easier to maintain.
In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5
different numbers. The important thing is the chronological sequence of the numbers (the order).
The code in the card example could look like this:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}
• Show example
The method is relatively simple but the possibilities are several. You can place images on text or text
above text etc.
Summary
Layers can be used in many situations. For example, try to use z-index to create effects in
headlines instead of creating these as graphics. For one thing, it is faster to load text and for
another, it provides a potentially better ranking in search engines.
CSS validator
To make it easier to observe the CSS standard, W3C has made a so-called validator which reads
your stylesheet and returns a status listing errors and warnings, if your CSS does not validate.
To make it easier for you to validate your stylesheet, you can do it directly from this webpage. Simply
replace the URL with the URL of your stylesheet below and click to validate. You will then be
informed by the W3C site if there are any errors found.
Top of Form
http://w w w .ht
Bottom of Form
If the validator does not find any errors; this picture will be shown, which you can put on your website
to illustrate that you are using validated coding: