Cascading Style Sheet

Introduction
 CSS stands for Cascading Style Sheets and is a simple
styling language which allows attaching style to HTML
elements.
 Style Sheets are templates, very similar to templates in
desktop publishing applications, containing a
collection of rules declared to various selectors
(elements).
 Cascade is a method of defining the weight
(importance) of individual styling rules thus allowing
conflicting rules to be sorted out should such rules
apply to the same selector.

Contd..
 Advantages:
 Greater typography and page layout controls
 Easier site maintenance
 The style sheet information can be stored separate from your
HTML document, and shared among many HTML files.
Change one style sheet file, and the appearance of the entire
site is updated.
 Disadvantages
 Browser compatibility must be the most common difficulty.

CSS Selector
 CSS selectors are the heart and soul of CSS.
 They define which HTML elements you are going to be
manipulating with CSS code.
 The selector name creates a direct relationship with the
HTML tag you want to edit.
 If you wanted to change the way a paragraph tag behaved,
the CSS code would look like:
 p { PROPERTY: VALUE }
 The above example is a template that you can use whenever
you are manipulating the paragraph HTML element.

Tags (Selector)
 <BODY>
 <IMG>
 <H1>… <H6>
 <FONT>
 <P>
 <FORM>
 <HR>

body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
Selector Declaration Block
Attribute Name
Value
CSS Rule

Different Style of CSS
 Internal Style Sheet (inside the <HEAD> tag)
 External Style Sheet
 Inline Style (inside an HTML element)

Internal CSS Code
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
Save: “Filename.html”

External CSS
 External CSS is a file that contains only CSS code
and is saved with a ".css" file extension.
 This CSS file is then referenced in your HTML using
the <link> instead of <style>.

External CSS Code
body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Save: “test.css”

HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background
color of this page is gray because we changed it with
CSS! </p>
</body>
</html>

Advantages of External CSS
 It keeps your website design and content separate.
 It's much easier to reuse your CSS code if you have it
in a separate file. Instead of typing the same CSS
code on every web page you have, simply have many
pages refer to a single CSS file with the "link" tag.
 You can make drastic changes to your web pages
with just a few changes in a single CSS file.

CSS Classes
<html>
<head>
<style>
p.first { background-color: gray; }
p.second { background-color: red; }
p.third { background: purple; color: white;}
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the p.first paragraph</p>
<p class="second">This is the p.second paragraph</p>
<p class="third">This is the p.third paragraph</p>
</body>
</html>

CSS Background
 CSS background properties are used to define the
background effects of an element.
 CSS properties used for background effects:
 background-color
 background-image
 background-repeat
 background-position

CSS Background Properties
Property Description
background
Sets all the background properties in one
declaration
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

 body {background-color:”red”;}
 body {background-image:url('paper.gif');}
 body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
 (Repeat, no-repeat, repeat-x and repeat-y)
 ol {background-position: top center; }

CSS Text
color Sets the color of text
direction Specifies the text direction/writing direction
text-align Specifies the horizontal alignment of text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text

Example
 body {color:blue;}
 h1 {text-align:center;} (right,left and justify)
 a {text-decoration:none;} (overline, line-through,
underline and blink)
 p {text-transform:uppercase;} (lowercase and
capitalize)
 p {text-indent:50px;}

CSS Font
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text

Example
 p{font-family:"Times New Roman", Times, serif;}
 p {font-style:normal;}(italic)
 p {font-size:14px;}

Cascading Style Sheet

More Related Content

What's hot (20)

Similar to Cascading Style Sheet (20)

More from Meenakshi Paul (20)

Recently uploaded (20)

Cascading Style Sheet