Introduction - Free CSS
Tutorial
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.
Which software do I need?
Please
avoid using software such as FrontPage, DreamWeaver or Word with this tutorial.
Advanced software will not help you learn CSS. Instead, it will limit you and
slow down your learning curve significantly.
All
you need is a free and simple text editor.
For
example, Microsoft Windows comes with a program called Notepad. It is usually
located in Accessories in the start menu under Programs. Alternatively, you can
use a similar text editor e.g. Pico for Linux or Simple Text for Macintosh.
A
simple text editor is ideal for learning HTML and CSS because it doesn't affect
or change the codes you type. That way, your successes and errors can only be
attributed to yourself - not the software.
You
can use any browser with this tutorial. We encourage you to always keep your
browser updated and use the latest version.
A
browser and a simple text editor is all you need.
Let's
get started!
Lesson 1: What is CSS?
Maybe
you already heard about CSS without really knowing what it is. In this lesson
you will learn more about what CSS is and what it can do for you.
CSS
is an acronym for Cascading Style Sheets.
What can I do with CSS?
CSS
is a style language that defines layout of HTML documents. For example, CSS
covers fonts, colours, margins, lines, height, width, background images,
advanced positions and many other things. Just wait and see!
HTML
can be (mis-)used to add layout to websites. But CSS offers more options and is
more accurate and sophisticated. CSS is supported by all browsers today.
After
only a few lessons of this tutorial you will be able to make your own style
sheets using CSS to give your website a new great look.
What is the difference between CSS and HTML?
HTML
is used to structure content. CSS is used for formatting structured content.
Okay,
it sounds a bit technical and confusing. But please continue reading. It will
all make sense to you soon.
Back
in the good old days when Madonna was a virgin and a guy called Tim Berners Lee
invented the World Wide Web, the language HTML was only used to add structure
to text. An author could mark his text by stating "this is a
headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.
As
the Web gained popularity, designers started looking for possibilities to add
layout to online documents. To meet this demand, the browser producers (at that
time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by
defining layout - and not structure.
This
also led to a situation where original structure tags such as <table>
were increasingly being misused to layout pages instead of adding structure to
text. Many new layout tags such as <blink> were only supported by one
type of browser. "You need browser X to view this page" became a
common disclaimer on web sites.
CSS
was invented to remedy this situation by providing web designers with
sophisticated layout opportunities supported by all browsers. At the same time,
separation of the presentation style of documents from the content of
documents, makes site maintenance a lot easier.
Which benefits will CSS give me?
CSS
was a revolution in the world of web design. The concrete benefits of CSS
include:
- control layout of many documents from one single style sheet;
- more precise control of layout;
- apply different layout to different media-types (screen, print, etc.);
- numerous advanced and sophisticated techniques.
Lesson 2: How does CSS work?
In this lesson you will learn how to make your first style sheet.
You will get to know about the basic CSS model and which codes are necessary to
use CSS in an HTML document.
Many of the properties used in Cascading Style Sheets (CSS) are
similar to those of HTML. Thus, if you are used to use HTML for layout, you
will most likely recognize many of the codes. Let us look at a concrete
example.
The basic CSS syntax
Let's say we want a nice red color as the background of a webpage:
Using HTML we could have done it like this:
<body bgcolor="#FF0000">
With CSS the same result can be achieved like
this:
body {background-color: #FF0000;}
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.
Applying CSS to an HTML document
There are three ways you can apply CSS to an HTML document. These
methods are all outlined below. We recommend that you focus on the third method
i.e. external.
Method 1: In-line (the attribute style)
One way to apply CSS to HTML is by using the HTML attribute
style. Building on the above example
with the red background color, it can be applied like this: <html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>This is a red page</p>
</body>
</html>
Method 2: Internal (the tag style)
Another way is to include the CSS codes using the HTML tag
<style>. For example like this: <html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>This is a red page</p>
</body>
</html>
Method 3: External (link to a style sheet)
The recommended method is to link to a so-called external style
sheet. Throughout this tutorial we will use this method in all our examples.
An external style sheet is simply a text file with the extension .css.
Like any other file, you can place the style sheet on your web server or hard
disk.
For example, let's say that your style sheet is named style.css and is located in a folder named style.
The situation can be illustrated like this:
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.
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!
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
Foreground color: the 'color' property
The color property describes the foreground color of an
element.
For
example, imagine that we want all headlines in a document to be dark red. The
headlines are all marked with the HTML element <h1>. The code below sets the color of <h1> elements to red.
h1 {
color: #ff0000;
}
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)).
The 'background-color' property
The background-color property describes the background color of
elements.
The
element <body> contains all the content
of an HTML document. Thus, to change the background color of an entire page,
the background-color property should be applied to the <body> element.
You
can also apply background colors to other elements including headlines and
text. In the example below, different background colors are applied to <body> and <h1> elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Notice
that we applied two properties to <h1> by dividing them by a semicolon.
Background images [background-image]
The
CSS property background-image is used to insert a
background image.
As
an example of a background image, we use the butterfly below. You can download
the image so you can use it on your own computer (right click the image and
choose "save image as"), or you can use another image as you see fit.
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;
}
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").
Repeat background image [background-repeat]
In
the example above, did you notice that by default the butterfly was repeated
both horizontally and vertically to cover the entire screen? The property background-repeat controls this behaviour.
The
table below outlines the four different values for background-repeat.
|
Value
|
Description
|
Example
|
|
background-repeat: repeat-x
|
The image is repeated
horizontally
|
|
|
background-repeat: repeat-y
|
The image is repeated
vertically
|
|
|
background-repeat: repeat
|
The image is repeated
both horizontally and vertically
|
|
|
background-repeat: no-repeat
|
The image is not
repeated
|
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;
}
Lock background image [background-attachment]
The
property background-attachment specifies whether a background picture is fixed or scrolls along
with the containing element.
A
fixed background image will not move with the text when a reader is scrolling
the page, whereas an unlocked background image will scroll along with the text
of the web page.
The
table below outlines the two different values for background-attachment. Click on the examples to see the difference
between scroll and fixed.
|
Value
|
Description
|
Example
|
|
Background-attachment: scroll
|
The image scrolls with
the page - unlocked
|
|
|
Background-attachment: fixed
|
The image is locked
|
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;
}
Place background image [background-position]
By
default, a background image will be positioned in the top left corner of the
screen. The property background-position allows you to change this default and position the background
image anywhere you like on the screen.
There
are numerous ways to set the values of background-position. However, all of them are formatted as a set of
coordinates. For example, the value '100px 200px' positions the background
image 100px from the left side and 200px from the top of the browser window.
The
coordinates can be indicated as percentages of the browser window, fixed units
(pixels, centimetres, etc.) or you can use the words top, bottom, center, left
and right. The model below illustrates the system:
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;
}
No comments:
Post a Comment
Thanks for comment me