What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
What can I do with CSS?
• CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours,
margins, lines, height, width, background images, advanced positions and many other things. Just wait and
see!
• HTML can be used to add layout to websites. But CSS offers more options and is more accurate and
sophisticated. CSS is supported by all browsers today.
• After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your
website a new great look.
How to use CSS?
A CSS rule-set consists of a selector and a declaration block:
1. The selector points to the HTML element you want to style.
2. The declaration block contains one or more declarations separated by semicolons.
3. Each declaration includes a CSS property name and a value, separated by a colon.
4. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS can be used
1) Internal CSS - Inside HTML file by using <STYLE> </STYLE> tag and
Syntax:
Syntax to use Internal CSS
<STYLE type=”text/css”>
Tagname {
Property: value;
Property: value
}
</STYLE>
2) External CSS - Creating external CSS file by using saving with .CSS extension
Syntax:
In CSS file:
Tagname {
Property: value;
Property: value
}
In HTML file
<link rel="stylesheet" type="text/css" href="mystyle.css">
3) Inline CSS – using STYLE attribute inside tag.
Syntax:
<H1 STYLE= “color : red ; font-family : arial ”>
CSS Text Properties
Text-align : left | right | center | justify
Text-decoration : none | underline | overline | line-through|
Text-transform : uppercase | lowercase | capitalize
CSS Font Properties
Font-family : fontname
Font-style : normal | italic | oblique
Font-weight : normal | bold
Font-size : x pt
Font-variant : normal | small-caps
CSS Display Property
Display : inline | block | none
CSS Background Property
Background-color : colorname
Background-image : url(path) e.g. → Background-image : url(“c:\\abc\\mypic.jpg”)
Background-repeat : repeat-x | repeat-y |no-repeat
Background-position : left | right | center top | center | bottom
Background-attachment : fixed | none
CSS Border Property
Border-color : colorname
Border : n px (n is any integer value)
Border-style : none | dotted | solid |dashed | double | groove | ridge | inset | outset
Border-radius : n px (n is any integer value)
Border-width : n px (n is any integer value)
CSS Margin Property (for outside space of content)
Margin-left : n px (n is any integer value)
Margin-right : n px (n is any integer value)
Margin-top : n px (n is any integer value)
Margin-bottom : n px (n is any integer value)
CSS Padding Property (for providing space between content and border)
Padding-left : n px (n is any integer value)
Padding -right : n px (n is any integer value)
Padding -top : n px (n is any integer value)
Padding -bottom : n px (n is any integer value)
CSS List Property
List-style-type : circle | square | upper-roman | lower-roman |upper-alpha | lower-alpha
List-style-position : inside | outside
List-style-image : url(path) e.g. → Background-ima List-style-image: url(“c:\\abc\mypic.jpg”)
