Lecture

Topic: Cascading Style Sheet (CSS)

By
Dr. Divya Rishi Sahu
Assistant Professor, CSE Department
Samrat Ashok Technological Institute (SATI), Vidisha
 Outline
In this lecture you will learn-
1. Overview
1. What is CSS?
2. Why to use CSS?
3. CSS for Skinning your Website
2. Structure
1. CSS Syntax Introduction
2. Three places CSS can be defined
3. CSS Syntax Specifics
4. Cascading Inheritance
3. Applied
1. CSS Hands-on
 History
◼ Hakon Wium Lie, along with Dutch programmer
Bert Bos, proposed the idea for Cascading Style
Sheets (CSS) in 1994.
 Lie was working at CERN with Tim Berners-Lee and
Robert Cailliau at the time.
 Their goal was to separate content (HTML) from
presentation (CSS) to make web development more
flexible and easier.

Håkon Wium Lie, Bert Bos, Tim Berners-Lee,

https://www.w3.org/People https://www.w3.org/People/ https://www.w3.org/People/
/howcome/ Bos/ Berners-Lee/
 History
◼ The World Wide Web Consortium (W3C)
adopted the first standardized version of CSS,
CSS1, in 1996.
◼ CSS 2 was released in 1998, and
◼ CSS 3 was published as a set of separate
documents called modules.
 Motivation
◼ HTML markup can be used to represent
 Semantics: h1 means that an element is a top-level
heading
 Presentation: h1 elements look a certain way

◼ It’s advisable to separate semantics from

presentation because:
 It’s easier to present documents on multiple
platforms (browser, cell phone, spoken, …)
 It’s easier to generate documents with consistent
look
 Semantic and presentation changes can be made
independently of one another (division of labor)
 User control of presentation is facilitated
 The Problem with HTML

◼ Cascading Style Sheet

◼ Standards-based set of
properties and attributes to
define styles
◼ Rules to determine how to
apply markup that contains
other markup

◼ Separate Content from Form

 Content is the text and multimedia, marked up to define regions
of specific types
 Form defines the “style” for the content
 The Problem with HTML
◼ HTML was originally intended to describe the content of
a document

◼ Page authors didn’t have to describe the layout

 the browser would take care of that without any formatting tag in
HTML

◼ This is a good engineering approach, but it didn’t satisfy

advertisers and “artists”

◼ As a result, HTML acquired more and more tags to

control appearance
 Content and appearance became more intertwined
 Different browsers displayed things differently, which is a real
problem when appearance is important
 Solution: Limit HTML to...
◼ A language that describes what should be
rendered, but not how it should be rendered

◼ A language that describes the hierarchy and

relationships between parts of a document only
 What is CSS?
◼ CSS stands for Cascading Style Sheets

◼ Styles define how to display HTML elements

◼ Styles are normally stored in Style Sheets

◼ Styles were added to HTML 4.0 to solve a problem

◼ External Style Sheets can save you a lot of work

◼ External Style Sheets are stored in CSS files

◼ Multiple style definitions will cascade into one

 Content vs. Presentation
Content Presentation
Description Description

Cascading
HTML
Style Sheet

Browser

Improved and Consistent End User Experience

 CSS Observations
◼ It is not HTML
 It has its own peculiar syntax

◼ It can be integrated into HTML

◼ It can be called by referencing an external file

◼ It can be applied globally or to a specific HTML

tag
 CSS Versions
◼ CSS 1 - Released in 1996
 Spotty Netscape 4.x support
➢ Netscape pushed their own style sheet language
 IE 4.x was fully CSS1 compliant
 Result: if you have users using Netscape 4.x then
use CSSes with care!
➢ Always test with both browsers!
 Limitations of CSS1
➢ Has almost no support for tables
➢ Makes no provision for downloadable fonts
➢ Lack of media types
 CSS Versions
◼ CSS 2
 Released in 1998
 Extends CSS1
 IE 5.x+ supports most, but not all CSS2 features
 Netscape 6.x claims “unsurpassed support” for CSS1
and CSS2
 Mozilla 1.x is generally considered to have the best
CSS support

◼ CSS 3 have different standards

 Compatibility Issue
◼ CSS1 was partially supported by browsers
Internet Explorer 3, Internet Explorer 4, and
Netscape Navigator 4.7

