Cascading Style Sheets(CSS)

CONTENTS
• What are Cascading Style Sheets (CSS)?
• What can CSS do?
• Advantages
• Who Creates and Maintains CSS?
• CSS Versions
• Understanding Style Rules
• Types of CSS
• CSS rules
• CSS Rules Overriding
• What is Inheritance?
• Handling old Browsers
• CSS Comments
• CSS - Measurement Units

CONTENTS
•Using IDs and Classes
• Working With DIV
• Working With <span>
• Manipulating Text using CSS
• Setting Fonts using CSS
• Setting Backgrounds using CSS
• CSS – Images
• CSS – Links
• CSS – Tables
• CSS for Page Layout
• CSS - Lists
• CSS – Cursors
• Display
• Limitations

What Are
Cascading Style Sheets
(CSS)?

What Are Cascading Style Sheets?
•Cascading Style Sheets (CSS) is a style sheet language
used to describe the presentation of a document written in a
markup language.

• Its most common application is to style web pages written in
HTML and XHTML, but the language can be applied to any
kind of XML document.

•Created by: CSS was created by Håkon Wium Lie and Bert
Bos and was adopted as a W3C Recommendation in late
1996.

Håkon Wium Lie,
chief technical officer of
the Opera Software
company and co-creator of
the CSS web standard

What Are Cascading Style
Sheets?
•A standards-based method for controlling the look and feel of
XML content.
•Comprised of Rules to control elements in the document.
•Designed to separate formatting from the content while being
flexible and scalable
• CSS specifies a priority scheme to determine which style
rules apply if more than one rule matches against a particular
element. In this so-called cascade, priorities or weights are
calculated and assigned to rules, so that the results are

What Can CSS Do?
•Text formatting
•Element sizing
•Element positioning
•Change link attributes
•Cursor manipulation
• support the control of hundreds or thousands of
documents from a single control file
•This makes our life much easier when it is time to make
updates

Advantages
• Saves time
• Easy to change
• Keep consistency
• Give you more control over layout
• Use styles with JavaScript => DHTML
• Make it easy to create a common format for all the
Web pages

Advantages
• Pages load faster

• Easy maintenance

• Superior styles to HTML

• Multiple Device Compatibility

•Global web standards

Who Creates and Maintains
CSS?

CSS?
• CSS is created and maintained through a group of people
within the W3C called the CSS Working Group.
• The CSS Working Group creates documents called
specifications.
• When a specification has been discussed and officially
ratified by W3C members, it becomes a recommendation.

CSS?
•These ratified specifications are called recommendations
because the W3C has no control over the actual
implementation of the language. Independent companies and
organizations create that software.

NOTE: The World Wide Web Consortium, or W3C is a
group that makes recommendations about how the Internet
works and how it should evolve.

CSS Versions
CSS 1
– Font properties such as typeface and emphasis
– Color of text, backgrounds, and other elements
– Text attributes such as spacing between words, letters,
and lines of text
– Alignment of text, images, tables and other elements
– Margin, border, padding, and positioning for most
elements
– Unique identification and generic classification of
groups of attributes

CSS Versions

CSS2
includes a number of new capabilities like
– absolute, relative, and fixed positioning of elements
and z-index,
– the concept of media types

– support for aural style sheets and bidirectional text

– new font properties such as shadows.

CSS Versions
CSS3
Modules include:
– Borders (border-radius, box-shadow)
– Backgrounds (multiple backgrounds)
– Color (HSL colors, HSLA colors, opacity, RGBA
colors)
– Also:
– media queries
– multi-column layout
– Web fonts

Understanding Style Rules
• The style characteristics for an HTML element
are expressed by Style Rules .
• A set of style rules is called a Style Sheet.
• Style rules are contained in the <STYLE> element in the
document’s <HEAD> section.
<Head>
<Style type=“text/css”>
P
{color:blue; font-size: 24pt;}
</Style>
</Head>

• A Style Rule is composed of two parts: a selector and a
declaration.

Declaration
Selector

TH {color: red;}.
• The Selector indicates the element to which the rule is
applied.
• The Declaration determines the property values of a
selector.

• The Property specifies a characteristic, such as color,
font-family, position, and is followed by a colon (:).
• The Value expresses specification of a property, such as
red for color, arial for font family, 12 pt for font-size, and
is followed by a semicolon (;).

Property Value

P {color: red;}

