Cascading Style Sheet

(CSS)
Introduction
 HTML
 Is primarily concerned with the content
rather than the details of how that content is
presented in the browser.
 Tags store the presentation information for
the browser.
 Browsers use the default values for those
properties if no values are specified
Prerequisite
 Basic word processing using any text
editor.
 Developing simple Web Pages using
HTML or XHTML.
What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML
elements
 CSS is used to control the style of a web
document in a simple and easy way.
 Styles were added to HTML 4.0 to solve
a problem
 External Style Sheets can save a lot of
work, they are stored in CSS files
 Why to Learn CSS?
 Some of the key advantages of learning CSS:
 Create Stunning Web site - CSS handles the look and feel part of a
web page. Using CSS, you can control the color of the text, the style
of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colors are used, layout designs,
variations in display for different devices and screen sizes as well as a
variety of other effects.
 Become a web designer - If you want to start a career as a
professional web designer, HTML and CSS designing is a must skill.
 Control web - CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML document. Most
commonly, CSS is combined with the markup languages HTML or
XHTML.
 Learn other languages - Once you understands the basic of HTML
and CSS then other related technologies like JavaScript, PHP, or
angular are become easier to understand.
 Applications of CSS
 CSS is one of the most widely used style language over the web.
 CSS saves time - You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
 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 has 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. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
 Global web standards - Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.
Idea of Style
 Idea borrowed from the word processors and
desktop systems
 Imposes many styles for the text
 CSS
 Is used to control the appearance of the web pages
 Allows you to associate rules with the elements that
appear in the document
 Rule
 selector { property : value ;}
 Many property-value pairs must be separated by
semicolon.
 CSS declaration always ends with a semicolon
Comments in CSS
 Comments are used to explain your code, and
may help you when you edit the source code at
a later date. Comments are ignored by
browsers.
 A CSS comment begins with "/*", and ends