◼ CSS2 is fully supported by all new versions of

popular Web browsers like: Internet Explorer 6,
Netscape 6, Opera 5, and Micro Browsers for
Mobiles

◼ If browser does not support CSS it will display

page in HTML formatted form, ignoring the styles
 i.e., the styles are themselves displayed
 Disadvantages
◼ The only disadvantage that can be assigned to
CSS is non-compatibility with all internet
browsers

◼ Approx, 85% of users are able to see pages that

use CSS, while the others are not
 Benefits of Using CSS
◼ Separation of the document from the presentation
 Easier coding and maintenance
 Site control

◼ Consistency (Uniformity)
 All pages in the site look the same

◼ Rich design and layout

 Gives finer and increased control on document formatting than can be
placed within HTML documents

◼ Accessibility
 PC browsers, mobiles, PDAs, printers, TVs, users with disabilities,
etc…
 No browser specific requirements, such as plug-ins

◼ It can be used for both HTML and XML pages

◼ Support Skinning
 Why CSS?
The old way:
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
 Why CSS?

◼ Separate Content from Form

 Content
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).

 Form or Style
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
 CSS Skinning
◼ “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin1.css" />

<p class=“info”>My Information 1 goes here</p>

+
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
Some information 1 goes here
 CSS Skinning 2
◼ “Skinning” - changing the look of a page or your site
 Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin2.css" />

<p class=“info”>My Information 1 goes here</p>

+
skin1.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=
Some information goes here.
 CSS Syntax

◼ 3 Elements to a CSS Statement

 Selector
➢ What HTML sections does it affect?
 Property
➢ What attribute of that HTML section will be affected?
 Value
➢ What change will be made to that attribute?
 CSS Syntax
◼ The general syntax is:
 selector {property: value}
or
 selector, ..., selector {
property: value;
...
property: value
}
 where
➢ selector is the tag to be affected (the selector is case-sensitive if
and only if the document language is case-sensitive)
➢ property and value describe the appearance of that tag
➢ spaces after colons and semicolons are optional
➢ a semicolon must be used between property:value pairs, but a
semicolon after the last pair is optional
➢ if the value is multiple words, put quotes around the value
 … CSS Syntax
◼ CSS syntax is very simple –
◼ It’s just a file containing
 a list of selectors (to choose tags) and
 descriptors (to tell what to do with them):

 Example: h1 {color: green; font-family: Verdana}

says that everything included in h1 (HTML heading level 1) tags
should be in the Verdana font and colored green

◼ A CSS file is just a list of these selector/descriptor pairs

 Selectors may be simple HTML tags or XML tags, but CSS also
defines some ways to combine tags
 Descriptors are defined in CSS itself, and there is quite a long
list of them
 CSS Syntax:
Selector Strings
◼ Single element type:

◼ Multiple element types:

◼ All element types:

◼ Specific elements by id:

 CSS Syntax:
Selector Strings
◼ Elements belonging to a style class:

class selector: begins with a period .

 Referencing a style class in HTML:

this span belongs to three style classes

◼ Elements of a certain type and class:

this rule applies only to span’s belonging to class special

 Example of CSS
◼ /* This is a comment */

◼ h1,h2,h3 {font-family: Arial, sans-serif;} /* use 1st available font */

◼ p, table, li, address { /* apply to all these tags */

font-family: "Courier New"; /* quote values containing spaces */
margin-left: 15pt; /* specify indentation */
}

◼ p, li, th, td {font-size: 80%;} /* 80% of size in containing element */

