Session: 5

Introduction to CSS3
 Ÿ Iden,fy   the  new  func,ons  of  CSS3  
Ÿ Explain  the  different  types  of  selectors  
Ÿ Explain   nested  tags  
Ÿ Define  Classes  and  IDs  for  applying  styles  
Ÿ   Explain  the  process  to  apply  styles  to  hyperlink  

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5   2  

 Cascading Style Sheet (CSS) is a style sheet language.

It informs the browser how to present a document.

It uses a markup language for describing the presentation semantics of a document.

It defines how HTML elements are to be displayed.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     3  

 Used for adding style such as fonts, colors, and spacing to Web documents.

Has multiple levels and profiles.

Updates each level of CSS from the earlier version, by adding new features.

Denotes version as CSS1, CSS2, CSS3, and CSS4, where the numbers are different for
each version or level.

Is divided into multiple documents called “modules” and each of these modules have
new capabilities or extends the features present in CSS2.

Started drafting of CSS3 when publication of the original CSS2 recommendation was
released.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     4  

 Ÿ As   CSS3   is   available   as   modules   and   is   s,ll   evolving,   there   are   many   modules  
having  different  stability  and  status.  
Ÿ Only  three  modules  are  released  as  recommenda,ons  and  they  are  as  follows:  

CSS Color Level 3

CSS Namespaces

Selectors Level 3

Ÿ Modules  that  are  stable  and  in  recommenda,on  stage  are  as  follows:  
Media Queries

CSS Style Attributes

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     5  

 Ÿ Modules  that  are  in  tes,ng  phase  and  in  recommenda,on  stage  are  as  follows:  

CSS Backgrounds and Borders Level 3

CSS Image Values and Replaced Content Level 3
CSS Marquee
CSS Multi-column Layout
CSS Speech
CSS Mobile Profile 2.0
CSS TV Profile 1.0

Ÿ Modules  that  are  in  refining  phase  and  in  working  draN  stage  are  as  follows:  

CSS Transforms

CSS Transitions

CSS Values and Units Level 3

CSS Print Profile

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     6  
 Ÿ Modules   that   are   in   revising   phase   and   in   working   draN   and   recommenda,on  
stage  are  as  follows:  
CSS Animations
CSS Flexible Box Layout
CSS Fonts Level 3
CSS Paged Media Level 3
CSS Text Level 3
CSS Basic User Interface Level 3
CSS Writing Modes Level 3

Ÿ Some  of  the  following  modules  are  in  exploring  phase  and  in  working  draN  stage:  

CSS Cascading and Inheritance Level 3

CSS Conditional Rules Level 3

CSS Grid Layout

CSS Line Grid

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     7  
 Ÿ Modules  that  are  in  rewri,ng  phase  and  in  working  draN  stage  are  as  follows:  

CSS Line Layout Level 3

CSS Ruby

CSS Syntax Level 3

Ÿ Modules  that  are  in  abandoned  phase  and  in  working  draN  stage  are  as  follows:  

Behavioral Extensions to CSS

CSS Hyperlink Presentation

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     8  

 Syntax of CSS consists of three parts namely, selector, property, and value.

Selector is an HTML element for which you want to specify the style or the formatting
instruction.

Property of a selected element is a CSS property that specifies the type of the style to be
applied to the selector.

Value refers to the value of the CSS property and a CSS property can have multiple
values.

Property and the value for a selector are separated with a colon (:).

They are enclosed within the curly brackets ({}) that is known as the declaration block.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5   9  

 Ÿ Various  combina,ons  available  to  specify  rules  for  HTML  elements  are  as  follows:  

You can specify multiple property-value pairs for a selector, which are separated by a
semicolon (;) within the declaration block.

You can specify multiple selectors for a single property by grouping the selectors. To
group the selectors, the selectors are separated by commas followed by a declaration
block of properties and values.

You can specify properties for multiple selectors. Here, the comma-separated selectors
are followed with multiple property-value pairs.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     10  

 CSS uses various units of measurements for specifying size of the font, width, and
height of margins, and so on.

These units measure the horizontal and vertical length of the content.

CSS supports two types of length measurement units namely, relative and absolute.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     11  

 Relative length specifies the length units related to other length property that are
calculated in comparison to a current value.

Ÿ Following  table  lists  some  of  the  rela,ve  length  units.  

Relative Length Description

em Specifies the font size (height) of a particular font. The em unit is

relative to the value of the font-size property of the selector.

ex Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is

approximately half the font size or the height of the lowercase letter
‘x’.

px Specifies the size in pixels, which is relative to the screen of the

device.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     12  

 Absolute lengths are specified when the Web page designer is aware of the physical
properties of the output device and are specific and fixed values.

Ÿ Following  table  lists  some  of  the  absolute  length  units.  

Relative Length Description

