Cascading Style Sheet (CSS)

OUTLINES
• What is CSS?
• Syntax
• Comments
• Example
• Types of CSS
• External style sheet
• Internal style sheet
• Inline style sheet

WHAT IS CSS?
• CSS stands for Cascading Style Sheets
• Markup language used in the web document for
presentation purpose.
• Various elements like text, font and color are used in
CSS for presentation.
• Can be used to bring styles in the web documents.
• By combining with HTML document, flexibility of
content is achieved.

SYNTAX
• A CSS rule has two main parts: a Selector and one or
more Declarations:
• The selector is the HTML element you want to style.
• Each declaration consists of a property and a value.
• The property is the style for the attribute you want to
change.
• Each property has a value.

COMMENTS
• A CSS comment begins with "/*", and ends with
"*/", like this:
• /*This is a comment*/
• Eg: p
{
text-align: center;
/*This text is center align*/
color: black;
font-family: arial;
}

EXAMPLE
• CSS declarations always end with a semicolon, and
declaration groups are surrounded by curly brackets:
p {color: red; text-align: center;}
• To make the CSS more readable, you can put one
declaration on each line, like this:
p
{
color: red;
text-align: center;
}

<html>
<head>
<style type=“text/css”>
p
{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS</p>
</body>
</html>

TYPES OF CSS
• There are 3 types of cascading style sheet:
1) External style sheet.
2) Internal style sheet.
3) Inline style.

EXTERNAL STYLE SHEET
• Ideal when applied to Many Pages.
<head>
<link rel=“stylesheet” type=“text/css” href="mystyle.css"/>
</head>
• An external style sheet can be written in any text editor.
• Your style sheet should be saved with a .css extension.
• Eg:
hr {color: sienna;}
p {margin-left:20px;}
body {background-image: url("images/back40.gif");}

INTERNAL STYLE SHEET
• It should be used when a Single Document has a unique
style.
• You can define internal styles in the head section of an
HTML page, by using the <style> tag, like this:
• Eg:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left:20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

INLINE STYLE SHEET
• An inline style loses many of the advantages of a
style sheet.
• To use inline styles, add the style attribute to the
relevant tag.
• The style attribute can contain any CSS property.
• E.g.
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>

Cascading Style Sheet (CSS)

More Related Content

Cascading Style Sheet (CSS)