◼ th {background-color:#FAEBD7} /* colors can be specified in hex */

◼ body { background-color: #ffffff;}

◼ h1,h2,h3,hr {color:brown;} /* adds to what we said before */

◼ a:link {color:darkred} /* an unvisited link */

◼ a:visited {color:darkred} /* a link that has been visited */

◼ a:active {color:red} /* a link now being visited */

◼ a:hover {color:red} /* when the mouse hovers over it */

 Three CSS Definition Locations
◼ Inline: the “style” attribute
<p style=“font-color:red;font-size:10px;”>Content</p>
Note, the selector for inline CSS is the tag which contains the style attribute.

◼ Internal/Embedded: the <style> markup tag

<html><head><style>
p{ background-color: Red;
font-family: serif;
font-color: White; }
</style></head><body>
<p>Content</p>
</body></html>

◼ External/Linked: the .css stylesheet file

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
 Inline Styles
◼ CSS enabled browsers will recognize a new STYLE attribute for most tags

◼ Must use style sheet syntax for the attribute value of STYLE

◼ CSS attributes and values must be enclosed in double quotes

◼ Example:
 <h1 style="color:gold; font-family:sans-serif"> Applying
an inline style</h1>

◼ Advantage:
 Useful if you only want a small amount of markup

◼ Disadvantages:
 Mixes display information into HTML
 Clutters up HTML code
 Can’t use full range of CSS features since contextual selectors, for example,
like li b{color:green} may not be specifiable inline.
 HTML vs. CSS Attribute Syntax
◼ Handling multiple attributes
 HTML: Use one or more spaces or lines to separate
attributes in the same tag
 CSS: Separate attributes with a single semicolon
(spaces and extra lines optional)

◼ Linking attributes with their values

 HTML: attribute=“attribute-value”
 CSS: attribute:attribute-value
 Embedded Styles
◼ In HTML, within the <head> element:
<style TYPE="text/css">
<!--
CSS Style Sheet
-->
</style>

◼ Note: Embedding the style sheet within a

comment is a sneaky way of hiding it from older
browsers that don’t understand CSS
 These older browsers display the style sheet
commands as if they are part of the document body
 Embedded Style Example

Must be inside <head> section

<head>

<title>Cascading Style Sheets</title> Note use of

brackets
<style>

h2,h3 {color:green; font-family:sans-serif}

h4,h5,h6 {color:blue; font-family:sans-serif}

</style>
Allows one style to be
</head> applied simultaneously
to many tags
 External Style Sheets
◼ This is a file of pure CSS commands

◼ You apply these styles by referencing the file:

 <link> tag
 @import tag (offers more options)

◼ Both methods require a reference to the external

style sheet inside the <head> tag

◼ Advantage: allows you to apply the same style

easily to multiple HTML files
 A convenient way to give a site a standard “look and
feel”
 Using an External Style Sheet
◼ Step 1: Place a number of CSS commands in a
file (by convention with a .css extension,
although .css is not required)

◼ Step 2: Reference the external style sheet with a

<link> or @import command in your HTML

◼ Step 3: Decide if you want to selectively override

the external style sheet attributes for a particular
page using embedded or inline styles
 CSS File
◼ Simply place commands in a text file using only
CSS syntax in the file, ex:
 body {color: brown; background-color: antiquewhite}
 h1 {color:brown; font-family:sans-serif}

◼ Save the file with a recommended .css extension

◼ Must be published to a web server as any other

file would be to be used on the web

◼ Reference in your HTML with the <link> or

@import commands
 CSS Reference with <link>
◼ <link> can be used to reference external files
other than a CSS

◼ Link syntax:
 <link href=“url” rel=“relation_type”
type=“link_type”> … </link>

◼ Link attributes
 href: location of the external file
 rel: must be “stylesheet” to tell HTML the link is
for a stylesheet
 type: usually “text/css”, the MIME type needed to
download the file
 <link> example
<head>

<title>Cascading Style Sheets</title>

<link href="css-2.css" rel="stylesheet"

type="text/css" />

</head>
 Resolving Style Preferences
◼ Inline style

◼ If no inline, embedded style is applied

◼ If no embedded style, external style sheet

applied

◼ Any undefined attributes use web browser

default
 Cascading Order
◼ What style will be used when there is more than
one style specified for an HTML element?
 styles will "cascade" into a new "virtual" Style Sheet
by the following rules (number four has the highest
priority):
1. Browser default

2. External Style Sheet

3. Internal Style Sheet

4. Inline Style
 @import
◼ Can be used in the <style> tag
or
◼ Can be used in a .css file by itself as a CSS
command

◼ Essentially allows for multiple inheritance of style

sheets attributes
 For example, a subsite style sheet may override a
general site style sheet
 An HTML page may override the subsite’s style sheet

◼ Can’t be used with Netscape 4.x

 Supported by HTML 4.0 browsers only
 Cascading Inheritance

 Nested elements inherit

the properties from the
its parent

 If you specify a style for the body { font-family: Verdana;

<body> tag it will affect all font-size: 14px; }
content in your HTML page.

 If you want to override body { font-family: Verdana;

inherited settings, you font-size: 1.1em; }
need to specify a style in .littletext { font-size: 8px; }
a more local element <body>
This text is larger.
<p class=“littletext”>This text is
smaller.</p>
 @import Example & Inheritance

h1 {color:brown; font-family:sans-serif}
Site.css … other styles ...

inherit
Subsite.css
(Inherits styles @import url(Site.css)
and overrides h1 {color:green; font-family:Monotype}
… other styles ...
some styles)
inherit
<style>
MyHTML.htm @import url(Subsite.css)
(Inherits Subsite.css h1 {color:red; font-family:cursive}
styles and overrides </style>
some styles)
 Style Sheet Inheritance
◼ Tags embedded in other tags inherit style
attributes

◼ Examples:
 <p> inherits from <body> because it can only
appear in the <body> section
 <li> inherits from <ol> because <li> appears
inside the <ol> tag
 Style Sheet Inheritance Example
<body style=“color:red”>
<p>
This paragraph will appear with red text
because it inherits properties of the
body tag that encloses it.
</p>
<p style=“color:green”>
This paragraph will appear with green
text because it explicitly overrides the
red text inherited from the body tag.
</p>

</body>
 Font Settings
◼ When text is displayed in a browser it appears in a
default font face, size, style, and color.

◼ Most browsers use the Times New Roman font face at

approximately 12-point size and rendered in black.

◼ CSS settings permit you to change these default settings

to bring a different look to your pages.

◼ There are six font style settings that can be used:

1. font-family
2. font-size
3. font-style
4. font-weight
5. font-variant
6. font
 1. font-family Property
◼ A generic description of a range of font types all having a
similar design supported by all CSS capable browsers

◼ The font-family property needs to be specified to

change the browser's default setting from Times New
Roman.

◼ Five generic font families are supported by Cascading

Style Sheets:
 Serif (e.g., Times)
 Sans-serif (e.g., Arial or Helvetica)
 Cursive (e.g., Zapf-Chancery)
 Fantasy (e.g., Western)
 Monospace (e.g., Courier)
 Other Font Family
◼ A computer may provide additional font families that supplement
generic font families

◼ You cannot assume these additional families will be available

 So if used specify a generic font to use if the specific font family is not
available

◼ The following font faces are typical on a Windows-based PC:

 arial
 arial narrow
 comic sans ms
 courier new
 georgia
 impact
 tahoma
 times new roman
 verdana
 Font Family Specification
◼ Example:
 h1, h2, h3, h4, h5, h6 {font-family: Arial
Helvetica sans-serif}

◼ As with the <font> tag proceed from the most

unlikely to the most likely font family
 Similar to <font face=“face”> attribute

◼ End with a generic font family

 2. font-size Property
◼ The font-size property is used to change the
browser's default 12-point size.
 You can use pixels to set letter heights for special
styling.

◼ Two ways to specify:

 Absolute
 Relative
➢ Using a Keyword description
➢ As a percent of the default font size for a tag
 Absolute Font Specification
◼ millimeters (use mm)

◼ inches (use in)

◼ points (72 points per inch; use pt)

◼ pica (6 picas per inch; use pc)

◼ pixel (use px)

 Smallest display element on computer monitor

◼ Can specify decimal units:

 h1 {font-size: 0.5in}
 Relative Font Specification
◼ Specify according to relationship to the standard
character

◼ Standard characters: em and ex

◼ EM Unit
 Equal to width of capital letter “M” in the default font

◼ EX Unit
 Equal to the height of a lower case “x” in the default
font
 Why use relative units?
◼ Allows for scalable fonts

◼ Monitors vary in size of display and screen

resolution
 Specifying a relative unit ensures a uniform viewing
experience across the variety of monitors rendering
your page
 Relative Unit Examples
◼ As a scalable font:
 body {font-size: 150%}

◼ Use descriptive keywords: xx-small through xx-

large:
 b {font-size: xx-large}
 3. font-style Property
◼ Specifies appearance of font
 Browser default is the normal style.

◼ Syntax: font-style: style_type

◼ Style Types:
 normal
 italic
 oblique (similar to italic)

◼ Example:
 p {font-style: italic}
 4. font-weight Property
◼ Specified the degree of “boldness” of the type

◼ Specified from 100-900 in intervals of 100

 100 is lightest
 900 is heaviest

◼ Example:
 p {font-weight: 300}
 5. font-variant Property
◼ Not supported by Netscape 4.x

◼ Attribute values:
 normal
 small-caps (EXAMPLE)
➢ Uppercases but reduces font size
➢ Specifying normal returns the text to standard display.
 6. font Property
◼ Pools together a variety of text and font
attributes

◼ Attribute values are positional: font-style

specified first, font-variant second, font-weight
last

◼ Example:
 h2 {font: italic small-caps bold}
instead of
 h2 {font-style:italic; font-variant:small-caps;
font-weight:bold}
 Text Properties
◼ Font settings can be paired with other style sheet
properties to apply additional formatting to strings of
text.

◼ The following text properties can be paired with font

settings to bring more variety to text displays.
1. word-spacing
2. letter-spacing
3. line-height
4. text-align
5. vertical-align
6. text-indent
7. text-decoration
8. text-transformation
 Text Properties
◼ Word, letter and line spacing specify amount of
white space to leave between words, letters and
lines

◼ Syntax:
 word-spacing: size
 letter-spacing: size
 line-height: size

◼ Size can be expressed as “normal” (browser

determines spacing) or a specific unit
 Word, Letter, and Line Spacing Examples

◼ p {letter-spacing: 1 em}
 Might render: L e t t e r

◼ p {word-spacing: 2 em}
 Might render: This is an example

◼ p {line-height: 2}
 Indicates line height is twice the font size height
 Default is 1.2
 text-align
◼ Specifies horizontal alignment to use
 Essentially the same as the align attribute of various
HTML tags

◼ Syntax:
 text-align:left|center|right|justify

◼ Example:
 h2 {text-align: center}
 vertical-align
◼ Specifies vertical alignment to use

◼ Syntax:
 vertical-align:
➢ baseline|bottom|middle|sub|super|
➢ text-bottom|text-top|top

◼ Example:
 h2 {vertical-align: text-bottom}
 vertical-align attribute values
◼ baseline: aligns with bottom of font

◼ bottom: aligns with bottom of lowest element in the line

◼ middle: align in the middle of text

◼ sub: Subscript

◼ super: Superscript

◼ text-bottom: aligns with font’s bottom

◼ text-top: aligns element with top of tallest letter

◼ top: aligns with top of tallest letter or graphic in the line

 text-indent
◼ Used to indent first line of paragraph

◼ Specifying a negative number makes a hanging

indent
 Works sporadically in browsers
 Negative indents are buggy in some browsers

◼ Can specify in absolute or relative units

◼ Example:
 p {text-indent: 2 em}
 text-decoration
◼ Attribute values:
 none
 underline (Example)
 overline (Example)
 line-through (Example)
 text-transform
◼ Attribute values:
 none
 capitalize (first letter of each word is capitalized)
 uppercase
 Lowercase

◼ text-decoration and text-transform

affect the style of characters
 Thus, they are better thought of as font properties
 color
◼ Specified similar to colors in HTML
Use one of 256 Allows you
Standard to specify
◼ Examples: decimal (range
color names
 body {color:name} 0-255)
 body {color:#008080}
 body {color:rgb(0,128,128)}
 body {color:rgb(0%,50%,50%)}

% of maximum
intensity, 50%
Red Green Blue of 256 is 128
 References
◼ W3C Cascading Style Sheets home page
 http://www.w3.org/Style/CSS/

◼ CSS2 Specification
 http://www.w3.org/TR/CSS2/

◼ W3 Schools CSS Tutorial

 http://www.w3schools.com/css/default.asp

◼ Index DOT Css (The Advanced CSS Reference)

 http://www.blooberry.com/indexdot/css/index.html
 Resources
◼ CSS Editors
 Best CSS stand alone editor is
➢ Topstyle Pro – http://www.bradsoft.com

◼ CSS Validators
 http://jigsaw.w3.org/css-validator/
 https://jigsaw.w3.org/css-validator/DOWNLOAD.html

◼ Impacts of CSS on Accessibility

 https://uit.stanford.edu/blog/impacts-css-accessibility
DRS
drsahu.cse@satiengg.in
https://sites.google.com/view/drdivyarishisahu/home