in Specifies the size in inches, where 1 inch = 2.54 centimeters.

cm Specifies the size in centimeters’

mm Specifies the size in millimeters

Specifies the size in points, where 1 point = 1/72th of an inch

pt

pc Specifies the size in picas, where 1 pica = 12 points

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     13  

 Percentage allows specifying the length of the content, which is relative to another
value.

Ÿ Shows  the  use  of  percentage  in  defining  the  style.  

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     14  

 Three types of style sheets namely, inline, internal or embedded, and external style
sheets.

An inline style sheet uses the style attribute within an HTML element to specify the style
for HTML elements.

An internal style sheet is also included within the HTML document and is defined using
the style element.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     15  

 Type attribute of the
style element
specifies the content
type, which is text/css

Internal Style rules appear in

Placed inside the Styles a declaration block
<head> section of a for each HTML
particular Web page element under the
source code style element

Styles can be re-used in

the same Web page in
which they are placed

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     16  

 Ÿ The  Code  Snippet  demonstrates  how  to  specify  internal  style.  

<head>
<meta charset=“utf-8”>
<title>Sample HTML5 Structure</title>
<style>
h1, h2 {
margin:0px;
font-size:1.5em;
}
footer{
background-color:#999;
text-align:center;
}
</style>
</head>

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5   17  

 Inline
Are placed directly Styles Cannot be reused at
any point of time in a
inside an HTML
element Web page

Web designer cannot

use the style builder to
create an inline style

Ÿ The  Code  Snippet  demonstrates  the  use  of  inline  style.  

<p style=”font-size: 14px; color: purple;”></p>

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     18  

 External CSS is External External CSS are
defined in a
separate file and is
Style Sheet widely used to provide
a consistent look across
saved with the .css the Web pages of a
extension Web site

Provides the benefit of

reusability by
implementing common
style rules for multiple
HTML pages

Ÿ The  Code  Snippet  demonstrates  the  use  of  external  CSS.  

BODY {
background-color: gray;
font-family: arial;
font-style: italic;
}

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5   19  

 Ÿ Code  Snippet  shows  an  example  of  HTML  code  using  an  external  CSS  style  sheet  
demonstrated  earlier.  

<!DOCTYPE html>
<html>
<head>
<LINK rel=“stylesheet” type=“text/css” href=“body.css”/>
<title>Webex e-Server</title>
</head>
<body>
This is the fastest web server..!!
</body>
</html>

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     20  

 Selectors refer to the HTML elements with the styles that the users want to apply to
them.

The four different types of CSS selectors are as follows:

Universal selector

Type selector Selectors

ID selector

Class selector

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     21  

 Styles are specified only
once for an HTML element
Specifies the element and are applied to all the
name along with the occurrences of that
styles to be applied to elements
that element

Results in application of
the specified styles to all
the occurrence of that
element in a Web page

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     22  

 Class selector starts with a
period followed by the
Matches elements, value of the class attribute
whose class attribute is
set in an HTML page

Applies styles to the

content of all those
elements having the same
class attribute

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     23  

 ID selector starts with the
