Scribd
Upload
18 views

Internet Programming Internet Programming: (Cascading Style Sheets)

This document discusses Cascading Style Sheets (CSS), which define how HTML elements are displayed. CSS allows developers to control the style and layout of multiple web pages by changing a single CSS document. CSS syntax uses selectors, properties, and values to define styles. External style sheets can be used to apply styles across many pages, while internal and inline styles are used for individual pages or elements.

Uploaded by

MMS20j
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Internet Programming Internet Programming: (Cascading Style Sheets)

This document discusses Cascading Style Sheets (CSS), which define how HTML elements are displayed. CSS allows developers to control the style and layout of multiple web pages by changing a single CSS document. CSS syntax uses selectors, properties, and values to define styles. External style sheets can be used to apply styles across many pages, while internal and inline styles are used for individual pages or elements.

Uploaded by

MMS20j
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

12/1/2009

Internet Programming

Hassan Khan

CSS (Cascading Style Sheets )

z CSS stands for Cascading Style Sheets


z S l d
Styles define
fi how
h to display
di l HTML elements
l
z Styles are normally stored in Style Sheets
z Styles were added to HTML 4.0 to solve a problem
z External Style Sheets can save you a lot of work
z External Style Sheets are stored in CSS files
z Multiple style definitions will cascade into one

1
12/1/2009

Save a Lot of Work


z Styles sheets define HOW HTML elements are to be
displayed just like the font tag and the color attribute in
displayed,
HTML.
z Styles are normally saved in external .css files.
z External style sheets enable you to change the appearance
and layout of all the pages in your Web, just by editing one
single CSS document!
z CSS is a breakthrough in Web design because it allows
d
developers
l tto control
t l th
the style
t l and
d llayoutt off multiple
lti l WWeb
b
pages all at once.
z As a Web developer you can define a style for each HTML
element and apply it to as many Web pages as you want.
To make a global change, simply change the style, and all
elements in the Web are updated automatically.

CSS Syntax

The CSS syntax is made up of three parts: a selector, a


property
p p y and a value:
selector {property: value}

• The selector is normally the HTML tag you wish to define


define.
• The property is the attribute you wish to change.
• Each property can take a value.
The property and value are separated by a colon, and
surrounded by curly braces:

2
12/1/2009

Example
z selector {property: value}
body {color: black}
p {font-family: "sans serif"}

z p {text-align:center; color:red}

zp { text-align: center;
color: black;;
font-family: arial
}
To make the style definitions more readable, you
can describe one property on each line.

Grouping

You can group selectors. Separate each selector with a


comma. In the example below we have grouped all the
header elements. All header elements will be displayed
in green text color:

h1,h2,h3,h4,h5,h6 { color: green }

3
12/1/2009

Class Selector
z With the class selector you can define different styles for
the same type of HTML element
element.
p.right {text-align: right}
p.center {text-align: center}
HTML
<p class="right">This paragraph will be right-aligned. </p>
<p
p class="center">This p
paragraph
g p will be center-aligned.</p>
g p

Class Selector
z You can also omit the tag name in the selector to define
a style that will be used by all HTML elements that have
a certain class.
.center {text-align: center}
All HTML elements with class="center" will be center-
aligned.

NOTE: Do not start a class name with a number! It will not


work in Mozilla/Firefox.

4
12/1/2009

Styles to Elements with Particular


Attributes

z iinput[type="text"]
[ " "] {background-color:
{b k d l blue}
bl }
The style rule below will match all input elements that
have a type attribute with a value of "text“.

The id Selector
You can also define styles for HTML elements with the id
selector The id selector is defined as a #
selector. #.

ƒ #green {color: green}


The style rule below will match the element that has an
id attribute with a value of "green”.

ƒ p#para1 { text-align: center; color: red }


The style rule below will match the p element that has an
id with a value of "para1"

5
12/1/2009

CSS Comments
z Comments are used to explain your code.

p { text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

CSS How To?


When a browser reads a style sheet, it will format the
document according to itit.

z External Style Sheet


z Internal Style Sheet
z Inline Styles
z Multiple Style Sheets

6
12/1/2009

External Style Sheet


• An external style sheet is ideal when the style is applied to
many pages
pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• Each page must link to the style sheet using the <link> tag. The
<link> tag goes inside the head section.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Example
HTML
<html>
<head>
<title>Inline style sheets</title>
<link href="first
href= first.css
css" rel=
rel="stylesheet"></link>
stylesheet ></link>
</head>
<body>
<p>This is sample paragraph</p>
<h1>Sample heading</h1>
<i>this is sample text</i>
</body>
</html>
CSS
h1{ background-color:lightgreen}
body{ background-image:url("Blue hills.jpg");
background-repeat:none;
background-position:center;
background-attachment:fixed}

7
12/1/2009

Internal Style Sheet


z An internal style sheet should be used when a single
document has a unique style
style.
<head><style type="text/css">
p {margin-left: 20px}
body {background-image:url("images/back40.gif")}
</style> </head>

Note: old browser that does not support styles, will ignore the <style>
tag, but the content of the <style> tag will be displayed on the page.

Inline Styles
z Use this method sparingly, such as when a style is to be
applied to a single occurrence of an element
element.

<p style="color: sienna; margin-left: 20px">


This is a paragraph
</p>

You might also like