CSS : CASCADING
STYLE SHEET
Prepared By
Shruti Keshari
Computer Science And Engineering Department
IMS Engineering College, Ghaziabad
CASCADING STYLE SHEET
STYLE SHEETS ARE POWERFUL
MECHANISM FOR ADDING STYLES
TO WEB DOCUMENT.
THE MAIN CHARACTERISTICS OF
CSS ARE:
1:CSS ENFORCE STANDARDS AND
UNIFORMITY THROUGH OUT A WEB SITE.
2:CSS PROVIDE NUMEROUS ATTRIBUTES
TO CREATE DYNAMIC EFFECTS.
3:TEXT AND IMAGE FORMATTING
PROPERTIES CAN BE PREDEFINED IN A
SINGLE LIST.
4: THE ABILITY TO MAKE GLOBAL
CHANGES TO ALL
DOCUMENTS FROM
SINGLE LOCATION IS THE
ADVANTAGE OF STYLE SHEET.
5: STYLE SHEET ARE SAID TO
CASCADE
WHEN THEY COMBINE TO
SPECIFY THE APPEARANCE OF A
PAGE.
THE SYNTAX FOR MAKING THE ASSIGNMEMT
IS SIMPLE.BETWWEN THE <STYLE> .</STYLE>
HTML TAGS ,SPECIFIC STYLE ATTRIBUTES ARE
LISTED.THE <STYLE> AND </STYLE> TAGS ARE
WRITTEN WITHIN THE <HEAD>…</HEAD>
TAGS.
SYNTAX:
<STYLE TYPE=”TEXT/CSS”>
TAG{ATTRIBUTE:VALUE;
ATTRIBUTE:VALUE;
.
.
}
</STYLE>
There are four ways to specify style information in a document:
Embedded style sheets
Method 4: Imported style sheets:
<style>
@import url(“style1.css”);
</style>
TYPES OF SELECTOR
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set. CSS selectors select HTML
elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
• Element Selector
• Id Selector
• Class Selector
• Universal Selector
• Group Selector
• Child Selector
• Descendant Selector
ELEMENT SELECTOR
The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every
paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
ID SELECTOR
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#), followed by the id of the element.
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
CLASS SELECTOR
The class selector selects HTML elements with a specific class attribute. It is used with a
period character . (full stop symbol) followed by the class name.
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and
center-aligned.</h1>
<p class="center">This paragraph is blue and
center-aligned.</p>
</body>
</html>
CSS CLASS SELECTOR FOR SPECIFIC
ELEMENT
If you want to specify that only one specific HTML element should be affected then you
should use the element name with class selector.
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not
affected</h1>
<p class="center">This paragraph is blue and
center-aligned.</p>
</body>
</html>
UNIVERSAL SELECTOR
The universal selector is used as a wildcard character. It selects all the elements on the
pages.
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every
paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
GROUP SELECTOR
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector
in grouping.
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller
font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
CHILD SELECTOR
Child Selector is used to match all the elements which are child of a specified element.
It gives the relation between two elements. The element > element selector selects those
elements which are the children of specific parent. The operand on the left side of > is
the parent and the operand on the right is the children element.
Syntax:
element > element {
// CSS Property
}
Match all <p> element that are child of only <div> element
<html> <head> <title>
CSS child Selector </title> <style>
div > p {
color:white;
background: green;
padding:2px;
}
</style> </head>
<body style = "text-align: center;">
<div>
<h2 style = "color:green;">
CSS Child Selector
</h2>
<p>
A computer science portal for CS.
</p>
</div>
<p>Web Tech Classes is a quick course to cover
algorithms questions.</p>
<p>This paragraph will not be styled.</p>
</body> </html>
DESCENDANT SELECTOR
Descendant selector is used to select all the elements which are child of the element (not a
specific element). It select the elements inside the elements i.e it combines two selectors
such that elements matched by the second selector are selected if they have an ancestor
element matching the first selector.
Syntax:
element element {
// CSS Property
}
<html> <head> <title>
CSS Descendant Selector </title>
<style>
div h2 {
font-size:26px;
}
</style> </head>
<body style = "text-align:center;">
<div>
<h2 style = "color:green;" >
CSS selector
</h2>
<div>
<h2>CSS Selector</h2>
</div>
</div>
<p>
CSS selector in green color is
example of child Selector
<br>other CSS Selector is example
of descendant Selector
</p> </body> </html>
CSS COMMENTS
Comments are single or multiple lines statement and written within /*............*/ .
<html> <head> <style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers
and not shown in the output.</p>
</body> </html>
IN THE <STYLE> TAG THE EXPRESSION
“TYPE=TEXT/ CSS ” INDICATES THAT THE
STYLE
SHEET CONFORMS TO CSS SYNTAX .THE
ATTRIBUTES THAT CAN BE SPECIFIED TO
THE
<STYLE> TAG ARE FONT ATTRIBUTES
,COLOR AND BACKGROUND ATTRIBUTES
,TEXT ATTRIBUTES
BORDER ATTRIBUTES ,MARGIN ATTRIBUTES
AND LIST ATTRIBUTES.
Attribute Values
Font-family A comma delimited sequence of font family
names
(arial,serif,sans,new times roman)
Font-style Normal,italic
Font-weight Normal,bold,bolder
Font-size Absolute size,relative size,in pixels
,percentage
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H3 {FONT-FAMILY: TIMES}
P {FONT-FAMILY: COURIER}
H1 {FONT-FAMILY: SANS-SERIF}
</STYLE>
</HEAD>
<BODY>
<H3>THIS IS HEADER 3</H3>
<P>THIS IS A PARAGRAPH</P>
<H1>THIS IS A PARAGRAPH</H1>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {FONT-SIZE: 25 PT}
H2 {FONT-SIZE: 50 PT}
P {FONT-SIZE: 75 PT}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {FONT-STYLE: ITALIC}
H2 {FONT-STYLE: NORMAL}
P {FONT-STYLE: OBLIQUE}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H6 {FONT-VARIANT: NORMAL}
P {FONT-VARIANT: SMALL-CAPS}
</STYLE>
</HEAD>
<BODY>
<H6>THIS IS A PARAGRAPH</H6>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {FONT-WEIGHT: 100}
H2 {FONT-WEIGHT: BOLD}
H3 {FONT-WEIGHT: 900}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS A PARAGRAPH</H1>
<H2 >THIS IS A PARAGRAPH</H2>
<H3>THIS IS A PARAGRAPH</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P
{
FONT: ITALIC SMALL-CAPS 900 12PX ARIAL
}
</STYLE>
</HEAD>
<BODY>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
COLOR AND BACKGROUND
ATTRIBUTES
Attributes Values
Color Sets an elements text-color.
Background- Specifies the color in an element’s
color background
Background- Sets the background image. A URL or none.
image
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY {BACKGROUND-COLOR: YELLOW}
H1 {BACKGROUND-COLOR: RED}
H2 {BACKGROUND-COLOR: TRANSPARENT}
P {BACKGROUND-COLOR: RGB(250,0,255)}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE:
URL('C:\DOCUMENTS AND SETTINGS\ATUL\MY
DOCUMENTS\MY PICTURES\12.JPG')
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE:
URL('C:\DOCUMENTS AND SETTINGS\ATUL\MY
DOCUMENTS\MY PICTURES\12.JPG');
BACKGROUND-REPEAT: NO-REPEAT
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE:
URL('F:\DEFENDERS OF
WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG');
BACKGROUND-REPEAT: REPEAT-Y
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE:
URL('F:\DEFENDERS OF
WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG');
BACKGROUND-REPEAT: REPEAT-X}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE: URL('F:\DEFENDERS OF
WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG');
BACKGROUND-REPEAT:
NO-REPEAT;
BACKGROUND-POSITION: CENTER;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND-IMAGE:
URL('F:\DEFENDERS OF WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG');
BACKGROUND-REPEAT:
REPEAT-X;
BACKGROUND-ATTACHMENT:
FIXED }
</STYLE>
</HEAD>
<BODY>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
<P>THE IMAGE WILL NOT SCROLL WITH THE REST OF THE PAGE</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
BODY
{
BACKGROUND: GREEN URL('F:\DEFENDERS OF
WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG') NO-REPEAT FIXED
CENTER;
}
</STYLE>
</HEAD>
<BODY>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
<P>THIS IS SOME TEXT</P>
</BODY>
</HTML>
TEXT ATTRIBUTES AND BORDER
ATTRIBUTES
Attributes Values
Text-decoration Adds decoration to an elements text None,underline,overline,blink,line-
through
Vertical-align Determines an elements’s vertical postion.
Baseline ,sub,super,top,text-top
Text-transform Applies and transformation to the text Capitalize,uppercase,lowercase or
none
Text-indent Indents the first line of text
A percentage of the elements width or a length
Border-style Solid,double,inset,outset
Border-color A color name or color code
Border-width Thin,medium,thick
Border-top-width Thin,thick,medium
Border-bottom-width Thin,thick,medium
Border-bottom-width Thin,thick,medium
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {COLOR: RED}
H2 {COLOR: GREEN}
P {COLOR: RGB(0,0,255)}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<P>THIS IS A PARAGRAPH</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {LETTER-SPACING: 0PX}
H4 {LETTER-SPACING: 0.5CM}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H4>THIS IS HEADER 4</H4>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {LETTER-SPACING: -5PX}
H4 {LETTER-SPACING: 0.5CM}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H4>THIS IS HEADER 4</H4>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-ALIGN: CENTER}
H2 {TEXT-ALIGN: LEFT}
H3 {TEXT-ALIGN: RIGHT}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<H3>THIS IS HEADER 3</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H1 {TEXT-DECORATION: OVERLINE}
H2 {TEXT-DECORATION: LINE-THROUGH}
H3 {TEXT-DECORATION: UNDERLINE}
A {TEXT-DECORATION: NONE}
</STYLE>
</HEAD>
<BODY>
<H1>THIS IS HEADER 1</H1>
<H2>THIS IS HEADER 2</H2>
<H3>THIS IS HEADER 3</H3>
<P><A HREF="A.HTML">THIS IS HEADER</A></P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P {TEXT-INDENT: 1CM}
</STYLE>
</HEAD>
<BODY>
<P>
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
</P>
</BODY> </HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P {TEXT-INDENT: 10CM}
</STYLE>
</HEAD> <BODY>
<P>
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
THIS IS SOME TEXT IN A PARAGRAPH
</P>
</BODY> </HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
H6 {TEXT-TRANSFORM: UPPERCASE}
H5 {TEXT-TRANSFORM: LOWERCASE}
H3 {TEXT-TRANSFORM: CAPITALIZE}
</STYLE>
</HEAD> <BODY>
<H6>THIS IS SOME TEXT IN A PARAGRAPH</H6>
<H5>THIS IS SOME TEXT IN A PARAGRAPH</H5>
<H3>THIS IS SOME TEXT IN A PARAGRAPH</H3>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P.DOTTED {BORDER-STYLE: DOTTED}
P.DASHED {BORDER-STYLE: DASHED}
P.SOLID {BORDER-STYLE: SOLID}
P.DOUBLE {BORDER-STYLE: DOUBLE}
P.GROOVE {BORDER-STYLE: GROOVE}
P.RIDGE {BORDER-STYLE: RIDGE}
P.INSET {BORDER-STYLE: INSET}
P.OUTSET {BORDER-STYLE: OUTSET}
</STYLE>
</HEAD><BODY><P CLASS="DOTTED">A DOTTED BORDER</P>
<P CLASS="DASHED">A DASHED BORDER</P>
<P CLASS="SOLID">A SOLID BORDER</P>
<P CLASS="DOUBLE">A DOUBLE BORDER</P>
<P CLASS="GROOVE">A GROOVE BORDER</P>
<P CLASS="RIDGE">A RIDGE BORDER</P>
<P CLASS="INSET">AN INSET BORDER</P>
<P CLASS="OUTSET">AN OUTSET BORDER</P>
</BODY>
</HTML>
<HTML><HEAD><STYLE TYPE="TEXT/CSS">
P.ONE
{
BORDER-STYLE: SOLID;
BORDER-COLOR: RED}
P.TWO
{
BORDER-STYLE: SOLID;
BORDER-COLOR: BLUE GREEN}
P.THREE
{
BORDER-STYLE: SOLID;
BORDER-COLOR: RED YELLOW GREEN
}
P.FOUR
{
BORDER-STYLE: SOLID;
BORDER-COLOR: YELLOW RED GREEN RGB(250,0,255)
}
</STYLE>
</HEAD>
<BODY>
<P CLASS="ONE">ONE-COLORED BORDER!</P>
<P CLASS="TWO">TWO-COLORED BORDER!</P>
<P CLASS="THREE">THREE-COLORED BORDER!
</P>
<P CLASS="FOUR">FOUR-COLORED BORDER!</P>
<P><B>NOTE:</B> THE "BORDER-COLOR"
PROPERTY DOES NOT WORK IF IT IS USED
ALONE. USE THE "BORDER-STYLE" PROPERTY TO
SET THE BORDERS FIRST.</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P
{
BORDER-STYLE: SOLID;
BORDER-BOTTOM-WIDTH: 15PX
}
</STYLE>
</HEAD>
<BODY>
<P><B>NOTE:</B> THE "BORDER-BOTTOM-WIDTH"
PROPERTY DOES NOT WORK IF IT IS USED ALONE. USE THE
"BORDER-STYLE" PROPERTY TO SET THE BORDERS
FIRST.</P>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P
{
BORDER-STYLE: SOLID;
BORDER-LEFT-WIDTH: 15PX
}
</STYLE>
</HEAD>
<BODY>
<P><B>NOTE:</B> THE "BORDER-LEFT-WIDTH" PROPERTY
DOES NOT WORK IF IT IS USED ALONE. USE THE "BORDER-
STYLE" PROPERTY TO SET THE BORDERS FIRST.</P>
</BODY>
</HTML>
<HTML><HEAD><STYLE TYPE="TEXT/CSS">
P.ONE
{
BORDER-STYLE: SOLID;
BORDER-WIDTH: 5PX
}
P.TWO
{
BORDER-STYLE: SOLID;
BORDER-WIDTH: 5PX 10PX
}
P.THREE
{
BORDER-STYLE: SOLID;
BORDER-WIDTH: 5PX 10PX 1PX
}
P.FOUR
{
BORDER-STYLE: SOLID;
BORDER-WIDTH: 5PX 10PX 1PX MEDIUM}
</STYLE>
</HEAD>
<BODY>
<P CLASS="ONE">SOME TEXT</P>
<P CLASS="TWO">SOME TEXT</P>
<P CLASS="THREE">SOME TEXT</P>
<P CLASS="FOUR">SOME TEXT</P>
<P><B>NOTE:</B> THE "BORDER-WIDTH" PROPERTY DOES
NOT WORK IF IT IS USED ALONE. USE THE "BORDER-
STYLE" PROPERTY TO SET THE BORDERS FIRST.</P>
</BODY>
</HTML>
MARGIN ATTRIBUTES
Attributes Values
Margin-top Percent , length or auto
Margin-bottom Percent , length or auto
Margin-left Percent , length or auto
Margin-right Percent , length or auto
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
P.LEFTMARGIN {MARGIN-LEFT: 2CM}
</STYLE>
</HEAD>
<BODY>
<P>THIS IS A PARAGRAPH WITH NO MARGIN
SPECIFIED</P>
<P CLASS="LEFTMARGIN">THIS IS A PARAGRAPH
WITH A SPECIFIED LEFT MARGIN</P>
</BODY>
</HTML>
LIST ATTRIBUTES
Attributes Values
List-style Disc,circle,square,decimal,
lower-roman,upper-
roman,none.
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
UL.DISC {LIST-STYLE-TYPE: DISC}
UL.CIRCLE {LIST-STYLE-TYPE: CIRCLE}
UL.SQUARE {LIST-STYLE-TYPE: SQUARE}
UL.NONE {LIST-STYLE-TYPE: NONE}
</STYLE>
</HEAD>
<BODY>
<UL CLASS="DISC">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</UL>
<UL CLASS="CIRCLE">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</UL>
<UL CLASS="SQUARE">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</UL>
<UL CLASS="NONE">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</UL>
</BODY>
</HTML>
<HTML><HEAD>
<STYLE TYPE="TEXT/CSS">
OL.DECIMAL {LIST-STYLE-TYPE: DECIMAL}
OL.LROMAN {LIST-STYLE-TYPE: LOWER-ROMAN}
OL.UROMAN {LIST-STYLE-TYPE: UPPER-ROMAN}
OL.LALPHA {LIST-STYLE-TYPE: LOWER-ALPHA}
OL.UALPHA {LIST-STYLE-TYPE: UPPER-ALPHA}
</STYLE></HEAD>
<BODY>
<OL CLASS="DECIMAL">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</OL>
<OL CLASS="LROMAN">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</OL>
<OL CLASS="UROMAN">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</OL>
<OL CLASS="LALPHA">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</OL>
<OL CLASS="UALPHA">
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</OL>
</BODY>
</HTML>
<HTML>
<HEAD>
<STYLE TYPE="TEXT/CSS">
UL
{
LIST-STYLE-IMAGE: URL('F:\DEFENDERS OF
WILDLIFE_FILES\DEFENDERS_TOP_10B.JPG')
}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>COFFEE</LI>
<LI>TEA</LI>
<LI>COCA COLA</LI>
</UL>
</BODY>
</HTML>
BLOCK-LEVEL ELEMENTS
A block-level element always starts on a new line and takes
up the full width available (stretches out to the left and right
as far as it can).
Here are the block-level elements in HTML:
<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt><fieldset> <figcaption> <figure> <footer>
<form> <h1> <h6> <header> <hr> <li> <main> <nav> <noscript>
<ol> <p> <pre> <section> <table> <tfoot> <ul> <video>
INLINE ELEMENTS
An inline element does not start on a new line and it only takes
up as much width as necessary.
Here are the inline elements in HTML:
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite>
<code> <dfn> <em> <i> <img> <input> <kbd> <label> <map>
<object><output><q><samp><script>
<select><small><span><strong><sub>
<sup><textarea><time><tt><var>
THE <DIV> ELEMENT
The <div> element is often used as a container for other HTML
elements.
The <div> element has no required attributes, but style, class and id
are common.
When used together with CSS, the <div> element can be used to
style blocks of content:
<div style="background-
color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan
area of over 13 million inhabitants.</p>
</div>
THE <SPAN> ELEMENT
The <span> element is an inline container used to mark up a
part of a text, or a part of a document.
The <span> element has no required attributes, but style,
class and id are common.
When used together with CSS, the <span> element can be
used to style parts of the text:
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and my father
has <span style="color:darkolivegreen;font-
weight:bold">dark green</span> eyes.</p>
</body>
</html>
WHAT ARE PSEUDO-CLASSES?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
}
ANCHOR PSEUDO-CLASSES
<html><head>
<style>
a:link {
color: red;}
a:visited {
color: green;}
a:hover {
color: hotpink; }
a:active {
color: blue;}
</style></head>
<body><p><b><a href=“b.html" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to
be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
CSS PSEUDO-ELEMENTS
A CSS pseudo-element is used to style specified parts of an
element.
For example, it can be used to:
Style the first letter, or line, of an element
Insert content before, or after, the content of an element
The syntax of pseudo-elements:
selector::pseudo-element {
property: value;
}
• THE ::FIRST-LETTER PSEUDO-ELEMENT: THE ::FIRST-
LETTER PSEUDO-ELEMENT IS USED TO ADD A SPECIAL STYLE
TO THE FIRST LETTER OF A TEXT.
• THE ::FIRST-LINE PSEUDO-ELEMENT:: THE ::FIRST-LINE
PSEUDO-ELEMENT IS USED TO ADD A SPECIAL STYLE TO THE
FIRST LINE OF A TEXT.
• THE ::BEFORE PSEUDO-ELEMENT: THE ::BEFORE PSEUDO-
ELEMENT CAN BE USED TO INSERT SOME CONTENT BEFORE
THE CONTENT OF AN ELEMENT.
• THE ::AFTER PSEUDO-ELEMENT: THE ::AFTER PSEUDO-
ELEMENT CAN BE USED TO INSERT SOME CONTENT AFTER
THE CONTENT OF AN ELEMENT.
• THE ::SELECTION PSEUDO-ELEMENT: THE ::SELECTION
PSEUDO-ELEMENT MATCHES THE PORTION OF AN ELEMENT
THAT IS SELECTED BY A USER.
CSS ATTRIBUTE SELECTORS
• THE [ATTRIBUTE] SELECTOR IS USED TO SELECT ELEMENTS
WITH A SPECIFIED ATTRIBUTE.
• CSS [ATTRIBUTE="VALUE"] SELECTOR: THE
[ATTRIBUTE="VALUE"] SELECTOR IS USED TO SELECT
ELEMENTS WITH A SPECIFIED ATTRIBUTE AND VALUE.
• CSS [ATTRIBUTE~="VALUE"] SELECTOR:THE
[ATTRIBUTE~="VALUE"] SELECTOR IS USED TO SELECT
ELEMENTS WITH AN ATTRIBUTE VALUE CONTAINING A
SPECIFIED WORD.
• CSS [ATTRIBUTE|="VALUE"] SELECTOR: THE [ATTRIBUTE|
="VALUE"] SELECTOR IS USED TO SELECT ELEMENTS WITH THE
SPECIFIED ATTRIBUTE STARTING WITH THE SPECIFIED VALUE.
• CSS [ATTRIBUTE^="VALUE"] SELECTOR: THE
[ATTRIBUTE^="VALUE"] SELECTOR IS USED TO SELECT
ELEMENTS WHOSE ATTRIBUTE VALUE BEGINS WITH A
SPECIFIED VALUE.
• CSS [ATTRIBUTE$="VALUE"] SELECTOR: THE
[ATTRIBUTE$="VALUE"] SELECTOR IS USED TO SELECT
ELEMENTS WHOSE ATTRIBUTE VALUE ENDS WITH A
SPECIFIED VALUE.
• CSS [ATTRIBUTE*="VALUE"] SELECTOR: THE
[ATTRIBUTE*="VALUE"] SELECTOR IS USED TO SELECT
ELEMENTS WHOSE ATTRIBUTE VALUE CONTAINS A
SPECIFIED VALUE.
MARQUEES
• AN HTML MARQUEE IS A SCROLLING PIECE OF TEXT
DISPLAYED EITHER HORIZONTALLY ACROSS OR VERTICALLY
DOWN YOUR WEBPAGE DEPENDING ON THE SETTINGS. THIS IS
CREATED BY USING HTML <MARQUEES> TAG.
• A SIMPLE SYNTAX TO USE HTML <MARQUEE> TAG IS AS
FOLLOWS −
<MARQUEE ATTRIBUTE_NAME =
"ATTRIBUTE_VALUE"....MORE ATTRIBUTES>
ONE OR MORE LINES OR TEXT MESSAGE OR IMAGE
</MARQUEE>
THE <MARQUEE> TAG ATTRIBUTES
Sr.No Attribute & Description
1 width
This specifies the width of the marquee. This can be a value like 10 or 20% etc.
2 height
This specifies the height of the marquee. This can be a value like 10 or 20% etc.
3 direction
This specifies the direction in which marquee should scroll. This can be a value like up, down,
left or right.
4 behavior
This specifies the type of scrolling of the marquee. This can have a value like scroll,
slide and alternate.
5 scrolldelay
This specifies how long to delay between each jump. This will have a value like 10 etc.
6 scrollamount
This specifies the speed of marquee text. This can have a value like 10 etc.
7 loop
This specifies how many times to loop. The default value is INFINITE, which means that the marquee
loops endlessly.
8 bgcolor
This specifies background color in terms of color name or color hex value.
9 hspace
This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
10 vspace
This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
END