with "*/", like this:

 /*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Levels of Style Sheet

 Inline Style Sheet

 Document-level Style Sheet
 External-level Style Sheet
Multiple Style Sheets
 If some properties have been set for the same
selector in different style sheets, the values will be
inherited from the more specific style sheet.
 For example, an external style sheet has these properties for
the h3 selector:
 h3
{ color:red; text-align:left; font-size:8pt; }
 And an internal style sheet has these properties for the h3
selector:
 h3
{ text-align:right; font-size:20pt; }
 If the page with the internal style sheet also links
to the external style sheet the properties for h3
will be:
 color:red;
text-align:right;
font-size:20pt;
 The color is inherited from the external style sheet
and the text-alignment and the font-size is
replace by the internal style sheet.
Forms of Selector

 Simple Selector Form

 Class Selectors
 Generic Selectors
 id Selectors
 Universal Selectors
Simple Selector Form
 Applies to single or to the list of selectors
separated by commas
 Property values in the rule applies to all
occurrences of the named element
 Hierarchy can also be set to selectors
separated by whitespace (they are called
as descendant selector/ contextual
selector)
 Eg: h2{font-type: verdana;}
 body b em {font-size:14pt;}
Class Selector
 Allows different occurrences of the same tag to
use different style specifications.
 It is defined in the style element
 Do not start a class name with a number!
(supported in Internet Explorer)
 Syntax
 tag.classname {property-value list}
 Eg:
 p.normal { font-size:12pt
 color:blue}
 Invoking
 <p class=“normal”>
 Text goes here
 </p>
Generic Selector
 Applies to contents of more than one kind of
tag
 These are not defined with a tag name , in
place of tag name you need to use the name of
the generic class.
 It begins with a period
 Syntax:
 .(generic class name){property-value list}
 Eg:
 .warning{font-size:10pt;
 color:red;}
 <p class=“warning”>
 Do not sit, wet paint
</p>
Id Selector
 Allows the application of a style to one specific
element
 Do not start an ID name with a number! (It will
not work in Firefox)
 Syntax
 #specific-id{property-value list}

 Eg:
#selection14{ font-size:20pt;}
<h2 id=“selection14”>
The id selector comes here
</h2>
Universal Selector

 Allows to apply styles to all elements in the

document
 It is represented by *
 Very rarely used
 Syntax
 *{property-list}
 Eg:
*{color:red;}
This makes all the element in the document
red….
Pseudo classes
 Styles that apply when something happens
rather than because the target element simply
exist.
 They are used to add special effects to some
selectors.
 The names of the pseudo class begin with a
colon.
 Syntax:
 selector:pseudo-class{property-value}
 CSS classes can also be included with pseudo
classes
 Syntax:
 selector.class:pseudo-class{property-value}
External Style Sheet
 Calling external style sheet in a html
document using
 <link> tag
 @import url(filename);

 Usage of <link> tag

 Preferably used in the head section
 <link rel=“stylesheet” type=“text/css”
href = “filename.css / url of the css file” />
rel attribute - specifies the relationship of the
linked-to document to the document in which the
url appears
 Usage of @import statement
 Eg:
 @import url(file name);
 Note:
 @ import can appear only at the beginning of the
content of the style element
 The imported file can contain markup as well as
the style rules
 Some import file contains other @import directives
along with some style rules
External style sheets can be validates with
services provided by
http://jigsaw.w3.org/css-validator/validator-upload.html
CSS Text
Text Color
 The color property is used to set the color of the
text.
 The color can be specified by:
 name - a color name, like "red"

 RGB - an RGB value, like "rgb(255,0,0)"

 Hex - a hex value, like "#ff0000"

 The default color for a page is defined in the body

selector.
 Eg:
 body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
 For W3C compliant CSS: If you define the color property, you
must also define the background-color property.
Text Alignment
 The text-align property is used to set the
horizontal alignment of a text.
 Text can be centered, or aligned to the left or
right, or justified.
 Eg:
 h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
 Text Decoration
 The text-decoration property is used to set or
remove decorations from text.
 Mostly used to remove underlines from links for
design purposes:
 Eg:
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

 It is not recommended to underline text that is not a link, as

this often confuses users
Text Transformation
 The text-transform property is used to specify
uppercase and lowercase letters in a text.
 It can be used to turn everything into uppercase
or lowercase letters, or capitalize the first letter of
each word.
 Eg:
 p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
 The text-indentation property is used to specify
the indentation of the first line of a text.
 Eg:
 p {text-indent:50px;}
Property Value Form
Font Property
Intoduction

 CSS font properties define the font

family, boldness, size, and the style of a
text.
 It is the most commonly used style
property
 Includes several options like sizes, families,
variant sizes, weights & text decoration.
CSS Font Families
 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")
 Generic family Font family Description

Serif Times New Roman Serif fonts have small lines at

Georgia the ends on some characters

Sans-serif Arial "Sans" means without - these

Verdana fonts do not have the lines at
the ends of characters
Monospace Courier New All monospace characters have
Lucida Console the same width
Font Family
 The font-family property follows "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, to let the browser pick a similar font
in the generic family, if no other fonts are available.
 Note: If the name of a font family is more than one
word, it must be in quotation marks, like font-
family: "Times New Roman".
 More than one font family is specified in a comma-
separated list:
 Example p{font-family:"Times New Roman", Times,
serif;}
Web Safe Font Combination
 Serif Fonts
 Georgia, serif "Palatino Linotype"
 "Book Antiqua", Palatino, serif
 "Times New Roman", Times, serif
 Sans-Serif Fonts
 Arial, Helvetica, sans-serif, Arial Black, Gadget, sans-serif
 "Comic Sans MS", cursive, sans-serif
 Impact, Charcoal, sans-serif
 "Lucida Sans Unicode", "Lucida Grande", sans-serif
 Tahoma, Geneva, sans-serif
 "Trebuchet MS", Helvetica, sans-serif
 Verdana, Geneva, sans-serif
 Monospace Fonts
 "Courier New", Courier, monospace
 "Lucida Console", Monaco, monospace
Font Style
 The font-style property is mostly used to specify
italic text.
 This property has three values:
 normal, italic, oblique
 Eg:
 p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font Size
 The font-size property sets the size of the text.
 The font-size value can be an absolute, or relative
size.
 Absolute size:
 Sets the text to a specified size
 Does not allow a user to change the text size in all browsers
 Is useful when the physical size of the output is known
 Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
 Setting of font size with pixel
 h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;} (Has problem in IE)
 Set Font Size With Em
 To avoid the resizing problem with Internet Explorer, many
developers use em instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size.
 The default text size in browsers is 16px.
 Default size of 1em is 16px.
 The size can be calculated from pixels to em using this
formula: pixels/16=em
 h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Font size and Font-Weight Values
 Font-size
 xx-small ,x-small, small, medium, large, x-large
xx-large, smaller, larger, length, %, inherit
 Font-Weight
 normal ,bold, bolder, lighter,100, 200, 300, 400,
500, 600,700,800,900,inherit
CSS List
CSS List
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered
lists
 Set an image as the list item marker
List
 In HTML, there are two types of lists:
 unordered lists - the list items are marked
with bullets
 ordered lists - the list items are marked with
numbers or letters
 With CSS, lists can be styled further, and
images can be used as the list item marker.
 Different List Item Markers
 The type of list item marker is specified with the
list-style-type property:
 Eg:
 ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
 ul
{ list-style-image: url('sqpurple.gif'); }
 Two presentation details of lists are specified in
XHTML documents
 1. Shape of the bullets for the unordered list
 2. Sequence of values that precede the items in the
ordered lists
 CSS uses list-style-type property to specify both
ordered and unordered ones
Unordered Lists
 The list-style-type property can be set to
 Disc, circle, square, none or any image as the
bullet.
 The image is specified using the list-style-
image property with url form.
 Default is disc.
Eg:1.<style type=“text/css”>
ul {list-style-type:square}
</style>
<h3> Mouth Watering Pastries </h3>
<ul>
<li> Pineapple and Vanilla </li>
<li> Litchi </li>
<li> Black Current </li>
</ul>

2. <style type=“text/css”>
li.image{list-style-image:url(cakes.gif);}
</style>
…………..
<li class=“image”> Yummy Cake </li>
3. <style type=“text/css”>
li.disc{list-style-type:disc;}
li.disc{list-style-type:square;}
li.disc{list-style-type:circle;}
</style>

Property Values Sequence Type First Four Values

Decimal Arabic Numerals 1, 2, 3, 4

Upper-alpha Uppercase Letters A, B, C, D

Lower-alpha Lowercase Letters a, b, c, d

Upper-roman Uppercase Roman I, II, III, IV

Numerals
Lower-roman Lowercase Roman i, ii, iii, iv
Numerals
 <span> tag
 There may be situations when we want a word and
phrase in a line appear in different font size and color.
 Then the <span> tag is designed for this purpose
 Eg:

<style type=“text/css”>
.spancolored{font-family:Times New Roman;
color:burlywood;}
</style>
<body>
<p> Notice the difference in the <span
class=“spancolored”> font family and color of the text
</p>
</body>
 It is used to group inline-elements in a document.
 Provides no visual change by itself.
 It provides a way to add a hook to a part of a text or
a part of a document.
 When the text is hooked in a span element you can
add styles to the content, or manipulate the content
with for example JavaScript.
 <div> tag
 It is also applied to a section of document but not to
each paragraph
 As with span there is no implied layout for the
content of the <div> tag
 Primary use of <div> tag is to give presentation
details for a section or a division of a document.
 The <div> tag defines a division or a section in an
HTML document.
 The <div> tag is often used to group block-elements
to format them with styles.
 Eg:
 <div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
Difference between <span> and
<div> tag
 <span>
 Is used for small chunks of in-line HTML

 Is in-line tag

 Is useful if you apply to specific formatting styles to

text in the middle of a sentence, or some

highlighted places of the web page
 It does not have align attribute

 <div>
 Is a block-tag
 Used to group large chunk of code
 Allows you to create blocks of content and position
elements on the screen
Introduction
 CSS1 givers 60 different properties in
seven categories like
 Fonts
 Lists
 Alignment
 Margins
 Colors
 Backgrounds
 Borders etc.
Forms of Property Value
1. Keyword property value
Used when there are only a few possible values
Predefined ones are large, medium, small
They are case sensitive
2. Number values
Used when no meaningful units can be attached to a
numeric property value
Can be integer or a sequence of digits with a decimal
points ,can be preceded by a + or – sign.
3. Length values
Specified as number followed by a two character
abbreviation of a unit name.
 Commonly used units are
 in – inches , cm-centimeters, mm – millimeter, pt- points,
pc – picas (12 points).
4. Percentage values
Provides a measure that is relative to the previously used
measure for a property value
Are followed by % sign
If preceded by
-plus sign, the percentage is added to the previous
values
-minus sign, the percentage is subtracted from the
previous values
5. URL property values
Can be either be absolute or relative placed in parentheses
preceded by URL
6. Color property values
Can be specified as color names
Color names, RGB, Hexadecimal format.
The Box Model
 All documents elements can have borders
 Borders have same styles such as color
and width
 Elements of Box Model
 Outer Edge
 Margin
 Border
 Padding
 Inner Edge
 Content
The Box Model
 Margin - Clears an area around the border. The
margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding
and content. The border is affected by the
background color of the box
 Padding - Clears an area around the content. The
padding is affected by the background color of the
box
 Content - The content of the box, where text and
images appear
Borders
 Every element has a property border-style
 This controls whether the element’s content
has a border, with the style of the border
 CSS1 requires that the borders be available
for any element – only required style is solid
 CSS2 provides several different border styles
 dotted, dashed and double(supported by IE7 and
FX2
 The styles of one of the four sides of an
element can be set with
 border-top-style
 border-bottom-style
 border-left-style
 border-right-style
 The border-width property
 Specifies the thickness of a border
 Possible values are thin, medium, thick or pixel
value in length
 Width of each of the four borders of an element
can be different
  border-top-width
 border-bottom-width
 border-left-width
 border-right-width
 The border-color property
 Individual borders of the element can be colored in
CSS2
 border-top-color
 border-bottom-color
 border-left-color
 border-right-color
 All of the above are supported by IE7 and FX2.
 Margins and Padding
 The margin property can have from one to four values.
 margin:25px 50px 75px 100px;
 top margin is 25px

 right margin is 50px

 bottom margin is 75px

 left margin is 100px

 margin:25px 50px 75px;

 top margin is 25px

 right and left margins are 50px

 bottom margin is 75px

 margin:25px 50px;
 top and bottom margins are 25px

 right and left margins are 50px

 margin:25px;
 all four margins are 25px
Conflict Resolution
What is the problem?
 Two different values for the same property
element
 Problems with styles
 If a property on a particular element has a
property value assigned by some style sheet and
also inherits a value for the same property
 Different origins of the specifications of the
property values.
 Selector having different levels of precedence
 p.special {font-style:italic !important; - (weight )
 font-size:14 }

Conflict Resolution
 It is a multistage process
 Step 1:
 Gather the style specifications form the three
possible levels of style sheet
 Sort them in order by the relative precedence
of the style sheet levels
 Step 2:
 All of the available specifications are sorted
by origin and weight
First option : Conflict Resolution rules
1. Important declarations with the user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser origin

User-origin specifications are considered to

have the highest precedence

If still the conflict is not resolved then?

Second Option:
Sort based on the following rules, in which the first
has the highest precedence :
1. id selectors
2. Class and pseudo-class selectors
3. Contextual selectors
4. Universal selectors

Third Option
Most recently seen specification

The whole sorting process that is used to resolve style

specification conflicts is called the cascade