Types of Selectors :-
Different types of selectors are:-
• Type selectors
• Universal selectors
• Descendant Selectors
• Class Selectors
• ID Selectors
• Child Selectors
• Attribute Selectors
• Grouping Selectors

The Type Selectors :-
• To give a color to all level 1 headings :-

h1 {

color: #36CFFF;

}

The Universal Selectors:-
•Rather than selecting elements of a specific type, the
universal selector quite simply matches the name of any
element type :-

*{

color: #000000;

}

-This rule renders the content of every element in our
document in black.

The Descendant Selectors :-
•Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element.
•In the following example, style rule will apply to <em>
element only when it lies inside <ul> tag.

ul em {

color: #000000;

}

The Class Selectors :-
•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.

The Class Selectors (Cntd.)
•To make it a bit more particular. For example:-

h1.black {

color: #000000;

}

-This rule renders the content in black for only <h1>
elements with class attribute set to black.

The Class Selectors (Cntd.)

•You can apply more than one class selectors to given
element. Consider the following example :-

<p class="center bold">

This paragraph will be styled by the classes center
and bold.

</p>

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:-

#black {

color: #000000;

}

-This rule renders the content in black for every element with
id attribute set to black in our document.

The ID Selectors (Cntd.)
•To make it a bit more particular. For example: -
h1#black { color: #000000; }
-This rule renders the content in black for only <h1>
elements with id attribute set to black.
•The true power of id selectors is when they are used as the
foundation for descendant selectors, For example:
#black h2 { color: #000000; }
-In this example all level 2 headings will be displayed in
black color only when those headings will lie with in tags
having id attribute set to black.

The Child Selectors:-
•A type of selector which is very similar to descendants but
have different functionality. Consider the following example:
body > p {
color: #000000;
}
-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> etc. would not have any
effect of this rule.

The Attribute Selectors:-
•To apply styles to HTML elements with particular
attributes. The style rule below will match all input elements
that has a type attribute with a value of text:-

input[type="text"]{

color: #000000;

}
•The advantage to this method is that the <input
type="submit" /> element is unaffected, and the color applied
only to the desired text fields.

The Attribute Selectors(Cntd.):
There are following rules applied to attribute selector.:-
• p[lang] - Selects all paragraph elements with a lang
attribute.
• p[lang="fr"] - Selects all paragraph elements whose
lang attribute has a value of exactly "fr".
• p[lang~="fr"] - Selects all paragraph elements whose
lang attribute contains the word "fr".
• p[lang|="en"] - Selects all paragraph elements whose
lang attribute contains values that are exactly "en", or
begin with "en-".

Grouping Selectors:-
•can apply a style to many selectors if you like. Just separate the
selectors with a comma as given in the following example:
h1, h2, h3 {
color: #36C;
text-transform: lowercase;
}
- This define style rule will be applicable to h1, h2 and h3
element as well.
• The order of the list is irrelevant. All the elements in the selector
will have the corresponding declarations applied to them.

Types of CSS
Three CSS implementations:-

 Inline

• Affects only the element applied to

 Embedded

• Affects only the elements in a single file

 External

• Linked to an unlimited number of files

HTML Page Structure
<HTML> Document (HTML)

<HEAD> Head

Title Text
<TITLE>Title Text</TITLE>

</HEAD> Body

<BODY> H1 Heading

<H1>H1 Heading</H1> Paragraph 1

<P>Paragraph 1</P>
Paragraph 2
<P>Paragraph 2</P>

</BODY>

</HTML>

Inline CSS
• Add styles to each tag within the HTML file
• Use it when you need to format just a single section in
a web page

The style Attribute:
• can use style attribute of any HTML element to define
style rules. These rules will be applied to that element
only.

syntax:- <element style="...style rules....">

Inline CSS
•Use the STYLE attribute

<p>This is normal text</p>

<p><b>This is bold text</b></p>

<p style=“font-weight: bold”>This is bold
text</p>

Inline CSS
Attributes:
Attribute Value Description
style style rules The value of style attribute is a combination of
style declarations separated by semicolon (;).

Example:-
Following is the example of inline CSS based on above
syntax: <h1 style ="color:#36C;"> This is inline CSS </h1>

This will produce following result:
This is inline CSS

Embedded or internal styles

• A style is applied to the entire HTML file
• Use it when you need to modify all instances of
particular element (e.g., h1) in a web page

Embedded CSS
The <style> Element:
• can put CSS rules into an HTML document using the
<style> element.
• This tag is placed inside <head>...</head> tags.
Syntax: -
<head>
<style type="text/css" media="...">
Style Rules ............
</style>
</head>