hash symbol (#) followed
Matches an element by the id attribute’s value
whose id attribute is and the declaration block
set in an HTML page

Applies styles to the

content of all those
elements

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     24  

 Represented by an
Can be applied to all asterisk (*) sign
elements in the
document

Applies the specified styles

to the content of all the
elements

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     25  

 Ÿ W3C   has   defined   some   rules   for   applying   styles   to   an   HTML   element.   These   rules  
are:  

Gather all the styles that are to be applied to an element.

Sort the declarations by the source and type of style sheet. The source specifies the origin
from where the styles are rendered.

Highest priority is given to the external style sheet defined by an author. The next
priority is of the reader, which can be a software that reads the content, and the last
priority is of the browser.

Sort the declarations by the priority of a selector, where the ID selector has the highest
priority.

Sort the declaration according to the specified order.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     26  

 Are marked with
special characters, ‘/*’
and ‘*/’ and can be
single-line and multi-
line comments

Make the program

Refers to the Comments readable and help the
descriptive text in a designer to explain the
Web page styles specified for
elements

Allows a Web page

designer to provide
information about the
CSS code

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5   27  

 Ÿ Following  table  lists  the  different  states  of  an  element:  

Sometimes unknowingly the same Web page get open that you have already visited.

Description
State feel the need for a mechanism that could differentiate the already visited links
You might
from the remaining ones.
active Defines a different style to an element that is activated by the user.

This
hover is possible by using
Defines pseudo
a different classes.
style to an element when the mouse pointer is moved over it.

link Defines a different style to an unvisited hyperlink.

Pseudo classes allow the users to apply different styles to the elements such as buttons,
hyperlinks, and so
visited on. a different style to the visited hyperlink.
Defines

Ÿ Syntax  for  declaring  Pseudo  classes  are  as  follows:  

selector_name:state_name {property: value}

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     28  

 Ÿ Following  table  lists  the  selector  name  and  its  descrip,ons:  

Selector Name Description

:link Is used for selecting all unvisited links

:active Is used for selecting the active link

:hover Is used for selecting links on mouse over

Is used for selecting all visited links

:visited

Is used for selecting the input element which has focus

:focus

:first-letter Is used for selecting the first letter of every <p> element

:first-line Is used for selecting the first line of every <p> element

:first-child Is used for selecting every <p> elements that is the first child of its parent

:before Is used for inserting content before every <p> element

:after Is used for inserting content after every <p> element

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     29  
 Ÿ Pseudo   classes   specify   the   styles   to   be   applied   on   an   element   depending   on   its  
state.  
Ÿ In  CSS3,  a  selector  can  contain  mul,ple  pseudo-­‐classes.  
Ÿ These  pseudo-­‐classes  should  not  be  mutually  exclusive.  
Ÿ Code   snippets   demonstrates   the   use   of   CSS   code   specifying   the   different   styles  
for  the  visited  links,  unvisited  links,  and  for  the  links  when  the  mouse  hovers  over  
it.  

a:link {
color: white; Specifies the styles for an
unvisited link
background-color: black;
border: 2px solid white;
}
a:visited {
color: white; Specifies the styles for a
visited link
background-color: brown;
border: 2px solid white;
}
a:hover {
color: black; Specifies the styles when
a mouse hovers over it
background-color: white;
border: 2px solid black;
©  Aptech  Ltd.     }   Introduc,on  to  CSS3  /  Session  5   30  
 Ÿ Consider   a   scenario   where   you   are   designing   a   Web   site   that   explains   the  
important  technical  terms.  
Ÿ While   defining   such   terms,   you   might   feel   the   need   to   emphasize   more   on   the  
first  le]er  by  applying  different  styles.  
Ÿ Pseudo   elements   provide   you   with   a   flexibility   to   apply   styles   to   a   specific   part   of  
the  content  such  as  a  first  le]er  or  first  line.  
Ÿ Pseudo   element   adds   some   special   effects   to   HTML   elements   such   as   <p>,  
<body>,  and  so  on.  
Ÿ Syntax  for  declaring  psuedo  elements  is:  

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     31  

 The :first-line and :first-letter pseudo elements allow you to apply styles to the first line
and first letter respectively.

The :first-line pseudo element allows you to apply styles to the first line.

Ÿ The   Code   Snippet   declares   the   style   that   will   be   applied   to   the   first   line   in   the  
paragraph.  

p:first-line
Specifies the styles to be
{ applied to the first line of
font-family: “Tahoma”; the paragraph content
font-weight: bolder;
background-color: #FFFFCC;
}  

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     32  

 The :first-letter pseudo element allows you to apply styles to the first letter.

Ÿ The  Code  Snippet  declares  the  style  that  will  be  applied  to  the  first  le]er  in  the  
paragraph.  

p:first-letter
{ Specifies the styles to be
font-family: “fantasy”; applied to the first letter
of the paragraph content
font-size: xx-large;
font-weight: bold;
}  

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     33  

 CSS can be used to change the appearance and behavior of hyperlinks.

There are two other ways to assign hyperlink styles namely, div specific and Link
specific.

A div specific hyperlink styles can be created and assigned to a specific div and will have
all the hyperlinks present within the div to follow the specified rules.

Class specific hyperlink styles generally uses a class than an id. A point to note that an id
can only be used once on a page whereas a class can be used multiple times as required.

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     34  

 Ÿ CSS  is  a  mechanism  for  adding  style  such  as  fonts,  colors,  and  spacing  to  Web  
documents.  CSS  has  mul,ple  levels  and  profiles.  
 
Ÿ The   general   syntax   of   CSS   consists   of   three   parts   namely,   selector,   property,  
and  value.  
 
Ÿ Selectors  refer  to  the  HTML  elements  with  the  styles  that  are  applied  to  them  
and  they  can  be  Type,  Class,  ID,  or  Universal  selectors.  
 
Ÿ A   comment   refers   to   the   descrip,ve   text   that   allows   a   Web   page   designer   to  
provide  informa,on  about  the  CSS  code.  
 
Ÿ Pseudo  classes  allow  the  users  to  apply  different  styles  to  the  elements  such  as  
bu]ons,  hyperlinks,  and  so  on.  
 
Ÿ Pseudo   elements   allow   the   developer   to   apply   styles   to   a   specific   part   of   a  
content  such  as  first  le]er  or  first  line.  

Ÿ A  hyperlink  style  can  be  assigned  either  through  DIV  or  through  link  class.    

©  Aptech  Ltd.     Introduc,on  to  CSS3  /  Session  5     35