Sie sind auf Seite 1von 6

Hello,

Thank you for choseing Dummies 4 Ning.

In this tutorial you will learn the basic's of CSS.

Before you begin the CSS Tutorial we suggest that you check to see you meet the

following recommendations:

You have used HTML in the past


You know the basic HTML tags and vocabulary.

Cascading Style Sheets, or CSS as it is commonly known, is a vital ingredient of

today’s web site designs. This is the first in a series of articles attempting to
cover the

very basics of CSS, in a manner as simple as possible so that the non technical

people can get an idea of what it is all about.

Why are they called Style Sheets?


First of all, let’s try to find out the meaning behind the phrase style sheet. In
the

context of web site design, style refers to the look and feel or appearance of a
given

site or web page. In this regard, style means things such as the fonts used, their
sizes

and colors, the various background colors and images etc. Not only fonts and
colors,

even aspects such as border formats and thickness etc can also be defined using

CSS. For example, the double-bordered box in the header section of a Minima

template is applied using style sheets.

The formal technical term used to refer to the look and feel of a web page is

presentation. In other words, the style aspects are more formally refers to as the

presentation aspects.

The name style sheet, therefore, comes from the fact that a style sheet is a
collection

of some rules or instructions given to a web browser on how to present a web page
to

a reader of that page. If we think of the browser program as an artist, the style
sheet is

like the color palette and the brush set of that artist.
Why Cascading?
The CSS rules can be defined at various levels. In fact there are four levels at
which

CSS rules are defined. The first and the least priority level is the browser’s
default set

of values. Then comes the external style sheets followed by internal (or embedded)

style sheet in the third place. Fourth and the highest priority level is called
the inline

style definition. (Here we will not try to go in to the details of these levels)

For every web page, all of these 4 levels may not be present. But, every time a
web

page is loaded in a browser window, the available levels of styles sheets cascade
to a

single virtual style sheet with the high priority rules taking precedence over the
low

priority ones. For example, if the same rule is defined at inline and external
levels, the

inline rule prevails over the other.

Content vs Presentation
CSS is used to define how a web page should look like. As we already know, this

aspect is technically called the presentation of a document. The other main aspect
of

a document is its content. Content is the actual body of information carried by a

document. The aspects of content and presentation are not limited to web pages;
they

are common to any document.

Let’s spend a little bit more time trying to understand the difference between
content

and presentation. Say you are typing a document in MS Word. You will start off
with a

title and perhaps a sub title. And then you keep on entering your ideas and soon
you’

ve filled a couple of pages. Now you see some structure emerging in your ideas and

therefore you put in some headings and sub headings. Then you apply various styles

such as Heading 1 and Heading 2. You make certain text bold, use different fonts,

colors and so on.

Once you are done you have a document with some content formatted nicely as well.

If you now do a Select All (Ctrl + A), open Notepad and paste what you copied, you

will be left out with the content of your document. In other words, Notepad will
strip off

all the presentation aspects from your document. So what you have in the Notepad
is

the content and the Word document has the same content with some presentation

aspects applied.

This example should help you to understand the difference between these two

aspects. (However, in a strict technical sense, the fact that a certain piece of
text is

Heading 1 and another portion is Heading 2 is also part of the content. What
belongs

to the presentation is how Heading 1 and Heading 2 look. i.e. the fonts used, its
size

and color etc. When we copy to Notepad we lose this structural information as
well)

Why CSS?
Mixing the content and the presentation of a document is considered a bad practice
in

a technical sense. HTML had this technical problem. Though HTML was originally

designed to describe content that can be linked to form a web of documents, due to

the immense popularity it received, it developed certain markup to define


presentation

aspects as well. The font and b (bold) elements are examples.


With CSS we can correct this problem. In other words, CSS helps us to separate the

content from presentation. That way, we can use HTML to define the pure content of
a

web page and then style it (or define its presentation) using CSS. Now this is the

reason why CSS is so critical in today’s web site development.

To understand how this works, let’s consider an example. Consider a first level

heading in a web page defined using an h1 element.

We will write a simple HTML document with a plain h1 element and two more h1

elements with the same content, but styled using two different CSS rules named H1A

and H1B. The HTML part of that page will be as follows.

<body>
<h1>This is a Level 1 heading</h1>

<h1 class="H1A">This is a Level 1 heading</h1>

<h1 class="H1B">This is a Level 1 heading</h1>


</body>

The two styles H1A and H1B are defined as follows. As you can see, these two
styles

define different fonts, sizes and colors which can be applied to the h1 element.

.H1A {
font-family:Verdana;
font-size:14pt;
color:red;
}

.H1B {
font-family:Monotype Corsiva;
font-size:36pt;
color:blue;
}

We applied the styles H1A and H1B to the h1 element using an attribute called
class.

This is where the CSS selectors come in to play.

What is a Selector?
A selector identifies an HTML element in a web page. In other words, a selector

selects an HTML element and applies the style rules defined in it, to that
selected

element.

Types of Selectors
There are many types of selectors in CSS. Out of them, the following three are
very

important.

Type (Element) Selectors


Class Selectors
ID Selectors
Type or Element Selectors identify basic HTML elements. p (paragraph), a (anchor),

body, table are all examples for basic HTML elements. An Element Selector is

defined simply by using the element's name as the name of the CSS rule. For

example, the following CSS rule selects the entire body element of an HTML page

and changes its background color to black.

body {
background-color:black;
}

A Class Selector is applied to one or more HTML elements which have their class

attribute set equal to the name of the Class Selector. A Class Selector is defined

using any name with a dot ( . ) in front. There should not be a space between the
dot

and the name of the CSS selector.

A Class Selector called “myclass” is shown below.

.myclass {
color: red;
font-size:10pt;
}

To apply the above CSS rule, we have to add the required HTML element to that
class

using the class attribute.

<p class=”myclass”>
This paragraphs text will be in red color size 10 fonts.
</p>

An ID Selector is applied to one and only one HTML element in a web page that has

an ID equal to the name of that selector. The name of an ID selector is preceded


by a
hash ( # ) character.

#outer-wrapper is an example for an ID Selector with the name outer-wrapper and


the

following div element has its ID set to outer-wrapper so that the #outer-wrapper
CSS

rule gets applied.

<div id=”outer-wrapper”>
</div>

Note that when Class and ID selectors are applied to HTML elements, the values

given for the class and id attributes include only the name of the selector. The
dot or

the hash characters are not used for the attribute value.

The Class and ID selectors are functionally similar. They differ due to the fact
that a

Class Selector can be applied to a group of HTML elements whereas an ID Selector

is limited to a single element.

There is a lot more about CSS selectors. Pseudo selectors, descendant selectors,

child selectors and specific class and ID selectors are other important concepts.

Provided by Dustin
Have a question?
E-Mail: Dustin.Snider@yahoo.com
With Subject Dummies 4 Ning Tutorial

Das könnte Ihnen auch gefallen