Embedded CSS
Attributes:

Attributes associated with <style> elements are:
type text/css Specifies the style sheet language as a content-
type (MIME type). This is required attribute.
media screen Specifies the device the document will be
tty displayed on. Default value is all. This is optional
tv attribute.
projection
handheld
print
braille
aural
all

External style sheets

• An external style sheet is a text file containing the
style definition (declaration)
• Use it when you need to control the style for an entire
web site

External CSS
• The <link> element can be used to include an
external stylesheet file in your HTML document.
• An external style sheet is a separate text file with .css
extension. Define all the Style rules within this text file
and then include this file in any HTML document using
<link> element.

Syntax:-

<head>

<link type="text/css" href="..." media="..." />

</head>

External CSS
Attributes:
Attributes associated with <style> elements are:

type text/css Specifies the style sheet language as a
content-type (MIME type). This attribute is
required.
href URL Specifies the style sheet file having Style
rules. This attribute is a required.
media screen Specifies the device the document will be
tty displayed on. Default value is all. This is
tv optional attribute.
projection
handheld
print
braille
aural
all

Creating an External Style
Sheet
• Open a new blank document in Notepad
• Type style declarations
– h1 {color:red; font-family:sans-serif;}

• Do not include <style> tags
• Save the document as filename.css

Linking to Style Sheets
• Open an HTML file
• Between <head> and </head> add
– <link href=URL rel=“relation_type”
type=“link_type”>
• URL is the file.css
• Relation_type=“stylesheet”
• Link_type=“text/css”
• Save this file and the .css file in the same web server
directory

Imported CSS - @import Rule:
• @import is used to import an external stylesheet
in a manner similar to the <link> element.
• Generic syntax of @import rule:-
<head>
<@import "URL";
</head>

Here URL is the URL of the style sheet file having style
rules.

Imported CSS - @import Rule:
•You can use another syntax as well:-
<head>
<@import url("URL");
</head>

Example:-
<head>
@import "mystyle.css";
</head>

External CSS

A few reasons this is better :-

• Easier Maintenance

• Reduced File Size

• Reduced Bandwidth

• Improved Flexibility

Cascading Style Sheets (CSS)
Style Rules:-
Inline style=“font-weight: bold”

Property Value
Embedded/ H1 {font-weight: bold}
External Selector Declaration

H1 {font-weight: bold; color:black; }

CSS Rules Overriding
There are four ways to include style sheet rules in a an HTML
document. Here is the rule to override any Style Sheet Rule.:-
 Any inline style sheet takes highest priority. So it will
override any rule defined in <style>...</style> tags or
rules defined in any external style sheet file.
 Any rule defined in <style>...</style> tags will override
rules defined in any external style sheet file.
 Any rule defined in external style sheet file takes lowest
priority and rules defined in this file will be applied only
when above two rules are not applicable

Inheritance
• When we nest one element inside another, the nested
element will inherit the properties assigned to the containing
element. Unless we modify the inner elements values
independently.
• For example, a font declared in the body will be inherited
by all text in the file no matter the containing element, unless
you declare another font for a specific nested element.

body {font-family: Verdana, serif;}

- Now all text within the (X)HTML file will be set to
Verdana.

Inheritance
• If you wanted to style certain text with another font, like an
h1 or a paragraph then you could do the following:-

h1 {font-family: Georgia, sans-serif;}

p {font-family: Tahoma, serif;}

-Now all <h1> tags within the file will be set to Georgia
and all <p> tags are set to Tahoma, leaving text within other
elements unchanged from the body declaration of Verdana

Inheritance
• There are instances where nested elements do not inherit
the containing elements properties.

•For example, if the body margin is set to 20 pixels, the other
elements within the file will not inherit the body margin by
default.

body {margin: 20px;}

Handling old Browsers
•To handle old browsers while writing our Embedded CSS in
an HTML document, can use comment tags to hide CSS
from older browsers:
<style type="text/css">

</style>

CSS Comments
•We can use /* ....*/ to comment multi-line blocks in similar
way you do in C and C++ programming languages.
Example:-
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
font-weight: normal;
}
/* end of style rules. */

Working With Ids
• Use an id to distinguish something, like a paragraph,
from the others in a document.
• To create an ID for a specific tag, use the property:-

<tag ID=id_name>

