Cascading Style Sheets (CSS)

Cascading Style Sheets
(CSS)
 What is CSS?
 Why CSS?
 How to write a CSS?
What is a Style Sheet?
A Style sheet is a list of rules that
determine the appearance of the elements
of a web page.
The term cascading refers to the styles on
a Cascading Style sheet
“cascade”(pass,connect) into other
WebPages, and controls the fonts, spacing,
colors, backgrounds and other display
properties of web pages.
Why CSS?
Cascading Style Sheets(CSS) are great
tools for separating HTML content from
HTML display instead of having to code
style settings in HTML for a Web page
you can create a stylesheet that meets
your needs and include that stylesheet.
A centrally located stylesheet can be
referenced from all the HTML pages for a
website to ensure the same standardized
look and feel for the entire site.
Why CSS?
If the stylesheet is centrally located,
changing a body style from one font to
another, a heading from one color to
another, changes the display for that tag
across the entire site.
Style sheets not only allow you to specify
the appearance of individual web page, but
can also be used to provide a whole web site
with a consistent overall look.
Writing your first style sheet
Suppose you want all bold text to appear in
red.
<html>
<head><Title>My First Style Sheet</Title>
<style>
B {color: red}
</style>
</head>
<body>
<b> I am bold and red </b>
</body>
</html>
In this example, there is a single rule B
{color:red} This rule has two parts.
The first part of the rule, B, is called
selector. A selector is used to select the
elements in a web page that affects
The second part of the rule is called the
declaration. A declaration contains a
property and a value.
One or more selectors are used to pick out
elements in the web page. The selector is
followed by a single space. The property
and value are separated by a colon and
wrapped in {}.
Ways to Link Style sheets to HTML
There are three ways to link Style Sheets

to HTML, categorised as follows
3) Inline Style Sheets
4) Embedded Style Sheets
5) Linked Style Sheets
Inline Style Sheet
Eg.
<html>
<head>
<title>Inline Style Sheet</title>
</head>
<body>
<b style=“color:red”>I am bold and red</b>
</body>
</html>
Embedded Style Sheets
Eg.
<html>
<head><Title>Embedded Style Sheet</Title>
<style>
B {color: red}
</style>
</head>
<body>
<b> I am bold and red </b>
</body>
</html>
Linked Style Sheets
You can place your style rules in separate
files and apply the same rules to multiple
documents.
B {color:red}
Create a new file that contains nothing but
this rule.You can save the file with any
name but the extension be given as .css,
for example: save the file as mystyle.css.
Linked Style Sheets
Eg.
<html>
<head>
<title>Linked Style Sheet</title>
<link type=“text/css” href=“mystyle.css”
rel=stylesheet title=“mystyle”>
</head>
<body>
<b>I am bold and red</b>
</body>
</html>
Linked Style Sheets
The link tag has four attributes.
The first attribute, TYPE specifies the
MIME type of the linked file. Cascading
style sheets have the MIME type
“text/css”.
The HREF attribute points to the file
containing the style sheet.
The REL attribute informs the browser
that the linked file is a stylesheet.
The TITLE attribute gives the style sheet
a title.
Adding Styles to an HTML Tag
You can apply a style rule to almost any HTML
tag.
Suppose you want all the text list to appear in
red.
In this example, the single rule OL
<HTML>
{color:red} affects the color of
<HEAD><TITLE> Future Point </TITLE>
every item listed.If you have more
<STYLE>
than one list, the items in those
<!- -
lists appear in red as well.
B {color:red}
OL {color:red} Both of the rules in this stylesheet
-- > have the same effect on the
</STYLE> elements they select. The first
</HEAD> rule makes everything contained in
<BODY> <B> tag red; second rule makes
<B> I am bold and red </B> everything contained in every
<OL> ordered list red. To save typing,
<LI>I am red you can combine two rules into one:
<LI>So am I
</OL> B, OL {color: red}
</BODY>
</HTML>
Adding Styles to a class of HTML tags
Suppose you need to apply a rule to certain paragraphs in a web page, but not to all of them. For
e.g., you may want the first paragraph to appear in 24-point type and the second paragraph to
appear in 14-point type. To do this with style sheets, you need a way to distinguish between
different instances of the <P> tag.
Using a special attribute in HTML we can achieve this. Every HTML tag has a CLASS attribute.
The class attribute is used to divide tags into different classes.
<HTML>
<HEAD>
<TITLE> Class Example </TITLE>
<STYLE> The text contained within the <P> tags appears
<! – with different font sizes. The two fonts are
P.TheFirstClass {font-size: 24pt} distinguished by their respective CLASS attributes.
P.TheSecondClass {font-size: 14pt}
-- >
</STYLE>
</HEAD>
<BODY>
<P CLASS=“TheFirstClass”>
I am the first paragraph and I am formatted with a 24
point font.</P>
<P CLASS=“TheSecondClass”>
I am the Second paragraph and I am formatted with a 14
point font.</P>
</BODY>
</HTML>
Adding Styles to Classes
Till now we have seen, style sheet rules have been associated only with particular types of
HTML tags.
But you also can associate a rule with a class that is not associated with any particular tag.
<HTML>
<HEAD>
<TITLE> Class Example </TITLE>
Both the <B> tag and the <P> tag are
<STYLE> associated with the same class. The text
<! – contained in both the <B> tag and the <P>
.FreeClass {font-size: 24pt} tag is formatted with a 24-point font.
-- > The rule is not associated with any type
</STYLE> of HTML tag. Instead the rule is
</HEAD> associated with the class FreeClass.
<BODY> Note: Do not forget to add the initial
<B CLASS=“FreeClass”> period when specifying the class selector
I am bold and I am formatted in the rule. If you forget the period, the
with a 24 point font. browser thinks you are attempting to
</B> select an HTML tag for the rule rather
than a class.
<P CLASS=“FreeClass”>
I am in the paragraph and I am
formatted with a 24 point font.
</P>
</BODY>
</HTML>
Adding styles to HTML tags Depending on Context
Suppose you want bold text in a list to appear in the Courier typeface. However you don’t
want text to appear in Courier outside the list or when the text is not bold. A number of ways
you can do this. Using style sheets, you could create a special class and associate with only <B>
tags that appear in lists. In another way, we can achieve the same effect, by specifying that
a rule should be applied only in certain contexts. For e.g., you can define a rule that effects
text only when the text appears in bold and a list, but not in any other contexts.
<HTML>
<HEAD>
<TITLE>Context Example</TITLE>
The selector contains two HTML tags, but
<STYLE>
the tags are not separated by commas. The
<! –
selector is applied only when a <B> tag is
UL B {font-family: Courier}
contained within a <UL> tag. Text contained
-- >
within the <B> tag but not appearing in a list
</STYLE>
isn’t governed by this rule.
</HEAD>
<BODY>
<B> I am bold but not in the courier typeface
</B>
<UL>
<LI> I am plain, but I am <B>bold and use
Courier!</B>
<LI> Yes, but I am <B>bold and use Courier</B>
as well!
</UL>
</BODY>
</HTML>
Examples
BODY {font:10pt Arial,verdana;
background: url(test.gif);
margin-left: 0.5in;
margin-right: 0.5in }
P {font-family: verdana,arial;
font-size: 12pt;font-weight: bold; font-
style: italic ;color:green}
P {font: bold italic 12pt verdana,arial}

Cascading Style Sheets (CSS)

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cascading Style Sheets (CSS)

Transféré par

Droits d'auteur :

Formats disponibles

Cascading Style Sheets

There are three ways to link Style Sheets

Vous aimerez peut-être aussi