Scribd
Upload
72 views

Style Sheet (CSS)

The document describes Cascading Style Sheets (CSS) which are used to style and lay out web documents. CSS allows you to specify various style properties for HTML tags including font, color, size, and more. There are three ways to apply CSS styles: external style sheets, internal style sheets, and inline styles. CSS offers advantages like easier maintenance, reuse of styles across pages, and faster loading times compared to HTML alone. CSS syntax uses selectors to target elements, properties to set attributes, and values to specify property settings. The document provides examples of common CSS properties for backgrounds, fonts, text, and other styles.

Uploaded by

Sudeshna Bhattacharyya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
72 views

Style Sheet (CSS)

The document describes Cascading Style Sheets (CSS) which are used to style and lay out web documents. CSS allows you to specify various style properties for HTML tags including font, color, size, and more. There are three ways to apply CSS styles: external style sheets, internal style sheets, and inline styles. CSS offers advantages like easier maintenance, reuse of styles across pages, and faster loading times compared to HTML alone. CSS syntax uses selectors to target elements, properties to set attributes, and values to specify property settings. The document provides examples of common CSS properties for backgrounds, fonts, text, and other styles.

Uploaded by

Sudeshna Bhattacharyya
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 29

STYLE SHEET

By
STYLE SHEET
Cascading Style Sheets (CSS) describe how documents are presented on screens.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style properties
for a given HTML element. Each property has a name and a value, separated by a colon
(:). Each property declaration is separated by a semi-colon (;). You can use CSS in three
ways in your HTML document −
• External Style Sheet − Define style sheet rules in a separate .css file and then include
that file in your HTML document using HTML <link> tag.
• Internal Style Sheet − Define style sheet rules in header section of the HTML
document using <style> tag.
• Inline Style Sheet − Define style sheet rules directly along-with the HTML elements
using style attribute.

Advantages of CSS
CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages.
Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So, less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS have a much wider array of attributes than HTML,
so you can give a far better look to your HTML page in comparison to HTML
attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device.
Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS.

CSS – Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied.
Property − A property is a type of attribute of HTML tag.
Value − Values are assigned to properties.

You can put CSS Style Rule Syntax as follows − selector { property: value }
Ex. table{ border :1px solid #C00; }

1
The Type Selectors
h1 {
color: #36CFFF;
}

The Universal Selectors


*{
color: #000000;
}

The Descendant Selectors: want to apply a style rule to a particular element only when
it lies inside a particular element. style rule will apply to <em> element only when it lies
inside <ul> tag.
ul em {
color: #000000;
}

The Class Selectors: You can define style rules based on the class attribute of the
elements. All the elements having that class will be formatted according to the defined
rule.
.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to black
in our document. You can make it a bit more particular. This rule renders the content in
black for only <h1> elements with class attribute set to black.
h1.black {
color: #000000;
}

The ID Selectors: You can define style rules based on the id attribute of the elements.
All the elements having that id will be formatted according to the defined rule. This rule

2
renders the content in black for every element with id attribute set to black in our
document.
#black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to black.
h1#black {
color: #000000;
}

The Child Selectors: This rule will render all the paragraphs in black if they are direct
child of <body> element. Other paragraphs put inside other elements like <div> or <td>
would not have any effect of this rule.
body > p {
color: #000000;
}

The Attribute Selectors: You can also apply styles to HTML elements with particular
attributes. The style rule below will match all the input elements having a type attribute
with a value of text.
input[type = "text"] {
color: #000000;
}

Multiple Style Rules: You may need to define multiple style rules for a single element.
You can define these rules to combine multiple properties and corresponding values
into a single block.
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Grouping Selectors: You can apply a style to many selectors if you like. Just separate
the selectors with a comma.
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;

3
margin-bottom: 1em;
text-transform: lowercase;
}

