You are on page 1of 19

CASCADING STYLE SHEETS

ORIENTATION

The Benefits of CSS


Better type and layout controls
Less work
Potentially smaller documents and faster
downloads.
More accessible sites
Reliable browser support

How Style Sheets Work


1. Start with a document that has been marked up in HTML or
XHTML.
2. Write style rules for how youd like certain elements to look.
3. Attach the style rules to the document

Writing the rules


A style sheet is made up of one or more style instructions
(called rules) that describe how an element or group of
elements should be displayed.
Each rule selects an element and declares how it should look
In CSS terminology, the two main sections of a rule are the
selector that identifies the element or elements to be affected,
and the declaration that provides the rendering instructions
The declaration, in turn, is made up of a property and its value
Example
h1 {color: green; }

Selectors
most basic type of selector is called an element type selector.
Declarations
The declaration is made up of a property/value pair.
There can be more than one declaration in a single rule
Each declaration must end with a semicolon
for example, the rule for p element above has both the font-size and
font-family properties
p{
font-size: small;
font-family: sans-serif;
}

Values are dependent on the property. Some properties take length


measurements, some take color values, others have a predefined list of
keywords.
When using a property, it is important to know which values it accepts;
however, in many cases, simple common sense will serve you well

Attaching the styles to the


document

There are three ways that style information can be applied to an


(X)HTML document
1. External style sheets
2. Embedded style sheets
3. Inline styles

External style sheets


An external style sheet is a separate,
text-only document that contains a
number of style rules. It must be
named with the .css suffix.

Embedded style sheets


exercise. It is placed in a document
using the style element and its
rules apply only to that document.
The style element must be placed
in the head of the document and
it must contain a type
attribute that identifies the content
of the style element as text/css
(currently the only available
value)

Inline styles
You can apply properties and values to a single element using
the style attribute in the element itself, as shown here:
Example <h1 style="color: red">Introduction</h1>

<html>
<head>
<title>Required document title
here</title>
<style type="text/css">
/* style rules go here */
</style>
</head>
</html>

Inheritance
Document structure

When you write a font-related style rule using the p element as a selector,
the rule applies to all of the paragraphs in the document as well as the
inline text elements they contain
Img element is excluded because font-related properties do not apply to
images.
properties related to the styling of textfont size, color,
style, etc.are passed down
Properties such as borders,margins, backgrounds, and so
on that affect the boxed area around the element tend not
to be passed down

Conflicting styles: the


cascade
what should the browser do if a documents imported style
sheet says that h1 elements should be red, but its embedded
style sheet has a rule that makes h1s purple?
style information is passed down until it is overridden by a
style command with more weight.
browsers internal style sheet, external ,embedded , Inline
the closer the style sheet is to the content, the more weight it is
given
To prevent a specific rule from being overridden, you can
assign it importance with the !important indicator

When two rules in a single style sheet conflict, the type of


selector is used to determine the winner. The more specific
the selector, the more weight it is given to override
conflicting declarations.
Assigning Importance
If you want a rule not to be overridden by a
subsequent conflicting rule, include the !
important indicator just after the property
value and before the semicolon for that rule.
For example, to make paragraph text blue
always, use the following rule:
p {color: blue !important;}

The only way an !important rule may be overridden is by a


conflicting rule in a reader (user) style sheet that has also been
marked !important
Rule order
Finally, if there are conflicts within style rules of
identical weight, whichever one comes last in the list
wins. Take these three rules,
for example:
<style type="text/css">
p { color: red; }
p { color: blue; }
p { color: green; }
</style>