LAB-1

CASCADING STYLE
SHEETS
Overview

 Introduction to CSS

 How to embed CSS in web pages?

 Anatomy of a CSS rule

 Contextual Selectors

 Grouping Selectors

prepared by: Meer Sadaf Naeem 2

 WHAT IS CSS?

prepared by: Meer Sadaf Naeem 3

Introduction

 Styles enable you to define the

formatting characteristics of
different elements that comprise a
document.
 They enabled you to control size of
the margins around a page, specify
the typeface, font color, set
indents, increase/decrease the
amount of space and so on.
 A collection of style is commonly
Introduction (cont…)
 CSS is a style language that defines
layout of HTML documents.
 HTML is used to structure content
where as CSS is used for formatting
structured content.
 Unlike HTML, CSS doesn’t create
anything.
 Instead it decorates, aligns and
positions (etc) elements in HTML.
 In a nut shell, CSS takes the normal
HTML output & adds a few rules to
how it is actually displayed.
How to add CSS to web pages?

prepared by: Meer Sadaf Naeem 7

Adding CSS to web
pages:
1.It can be embedded within the
header of a web page 
Embedded style sheet
2.
3.It can be embedded within the body
of a web page (usually in certain
sections or individual elements)
Inline style sheet
4.
5.It can be specified within a separate
web page  External style
 <LINK> (External style
sheet)
rel =“ stylesheet ” type =“ text / css ” href =“ URL ” media =

The <LINK> is a special HEAD element which indicates a

relationship between the current document & some other object.
rel It describes
It is mostly used tothe
linkrelation of the linked file to the document
style sheets.
itself. There are 2 possible values:
type Itstylesheet
declares the
usedtype of data the
to control which
wayisthe
being linked
current to the is
document
document.
rendered. In case of CSS, the only allowed value is text/css.
href It is the URL of the external style sheet. Either relative or
alternate stylesheet used to control the way the
absolute
current URLs may be
document is needed.
renderedThis
, attribute
but willis not
required.
be used
media This attribute represents the intended rendering destination for
by default if a "rel='stylesheet'" stylesheet is
the style sheet
present and definitions.
successfully Default value
loaded . is screen. Other
values are:
All, screen, print, projection, aural, braille, embossed,
handheld and tv.
 <STYLE> (Embedded style
sheet)
< style type =“ text / css ” media =“…”>
<!—
CSS styles go here -- >
</ style >

The <STYLE> element is used in HEAD section to indicate style

information for the entire document.


If External Style Sheet also exists for the current document, the
CSS style rules indicated in the <STYLE> should have
precedence over styles in the linked style sheet, given that each of
type Same as previous
the selectors for the style rules are equal.
media Same as previous
STYLE attribute (Inline
Style Sheets)

< element style =“… styles …”>

 The value of style attribute is

any combination of style
declarations.
1.
CSS RULE:
selector { property : value ;}

1.Selector this is the HTML element

that you want to style.
2.Property this is the attribute you
adjust, control or modify.
3.Value it is the style you apply to
that property
CSS RULE:
selector { property : value ;}
 each selector can have multiple
properties.
 Each property within the selector can
have independent values.
 The property & value are separated with a
colon & contained within curly brackets.
 Multiple properties are separate by a
semi-colon.
 Multiple values within a property are
separated by commas.
 Value in CSS doesn’t require quotation
 Document tree Example1 . html

When you nest one element inside another , the

nested element will inherit the properties
assigned to the containing element . Unless you
modify the inner element values independently .
Comments in CSS

/* comment goes here */

 View Example
Contextual Selectors
p i strong { color : red }

 Contextual selectors define styles

that are only applied when certain
tags are nested within other tags.
 This allows to use a tag & not have it
adopt the CSS attribute each time
it is used.
 The selectors are separated by a
space.
 View Example
Grouping Selectors
h1 , h3 , h5 { color : red ;}
h2 , h4 , h6 { color : blue ;}
 To group selectors, separate them
with comma.