Measurement Units
CSS supports a number of measurements including absolute units such as inches,
centimeters, points, and so on, as well as relative measures such as percentages and
em units.
Unit Description Example
% Defines a measurement as a percentage p {font-size: 16pt; line-height:
relative to another value, typically an enclosing 125%;}
element.
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
em A relative measurement for the height of a font p {letter-spacing: 7em;}
in em spaces. If you assign a font to 12pt, each
"em" unit would be 12pt; thus, 2em would be
24pt.
ex This value defines a measurement relative to a p {font-size: 24pt; line-height:
font's x-height. The x-height is determined by 3ex;}
the height of the font's lowercase letter x.
in Defines a measurement in inches. p {word-spacing: .15in;}
mm Defines a measurement in millimeters. p {word-spacing: 15mm;}
pc Defines a measurement in picas. A pica is p {font-size: 20pc;}
equivalent to 12 points; thus, there are 6 picas
per inch.
pt Defines a measurement in points. A point is body {font-size: 18pt;}
defined as 1/72nd of an inch.
px Defines a measurement in screen pixels. p {padding: 25px;}

Backgrounds
You can set the following background properties of an element −
The background-color property is used to set the background color of an element.
The background-image property is used to set the background image of an
element.
The background-repeat property is used to control the repetition of an image in
the background.
The background-position property is used to control the position of an image in
the background.
The background-attachment property is used to control the scrolling of an image
in the background.
The background property is used as a shorthand to specify a number of other
background properties.

how to set the background color for an element.

4
<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>

set the background image by calling local stored images


<head>
<style>
body {
background-image: url("/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>

how to repeat the background image if an image is small. You can use no-repeat value
for background-repeat property if you don't want to repeat an image
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>

how to repeat the background image vertically.


<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>

how to repeat the background image horizontally.


<head>
<style>
body {
background-image: url("/css/images/css.jpg");

5
background-repeat: repeat-x;
}
</style>
</head>

how to set the background image position 100 pixels away from the left side.
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>

how to set the background image position 100 pixels away from the left side and 200
pixels down from the top.
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>

Background attachment determines whether a background image is fixed or scrolls with


the rest of the page.
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
/* Use this for image scroll*/
/* background-attachment:scroll; */
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>

6
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

Fonts
You can set following font properties of an element −
The font-family property is used to change the face of a font.
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>

The font-style property is used to make a font italic or oblique.


<p style = "font-style:italic;">
This text will be rendered in italic style
</p>

The font-variant property is used to create a normal and small-caps effect.


<p style = "font-variant:small-caps;">
This text will be rendered as small caps
</p>

The font-weight property is used to increase or decrease how bold or light a font
appears. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400,
500, 600, 700, 800, 900.
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>
<p style = "font-weight:500;">
This font is 500 weight.
</p>

7
The font-size property is used to increase or decrease the size of a font. The font-
size property is used to control the size of fonts. Possible values could be xx-small,
x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<p style = "font-size:20px;">
This font size is 20 pixels
</p>
<p style = "font-size:small;">
This font size is small
</p>
<p style = "font-size:large;">
This font size is large
</p>

The font property is used as shorthand to specify a number of other font properties.
<p style = "font-size-adjust:0.61;">
This text is using a font-size-adjust value.
</p>

Font stretch of an element relies on the user's computer to have an expanded or


condensed version of the font being used. Possible values could be normal, wider,
narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-
expanded, expanded, extra-expanded, ultra-expanded.
<p style = "font-stretch:ultra-expanded;">
If this doesn't appear to work, it is likely that your computer
doesn't have a <br>condensed or expanded version of the font being used.
</p>

Text
You can set following text properties of an element −
The color property is used to set the color of a text.
<p style = "color:red;">
This text will be written in red.
</p>

The direction property is used to set the text direction. Possible values are ltr or rtl.
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>

The letter-spacing property is used to add or subtract space between the letters that
make up a word. Possible values are normal or a number specifying space.
<p style = "letter-spacing:5px;">

8
This text is having space between letters.
</p>

The word-spacing property is used to add or subtract space between the words of a
sentence.
<p style = "word-spacing:5px;">
This text is having space between words.
</p>

The text-indent property is used to indent the text of a paragraph. Possible values
are % or a number specifying indent space.
<p style = "text-indent:1cm;">
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>

The text-align property is used to align the text of a document. Possible values are
left, right, center, justify.
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>

The text-decoration property is used to underline, overline, blink and strikethrough


text.
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>

9
The text-transform property is used to capitalize text or convert text to uppercase or
lowercase letters. Possible values are none, capitalize, uppercase, lowercase.
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>

The white-space property is used to control the flow and formatting of text. Possible
values are normal, pre, nowrap.
<p style = "white-space:pre;">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>

The text-shadow property is used to set the text shadow around a text.
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>

Images
CSS plays a good role to control image display. You can set the following image
properties using CSS.
The border property is used to set the width of an image border. This property can
have a value in length or in %.
<img style = "border:0px;" src = "/images/logo.png" />
<br />
<img style = "border:3px dashed red;" src = "/images/logo.png" />

The height property is used to set the height of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in
which an image is available.
<img style = "border:1px solid red; height:100px;" src = "/images/logo.png" />
<br />
<img style = "border:1px solid red; height:50%;" src = "/images/logo.png" />

10
The width property is used to set the width of an image. This property can have a
value in length or in %. While giving value in %, it applies it in respect of the box in
which an image is available.
<img style = "border:1px solid red; width:150px;" src = "/images/logo.png" />
<br />
<img style = "border:1px solid red; width:100%;" src = "/images/logo.png" />

The -moz-opacity property is used to set the opacity of an image. This property is
used to create a transparent image in Mozilla. IE uses filter:alpha(opacity=x) to
create transparent images. In Mozilla (-moz-opacity:x) x can be a value from 0.0 -
1.0. A lower value makes the element more transparent. In IE (filter:alpha(opacity=x))
x can be a value from 0 - 100. A lower value makes the element more transparent.
<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src
= "/images/logo.png" />

Links
The :link signifies unvisited hyperlinks.
The :visited signifies visited hyperlinks.
The :hover signifies an element that currently has the user's mouse pointer hovering
over it.
The :active signifies an element on which the user is currently clicking.

Usually, all these properties are kept in the header part of the HTML document.
Remember a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows:
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

Tables
You can set following properties of a table −
The border-collapse specifies whether the browser should control the appearance of
the adjacent borders that touch each other or whether each cell should maintain its
style. This property can have two values collapse and separate.
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}

11
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

The border-spacing specifies the width that should appear between table cells. It can
take either one or two values.
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;

12
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>

The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">

13
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>

The empty-cells specifies whether the border should be shown if a cell is empty. This
property can have one of the three values - show, hide or inherit.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>

14
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>

The table-layout allows browsers to speed up layout of a table by using the first width
properties it comes across for the rest of a column rather than having to load the
whole table before rendering it. This property can have one of the three values: fixed,
auto or inherit.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>

15
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>

Borders
The border properties allow you to specify how the border of the box representing an
element should look. There are three properties of a border you can change −
The border-color specifies the color of a border.
The border-style specifies whether a border should be solid, dashed line, double line,
or one of the other possible values.
The border-width specifies the width of a border.

The border-color property allows you to change the color of the border surrounding an
element using the properties −
border-bottom-color - changes the color of bottom border.
border-top-color - changes the color of top border.
border-left-color - changes the color of left border.
border-right-color - changes the color of right border.

<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */

16
}
</style>
</head>
<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>
<p class = "example2">
This example is showing all borders in green color only.
</p>
</body>
</html>

The border-style property allows you to select one of the following styles of border −
none − No border. (Equivalent of border-width:0;)
solid − Border is a single solid line.
dotted − Border is a series of dots.
dashed − Border is a series of short lines.
double − Border is two solid lines.
groove − Border looks as though it is carved into the page.
ridge − Border looks the opposite of groove.
inset − Border makes the box look like it is embedded in the page.
outset − Border makes the box look like it is coming out of the canvas.
hidden − Same as none, except in terms of border-conflict resolution for table
elements.

You can individually change the style of the bottom, left, top, and right borders of an
element using the following properties −
border-bottom-style changes the style of bottom border.
border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right border.

<body>
<p style = "border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style = "border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style = "border-width:4px; border-style:dashed;">
This is a dashed border.

17
</p>
<p style = "border-width:4px; border-style:double;">
This is a double border.
</p>
<p style = "border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style = "border-width:4px; border-style:ridge">
This is a ridge border.
</p>
<p style = "border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style = "border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style = "border-width:4px; border-style:hidden;">
This is a hidden border.
</p>
<p style = "border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>
</body>

The border-width property allows you to set the width of an element borders. The value
of this property could be either a length in px, pt or cm or it should be set to thin, medium
or thick. You can individually change the width of the bottom, top, left, and right borders
of an element using the following properties −
border-bottom-width changes the width of bottom border.
border-top-width changes the width of top border.
border-left-width changes the width of left border.
border-right-width changes the width of right border.

<body>
<p style = "border-width:4px; border-style:solid;">
This is a solid border whose width is 4px.
</p>
<p style = "border-width:4pt; border-style:solid;">

18
This is a solid border whose width is 4pt.
</p>
<p style = "border-width:thin; border-style:solid;">
This is a solid border whose width is thin.
</p>
<p style = "border-width:medium; border-style:solid;">
This is a solid border whose width is medium;
</p>
<p style = "border-width:thick; border-style:solid;">
This is a solid border whose width is thick.
</p>
<p style = "border-bottom-width:4px;border-top-width:10px;
border-left-width: 2px;border-right-width:15px;border-style:solid;">
This is a a border with four different width.
</p>
</body>

Margins
We have the following properties to set an element margin.
The margin specifies a shorthand property for setting the margin properties in one
declaration.
<body>
<p style = "margin: 15px; border:1px solid black;">
all four margins will be 15px
</p>
<p style = "margin:10px 2%; border:1px solid black;">
top and bottom margin will be 10px, left and right margin will be 2%
of the total width of the document.
</p>
<p style = "margin: 10px 2% -10px; border:1px solid black;">
top margin will be 10px, left and right margin will be 2% of the
total width of the document, bottom margin will be -10px
</p>
<p style = "margin: 10px 2% -10px auto; border:1px solid black;">
top margin will be 10px, right margin will be 2% of the total
width of the document, bottom margin will be -10px, left margin
will be set by the browser
</p>
</body>

The margin-bottom specifies the bottom margin of an element.


<p style = "margin-bottom: 15px; border:1px solid black;">

19
This is a paragraph with a specified bottom margin
</p>
<p style = "margin-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom margin in percent
</p>

The margin-top specifies the top margin of an element.


<p style = "margin-top: 15px; border:1px solid black;">
This is a paragraph with a specified top margin
</p>
<p style = "margin-top: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>

The margin-left specifies the left margin of an element.


<p style = "margin-left: 15px; border:1px solid black;">
This is a paragraph with a specified left margin
</p>
<p style = "margin-left: 5%; border:1px solid black;">
This is another paragraph with a specified top margin in percent
</p>

The margin-right specifies the right margin of an element.


<p style = "margin-right: 15px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style = "margin-right: 5%; border:1px solid black;">
This is another paragraph with a specified right margin in percent
</p>

Lists
Lists are very helpful in conveying a set of either numbered or bullet points. We have
the following five CSS properties, which can be used to control lists −
The list-style-type allows you to control the shape or appearance of the marker. Here
are the values which can be used for an unordered list – none, disc, circle, square.
Here are the values, which can be used for an ordered list – decimal, decimal-
leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman etc.
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>

20
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker. It can have
one the three values – none, inside, outside.
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

21
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

The list-style-image specifies an image for the marker rather than a bullet point or
number.
<body>
<ul>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

The list-style serves as shorthand for the preceding properties.


<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

The marker-offset specifies the distance between a marker and the text in the list.
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>

22
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>

Paddings
The padding property allows you to specify how much space should appear between
the content of an element and its border. The value of this attribute should be either a
length, a percentage, or the word inherit. If the value is inherit, it will have the same
padding as its parent element. If a percentage is used, the percentage is of the
containing box. You can also set different values for the padding on each side of the box
using the following properties:
The padding-bottom specifies the bottom padding of an element.
<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>
<p style = "padding-bottom: 5%; border:1px solid black;">
This is another paragraph with a specified bottom padding in percent
</p>
</body>

The padding-top specifies the top padding of an element.


<body>
<p style = "padding-top: 15px; border:1px solid black;">
This is a paragraph with a specified top padding
</p>
<p style = "padding-top: 5%; border:1px solid black;">
This is another paragraph with a specified top padding in percent
</p>
</body>

The padding-left specifies the left padding of an element.


<body>
<p style = "padding-left: 15px; border:1px solid black;">
This is a paragraph with a specified left padding
</p>
<p style = "padding-left: 15%; border:1px solid black;">
This is another paragraph with a specified left padding in percent

23
</p>
</body>

The padding-right specifies the right padding of an element.


<body>
<p style = "padding-right: 15px; border:1px solid black;">
This is a paragraph with a specified right padding
</p>
<p style = "padding-right: 5%; border:1px solid black;">
This is another paragraph with a specified right padding in percent
</p>
</body>

The padding serves as shorthand for the preceding properties.


<body>
<p style = "padding: 15px; border:1px solid black;">
all four padding will be 15px
</p>
<p style = "padding:10px 2%; border:1px solid black;">
top and bottom padding will be 10px, left and right
padding will be 2% of the total width of the document.
</p>
<p style = "padding: 10px 2% 10px; border:1px solid black;">
top padding will be 10px, left and right padding will
be 2% of the total width of the document, bottom padding will be 10px
</p>
<p style = "padding: 10px 2% 10px 10px; border:1px solid black;">
top padding will be 10px, right padding will be 2% of
the total width of the document, bottom padding and top padding will be 10px
</p>
</body>

Cursors
The cursor property of CSS allows you to specify the type of cursor that should be
displayed to the user. The possible values for the cursor property are: auto, crosshair,
default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-
resize, w-resize, text, wait, help.
<body>
<p>Move the mouse over the words to see the cursor change:</p>
<div style = "cursor:auto">Auto</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default</div>

24
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
</body>

Scrollbars
CSS provides a property called overflow which tells the browser what to do if the box's
contents is larger than the box itself. This property can take one of the following values:
visible, hidden, scroll and auto.
<html>
<head>
<style type = "text/css">
.scroll {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto {
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
</head>

25
<body>
<p>Example of scroll value:</p>
<div class = "scroll">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
<br />
<p>Example of auto value:</p>
<div class = "auto">
I am going to keep lot of content here just to show you how
scrollbars works if there is an overflow in an element box.
This provides your horizontal as well as vertical scrollbars.
</div>
</body>
</html>

Visibility
A property called visibility allows you to hide an element from view. The visibility property
can take these values: visible, hidden and collapse.
<body>
<p>
This paragraph should be visible in normal way.
</p>
<p style = "visibility:hidden;">
This paragraph should not be visible.
</p>
</body>

Positioning
CSS helps you to position your HTML element. You can put any HTML element at
whatever location you like. You can specify whether you want the element positioned
relative to its natural position in the page or absolute based on its parent element.
Relative Positioning: It changes the position of the HTML element relative to where
it normally appears. We use two values top and left along with the position property.
Move Left - Use a negative value for left. Move Right - Use a positive value for left.
Move Up - Use a negative value for top. Move Down - Use a positive value for top.
<body>
<div style = "position:relative; left:80px; top:2px; background-color:yellow;">
This div has relative positioning.
</div>
</body>

26
Absolute Positioning: An element with position: absolute is positioned at the specified
coordinates relative to your screen top-left corner. Move Left - Use a negative value
for left. Move Right - Use a positive value for left. Move Up - Use a negative value
for top. Move Down - Use a positive value for top.
<div style = "position:absolute; left:80px; top:40px; background-color:yellow;">
This div has absolute positioning.
</div>

Fixed Positioning: Fixed positioning allows you to fix the position of an element to a
particular spot on the page, regardless of scrolling. Specified coordinates will be
relative to the browser window. Move Left - Use a negative value for left. Move Right
- Use a positive value for left. Move Up - Use a negative value for top. Move Down -
Use a positive value for top.
<div style = "position:fixed; left:80px; top:80px; background-color:yellow;">
This div has fixed positioning.
</div>

Layers
CSS gives you opportunity to create layers of various divisions. The CSS layers refer to
applying the z-index property to elements that overlap with each other. The z-index
property is used along with the position property to create an effect of layers. You can
specify which element should come on top and which element should come at bottom.
<html>
<head>
</head>
<body>
<div style = "background-color:red;
width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style = "background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>

27
<div style = "background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>
</body>
</html>

28

You might also like