For example, to identify a paragraph as “head”, use the
code:-
<p id=“head”>… </p>
• To apply a style to a specific ID, use:-

#id_name {style attributes and values}

Classes
• HTML and XHTML require each id be unique–
therefore an id value can only be used once in a
document.

• can mark a group of elements with a common
identifier using the class attribute.
<element class=“class”> … </element>

Working With Classes
• To create a class, enter the following in the HTML tag:
– <tag CLASS=class_name>

– <h1 CLASS=FirstHeader>IU</h1>

– class_name is a name to identify this class of tags

• To apply a style to a class of tags, use:
– tag.class_name {style attributes} or

– .class_name {style attributes}

Working With Classes and Ids
• The difference between the Class property and the ID
property :-
– The value of the ID property must be unique. you
can’t have more than one tag with the same ID
value
– You can apply the same Class value to multiple
document tags

Working With DIV
• <DIV> tag is used for blocks of text, e.g., paragraphs, block
quotes, headers, or lists

• To create a container for block-level elements, use:
– <DIV CLASS=class_name>

• Block-level elements

</DIV>
– Class_name is the name of the class

– We can substitute the ID proper for the Class
property (with ID, the syntax for CSS style,
#id_name {style attributes and values}

Working With <DIV>

DIV.Slogan {font-
weight:bold}
style
Maxwell…:
“We
teach…
<DIV CLASS=Slogan>Maxwell Scientific’s Resulting
new
text
Slogan is:<BR>”We teach science”</DIV>
HTML code

Working With <span>
• Spans are very similar to divisions except they are an
inline element versus a block level element.

• No linebreak is created when a span is declared

•With the <span> tag, you can use inline elements, e.g.,
<B>, <I>

Working With <span>
• To create a container for inline elements, use:
– <span CLASS=class_name>

• inline elements

</span>
• can use the span tag to style certain areas of text, as:-
<span class="italic">This text is italic</span>
• Then in CSS file:
.italic{
font-style: italic;
}

Manipulating Text using CSS
We can set following text properties of an element:
• The color property is used to set the color of a text.

• The direction property is used to set the text direction.

• The letter-spacing property is used to add or subtract space
between the letters that make up a word.
• The word-spacing property is used to add or subtract space
between the words of a sentence.
• The text-indent property is used to indent the text of a
paragraph.

Manipulating Text using CSS
• The text-align property is used to align the text of a
document.
• The text-decoration property is used to underline,
overline, and strikethrough text.
• The text-transform property is used to capitalize text or
convert text to uppercase or lowercase letters.
•The white-space property is used to control the flow and
formatting of text.
• The text-shadow property is used to set the text shadow
around a text.

Set the text color:-
• We can set the color of text with the following:

color: value;
•Possible values are:-

- color name - example:(red, black...)

- hexadecimal number - example:
(#ff0000, #000000)

- RGB color code - example:

(rgb(255, 0, 0), rgb(0, 0, 0))

Set the text color:-
• Following is the example which demonstrates how to set the
text color. Possible value could be any color name in any valid
format.

<p style="color:red;">

This text will be written in red.

</p>

This will produce following result:-

This text will be written in red.

Set the text direction :-
•We can set the direction of text with the following:

direction: value;

- ltr

- rtl
•Example:-

<p style="direction:rtl;">

This text will be renedered from right to left

</p>

Set the space between characters:-
•We can adjust the space between letters in the following
manner:-
letter-spacing: value;
•Setting the value to 0, prevents the text from justifying. You
can use negative values.

- normal
- length

Set the space between characters:-
•Following is the example which demonstrates how to set the
space between characters.

<p style="letter-spacing:5px;">

This text is having space between letters.

</p>

- This will produce following result: -
T h i s t e x t i s h a v i n g s p a c e b e t w e

e n l e t t e r s.

Set the space between words:-
•We can adjust the space between words in the following
manner :-

word-spacing: value;
•We can use negative values.

•Possible values are :-

- normal

- length

Set the space between words:-
•Following is the example which demonstrates how to set
the space between words:-

<p style="word-spacing:5px;">

This text is having space between words.

</p>

-This will produce following result:-

This text is having space between words.

Set the text indent:-
• We can indent the first line of text in an (X)HTML element
with the following:-

text-indent: value;


- length

- percentage

Set the text alignment:-
•We can align text with the following:-

text-align: value;


- left

- right

- center

- justify

Decorating the text:-
• You can decorate text with the following:-

text-decoration: value;
•Possible values are :-

- none

- underline

- overline

- line through

- blink

Set the text cases:-
• We can control the size of letters in an (X)HTML element
with the following:-

text-transform: value;
• Possible values are

- none

- capitalize

- lowercase

- uppercase

Set the white space between
text:-
• We can control the whitespace in an (X)HTML element with
the following:-

white-space: value;
• Possible values are

- normal

- pre

-nowrap

Set the white space between
text:-
•Example:-

<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>

- This will produce following result:-

This text has a line break

and the white-space pre setting tells the browser to
honor it just like the HTML pre tag.

Set the text shadow:-
•Following is the example which demonstrates how to set the
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>

• This may not be supported by all the browsers.

Setting Fonts using CSS
We can set following font properties of an element:-
• The font-family property is used to change the face of a font.
•The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how
bold or light a font appears.
• The font-size property is used to increase or decrease the size
of a font.
• The font property is used as shorthand to specify a number of
other font properties.

Font- family Property :-
•In CSS, there are two types of font family names:

- generic family - a group of font families with a similar
look (like "Serif" or "Monospace")
- font family - a specific font family (like "Times New
Roman" or "Arial")

• Format:-
font-family:"Times New Roman", Times, serif;

Font- family Property :-

Generic family Font family Description

Serif fonts have small lines at
Serif Times New Roman the ends on some characters
Georgia

"Sans" means without - these
Sans-serif Arial fonts do not have the lines at
Verdana the ends of characters

All monospace characters have
Monospace Courier New the same width
Lucida Console

Font- family Property:-
• If the name of a font family is more than one word, it must be
in quotation marks, like font-family The font family of a text
is set with the font-family property.
• The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first
font, it tries the next font.
• Start with the font you want, and end with a generic family.
• More than one font family is specified in a comma-separated
list:
Example:-
p{font-family:"Times New Roman", Times, serif;}

Set the font style:-
•We can set the style of text in a element with the font-style
property
font-style: value;
- normal - The text is shown normally
- italic - The text is shown in italics
- oblique - The text is "leaning" (oblique is very similar
to italic, but less supported)
• Example:-
p.normal {font-style:normal;}

Set the font variant:-
•We can set the variant of text within an element with the
font-variant Property
font-variant: value;
- normal
- small-caps - displayed when all the letters of the word
are in capitals with uppercase characters slightly larger
than lowercase.
•Later versions of CSS may support additional variants such as
- condensed
- expanded
- small-caps numerals or other custom variants.

Set the font weight:-
•We can control the weight of text in an element with the
font-weight property:-
font-weight: value;
- lighter
- normal
- bold | bolder
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• The bolder and lighter values are relative to the inherited
font weight, while the other values are absolute font weights.

Set the font weight:-
Note:-
•Since not all fonts have nine possible display weights some of
the weights may be grouped together in assignment.
•If the specified weight is not available, an alternate will be
chosen on the following basis:-
- 500 may be switched with 400, and vice versa
- 100-300 may be assigned to the next lighter weight, if
any, or the next darker weight otherwise
- 600-900 may be assigned to the next darker weight, if
any, or the next lighter weight otherwise

Set the font size adjust: -
•We can set the font size adjust of an element.

font-size-adjust: value;
•This property enables you to adjust the x-height to make
fonts more legible.
• Possible value could be any number.

•Example:-

<p style="font-size-adjust:0.61;">

This text is using a font-size-adjust value.

</p>

Setting the Font property:-
•We can use the font property to set all the font properties at
once.

font:value;
• Example :-

<p style="font:italic small-caps bold 15px
georgia;">

Applying all the properties on the text at once. </p>

- This will produce following result:

APPLYING ALL THE PROPERTIES ON THE

Setting Backgrounds using
CSS
We can set 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.

Setting Backgrounds using
CSS
• 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 shorthand to
specify a number of other background properties.

Set the background color:-
•We can specifically declare a color for the background of an
element using the background-color property.
background-color: value;
- color name
- hexadecimal number
- RGB color code
- transparent
•Example:-
<p style="background-color:yellow;"> This text has a yellow
background color. </p>

Set the background image:-

•We can set an image for the background of an element using
the background-image property.

background-image: url(path_to_image);

•Possible Values are:-

- url

- none

Repeat the background image:-
•We can set if an image set as a background of an element is to
repeat(across=x and/or down=y) if image is small, using the
background-repeat property.

background-repeat: value;
• possible values are:-

- repeat

- repeat-x | repeat-y
• We can use no-repeat value for background-repeat property if
you don't want to repeat an image, in this case image will
display only once.

Set the background image
position:
• We can position an image used for the background of an
element using the background-position property.
background-position: value;
- top left | top center | top right
- center | leftcenter | centercenter
- rightbottom | leftbottom | centerbottom
- rightx-% y-%
- x-pos y-pos

Set the background
attachment:-
•If we are using an image as a background. We can set whether
the background scrolls with the page or is fixed when the user
scrolls down the page with the background-attachment
property

background-attachment: value;
• Possible values are:-

- fixed

- scroll

Set the background property:-
•We can style the background of an element in one declaration
with the background property.
background: #ffffff url(path_to_image) top left
no-repeat fixed;
• Possible Values:-
- attachment
- color
- image
- position
- repeat

CSS – Images
We can set following image properties using CSS.:-
• The border property is used to set the width of an
image border.
• The height property is used to set the height of an
image.
• The width property is used to set the width of an
image.
• The -moz-opacity property is used to set the opacity
of an image.

The image border Property:-
•The border property of an image is used to set the width of an
image border.
•This property can have a value in length or in %.

• A width of zero pixels means no border.

• Example:-

<img style="border:0px;" src="/images/css.gif" /> <br>
<img style="border:3px dashed red;”
src="/images/css.gif" />

The image height Property:-
•The height property of an image is used to set the height of an
image.

•While giving value in %, it applies it in respect of the box in
which an image is available.
•Example:-

<img style="border:1px solid red; height:100px;"
src="/images/css.gif" /> <br /> <img style="border:1px
solid red; height:50%;" src="/images/css.gif" />

The image width Property:-
•The width property of an image is used to set the width of an
image.

•While giving value in %, it applies it in respect of the box in
which an image is available.
• Example:-

<img style="border:1px solid red; width:100px;"
src="/images/css.gif" /> <br /> <img style="border:1px
solid red; width:100%;" src="/images/css.gif" />

The -moz-opacity Property:-
• The -moz-opacity property of an image 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 (The same
things goes for the CSS3-valid syntax opacity:x).
• In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100.
A lower value makes the element more transparent.

CSS – Links
We can set different properties of a hyper link using CSS:-
• 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 :focus like :hover, but this one is for users that are
not using a mouse and are tabbing through the links via
there keyboards tab key, it sets the color a link changes
to as the user tabs through the links
• The :active Signifies an element on which the user is

CSS – Links
•Usually these all properties are kept in the header part of
HTML document.
• 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.:-
a:link {color: #000000;}
a:visited {color: #006600;}
a:hover {color: #FFCC00;}
a:active {color: #FF00CC;}
</style>

Set the color of Links:-
• To set the link color, use a:link

• Example :-


a:link {color:#000000}

</style>

<a href="/html/index.html“>Black Link</a>

Set the color of Visited Links:-
• To set the color of visited links, use a:visited

• Example:-


a:visited {color: #006600}

</style>

<a href="/html/index.html">Click this link</a>

- Once you will click this link, it will change its color to
green.

Change the color of links when
mouse is over:-
•To change the color of links when we bring a mouse pointer
over that link, use a:hover
•Example:-
a:hover {color: #FFCC00}
</style>
<a href="/html/index.html">Bring Mouse Here</a>
- Now you bring your mouse over this link and you will see
that it changes its color to yellow.

Change the color of active
links:-
• To change the color of active links, use a:active

• Example:-


a:active {color: #FF00CC;}

</style>

<a href="/html/index.htm">Click This Link</a>

- This will change it color to pink when user clicks it.

CSS – Tables
We can set following properties of a table:-
• The border-collapse Specifies whether the browser
should control the appearance of adjacent borders.
• The border-spacing Specifies the width that should
appear between table cells.
• The caption-side property is to control the placement of
the table caption.
• The table-layout Allows browsers to speed up layout of
a table.

The border-collapse Property:-
•Specifies whether the browser should control the appearance
of adjacent borders.

•This property can have two values collapse and separate.

• collapse- the appearance of adjacent borders that touch each
other

• separate - each cell should maintain its style.

• Format:-

border-collapse: collapse;

border- collapse: separate;

The border-spacing Property:-
•The border-spacing property specifies the distance that
separates adjacent cells borders.
•It can take either one or two values; these should be units of
length.
•If we provide one value it will applies to both vertical and
horizontal borders
• If we specify two values, the first refers to the horizontal
spacing and the second to the vertical spacing
• Format:-
border-spacing:10px;

The caption-side Property:-
• We use the caption-side property to control the placement of
the table caption.
• The caption-side property allows us to specify where the
content of a <caption> element should be placed in
relationship to the table.
• The table that follows lists the possible values :-

- top | bottom

- left | right.

The empty-cells Property:-
• The empty-cells property indicates whether a cell without
any content should have a border displayed.

empty- cells: value;
•This property can have one of the three values:-

- show

- hide

- inherit.

The table-layout Property:-
• The table-layout property is supposed to help you control
how a browser should render or lay out a table.
•This property can have one of the three values :-

- fixed

- auto

- inherit.
•This property is not supported by many browsers so do not
rely on this property.

CSS for Page Layout
• All HTML elements can be considered as boxes. In CSS, the
term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around
HTML elements, and it consists of:-
- margins
- borders
- padding
- the actual content.
• The box model allows us to place a border around elements and
space elements in relation to other elements.

CSS for Page Layout

I appreciate the prompt delivery
of
the pack of star disks.

padding border
margin

CSS – Margins
• The margin property defines the space around an HTML
element.
• It is possible to use negative values to overlap content.

• The values of the margin property are not inherited by child
elements.
• The adjacent vertical margins (top and bottom margins) will
collapse into each other so that the distance between the
blocks is not the sum of the margins, but only the greater of
the two margins or the same size as one margin if both are
equal..

CSS – Margins
There are following four properties to set an element margin:-
• The margin A shorthand property for setting the margin
properties in one declaration.
• The margin-bottom Specifies the bottom margin of an
element.
• The margin-top Specifies the top margin of an element.

• The margin-left Specifies the left margin of an element.

• The margin-right Specifies the right margin of an
element

The margin Property:-
• The margin property allows you set all of the properties for
the four margins in one declaration.
• Format :-

margin: value;

- length

- percentage

- auto

• We can also declare all the margins of an element in a single property
as follows:-

margin: 10px 10px 10px 10px;

The order of values as follows:-

1. top 2. right 3. bottom 4. left
• If only one value is declared, it sets the margin on all sides.

margin: 10px;
•If you only declare two or three values, the undeclared values are
taken from the opposing side.

margin: 10px 10px; /* 2 values */

margin: 10px 10px 10px; /* 3 values */

• We can set the margin property to negative values. If you
do not declare the margin value of an element, the margin is
0 (zero).

margin: -10px;
• Elements like paragraphs have default margins in some
browsers, to combat this set the margin to 0 (zero).

p {margin: 0;}
• We do not have to add px (pixels) or whatever units you
use, if the value is 0 (zero).

The margin-bottom Property:-
• The margin-bottom property allows you set bottom margin of
an element.
• It can have a value in length, % or auto.

• Format:-

margin-bottom: value;
• Example:-

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

This is a paragraph with a specified bottom margin</p>

The margin-top Property:-
• The margin-top property allows you set top margin of an
element.
•It can have a value in length, % or auto.

• Format:-

margin-top: value;
• Example:-

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

The margin-left Property:-
•The margin-left property allows you set left margin of an
element.

•Format:-

margin-left: value;
• Example:-

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

This is a paragraph with a specified left margin</p>

The margin-right Property:-
•The margin-right property allows you set right margin of an
element.

•Format:-

margin-right: value;
• Example:-

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

This is a paragraph with a specified right margin</p>

CSS – Borders
•The border properties allow you to specify how the border
of the box representing an element should look.

border: value;
• There are three possibilities of values we 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:-
• We can set the color of a border independently with the
border-color property.

border-color: value;
• Possible Values are:-

- color name

- hexadecimal number

- RGB color code

- transparent

The border-color Property:-
• The border-color property allows you to change the color of
the border surrounding an element.
• We can individually change the color of the bottom, left, top
and right sides of an element's border 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.

The border-style Property:-
• We can set the style of a border independently with the border-style
property.
border-style: value;
- 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.

The border-style Property:-
• We can individually change the style of the bottom, left,
top, and right borders of an element using 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.

The border-width Property:-
• The border-width property allows us to set the width of an
element borders.
border-width: value;
• The value of this property could be:-
- a length in px, pt or cm
- thin
- medium
- thick.

The border-width Property:-
• We can individually change the width of the bottom, top,
left, and right borders of an element as:-

- 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.

CSS – Paddings
• The padding property allows you to specify how much space
should appear between the content of an element and its border:

padding: value;
•The value of this attribute should be either

- a length

- a percentage

- 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.

CSS – Paddings
• We 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.

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

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

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

- The padding Serves as shorthand for the preceding
properties.

CSS - Lists
• Lists are very helpful in conveying a set of either numbered or bulleted
points.
• There are 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.
- 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.
- The list-style-image Specifies an image for the marker rather
than a bullet point or number.
- The list-style Serves as shorthand for the preceding properties.
- The marker-offset Specifies the distance between a marker and
the text in the list.

The list-style-type Property:-
•This allows us to control the shape or style of bullet point
(also known as a marker) in the case of unordered lists, and
the style of numbering characters in ordered lists.
• Format:- list-style-type: value;
• The values which can be used for an unordered list: -
Value Description
none NA

disc (default) A filled-in circle

circle An empty circle

square A filled-in square

The list-style-type Property:-
• The values which can be used for an ordered list: -

Value Description Example
decimal Number 1,2,3,4,5
decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase a, b, c, d, e
alphanumeric characters
upper-alpha Uppercase A, B, C, D, E
alphanumeric characters
lower-roman Lowercase Roman i, ii, iii, iv, v
numerals
upper-roman Uppercase Roman I, II, III, IV, V
numerals

The list-style-position Property:
• The list-style-position property indicates whether the marker
should appear inside or outside of the box containing the bullet
points.
• Format:- list-style-position: value;
•It can have one the two values:-
Value Description
none NA

If the text goes onto a second line, the text will wrap
underneath the marker. It will also appear indented to
inside where the text would have started if the list had a value of
outside.
If the text goes onto a second line, the text will be
outside aligned with the start of the first line (to the right of the
bullet).

The list-style-image Property:-
• The list-style-image allows us to specify an image so that
you can use your own bullet style.
• The syntax is as follows, similar to the background-image
property with the letters url starting the value of the property
followed by the URL in brackets.

list-style-image: url(path_to_image.gif, jpg or
png);
•If it does not find given image then default bullets are used.

The list-style Property:-
• The list-style allows you to specify all the list properties
into a single expression.
•These properties can appear in any order.

• Format :-

list-style: value value;

- values can be any of the list-style-type, list-style-position,
list-style-image properties.

The marker-offset Property:-
• The marker-offset property allows you to specify the
distance between the marker and the text relating to that
marker.
• Format :-

marker- offset: value;

- Its value should be a length.
• This property is not supported in IE 6 or Netscape 7.

CSS – Cursors
• The cursor property of CSS allows you to specify the type of
cursor that should be displayed to the user.
cursor: value;
•One good usage of this property is in using images for submit
buttons on forms.
•By default, when a cursor hovers over a link, the cursor changed
from a pointer to a hand.
• For a submit button on a form this does not happen. Therefore,
using the cursor property to change the cursor to a hand
whenever someone hovers over an image that is a submit button.
•This provides a visual clue that they can click it.

CSS – Cursors
• The possible values for the cursor property:-
- auto - Shape of the cursor depends on the context area
it is over. For example an I over text, a hand
over a link, and so on...
- crosshair - A crosshair or plus sign
- default - An arrow
- pointer - A pointing hand (in IE 4 this value is hand)
- move - The I bar
- e-resize - The cursor indicates that an edge of a box is to
be moved right (east)

CSS – Cursors
- ne-resize - The cursor indicates that an edge of a box is to
be moved up and right (north/east)
- nw- resize - The cursor indicates that an edge of a box is
to be moved up and left (north/west)
- text - The I bar
- wait - An hour glass
- help - A question mark or balloon, ideal for use over help
buttons
- <url> - The source of a cursor image file

Display
• We can control how an element is displayed with the
display property :-

display: value;
• Possible Values are:-

- block - Creates a line break before and after the
element

- inline - No line break is created

- list-item - Creates a line break before and after the
element and adds a list item
marker

Limitations
• Poor controls for flexible layouts
• Selectors are unable to ascend
• Vertical control limitations
• Absence of expressions
• Lack of column declaration
• Cannot explicitly declare new scope independently of
position
• Pseudo-class dynamic behavior not controllable
• Cannot name rules
• Cannot include styles from a rule into another rule

Cascading Style Sheets(CSS)

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Cascading Style Sheets(CSS) (20)

Recently uploaded (20)

Cascading Style Sheets(CSS)