Beruflich Dokumente
Kultur Dokumente
Before you begin the CSS Tutorial we suggest that you check to see you meet the
following recommendations:
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
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
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
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
document. The aspects of content and presentation are not limited to web pages;
they
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,
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
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
To understand how this works, let’s consider an example. Consider a first level
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
<body>
<h1>This is a Level 1 heading</h1>
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.
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.
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
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
.myclass {
color: red;
font-size:10pt;
}
To apply the above CSS rule, we have to add the required HTML element to that
class
<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
following div element has its ID set to outer-wrapper so that the #outer-wrapper
CSS
<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
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