Established as per the Section 2(f) of the UGC Act, 1956
Approved by AICTE, COA and BCI, New Delhi
CSS
School of Computer Science and Engineering
OUTLINE
Recap of previous Lecture
Topics for covered here
Definition of CSS
Importance of CSS
Embedding of CSS with HTML
Summary
Quiz
Introduction to CSS
D e fi n i t i o n a n d I m p o r t a n c e o f C S S
CSS
Definition
Cascading Style Sheets is a style sheet language
used for describing the presentation of a
document written in a markup language like
HTML.
CSS
What Does "Cascading" Mean?
We use the term "cascading" because there is an established order
of priority to resolve formatting conflicts:
1. Inline style (highest priority)
2. Internal style sheet (second priority)
3. External style sheet (third priority)
4. Web browser default (only if not defined elsewhere)
For each XHTML element, the browser will see which
styles are defined inline and from internal and external
style sheets. For any conflicts detected, it will use this
priority
User-friendly search engine
Customization
Compatible with multiple browsers
Helps Web Pages Load Faster
Makes Updates Easier and Smoother
Improves Website Presentation
In Web Development
IMPORTANCE OF CSS
EMBEDDING OF CSS WITH HTML
It converts the HTML into a
DOM (Document Object Model).
The browser loads the HTML
(e.g. receives it from the
network)
The browser then fetches most
of the resources that are linked
to by the HTML document and
linked CSS
ATTACHING A CSS FILE
Through <link> Tag
<head>
...
<link href="filename" type="text/css" rel="stylesheet" />
...
</head>
<link href="style.css" type="text/css"
rel="stylesheet" />
<link
href="http://www.google.com/uds/css/gsear
ch.css"
rel="stylesheet" type="text/css" />
HOW BROWSERS PROCESS CSS
CSS DECLARATION SYNTAX
Syntax and Example
Syntax: selector { property: value }
Examples:
i). h1 { color: blue }
ii). h1, h2, h3, h4, h5, h6 { color: blue
iii). h1 { color:blue; font-family: arial, helvetica, "sans
serif" }
iv). h1 {
color: blue;
font-family: arial, helvetica, "sans serif";
font-size: 150%;
}
THREE WAYS TO USE CSS
Three Ways to Use CSS
We can add CSS code in any combination of three different ways:
• CSS code is placed directly into an XHTML element
Inline
Style
within the <body> section of a web page.
• CSS code is placed into a separate, dedicated area
Internal within the <head> section of a web page.
Style Sheet
External • CSS code is placed into a separate computer file
Style
Sheet
and then linked to a web page.
INLINE STYLE
To define an inline CSS style, we simply add the style attribute to an XHTML
element with the CSS declaration as the attribute value:
<h2 style="color:red;">CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
An inline style declaration is highly
specific and formats just one element
on the page. No other elements,
including other <h2> elements on the
page, will be affected by this CSS
style.
Since inline styles have limited scope and do not separate content from presentation, their use is generally
discouraged. We won't be using inline styles much in this class.
INTERNAL STYLE SHEET
To use an internal CSS style sheet, we add a <style> section within the
<head> of the page. All our CSS declarations go within this section:
<head>
...
<style type="text/css">
h2 {color:red;}
</style>
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>
Styles declared in the internal style sheet affect all matching elements on the
page. In this example, all <h2> page elements are displayed in the color red.
Since formatting declarations are entirely in the <head> section, away from the actual page content,
internal CSS style sheets do a much better job than inline styles at separating content from
presentation.
Internal Style Sheet
To use an internal CSS style sheet, we add a <style> section within the <head>
of the page. All our CSS declarations go within this section:
<head>
...
<style type="text/css">
h2 {color:red;}
</style>
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>
Styles declared in the internal style sheet affect all
matching elements on the page. In this example, all <h2>
Since formatting declarations are entirely in the <head> section, away from the actual page
page
content, elements are
internal CSS style displayed
sheets in the
do a much better color
job than red.at separating content
inline styles
from presentation.
EXTERNAL STYLE SHEET
To use an external CSS style sheet, we create a new file (with a .css extension) and write our
style declarations into this file. We then add a <link> element into our HTML file, right after
the opening <head> tag:
style.css (separate file):
h2 {color:red;}
example.html file: <head>
<link rel="stylesheet" type="text/css"
href="style.css" />
...
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>
The <link> element instructs the browser to load the external file specified by the href
attribute and to apply the CSS style declarations contained there.
BENEFIT OF EXTERNAL STYLE SHEET
The real power of using an external style sheet is that multiple web pages on our site can link to the same style sheet:
h2 {color:red;}
page1.html page2.html page3.html
Styles declared in an external style sheet will affect all matching elements on all web
pages that link to the style sheet. By editing the external style sheet, we can make site-
wide changes (even to hundreds of pages) instantly.
INTERNAL VS. EXTERNAL STYLE SHEETS
Internal Style Sheets:
• are appropriate for very small sites, especially those that have just a single
page.
• might also make sense when each page of a site needs to have a
Externalcompletely
Style Sheets:
different look.
are better for multi-page websites that need to have a uniform look and
feel to all pages.
make for faster-loading sites (less redundant code).
allow designers to make site-wide changes quickly and easily.
External style sheets create the furthest separation between content and presentation.
For this reason - and the others listed above - we'll consider external style sheets to be
the best option when creating a new site.
CSS DECLARATION SYNTAX
The correct syntax of a CSS declaration is:
selector { property: value;}
p {color:red;}
selector
proper
ty value
Internal and external style sheets use this identical CSS syntax. Internal
style sheets must use the opening and closing <style> tags to surround
the CSS code, while external style sheets do not use the <style>
element.
A semicolon must be placed after each CSS declaration. Omitting this semicolon is the
single most common mistake made by those learning CSS.
STYLE SPECIFICATION FORMATS
Format depends on the level of the style sheet
Inline:
– Style sheet appears as the value of the style attribute
– General form:
style = " property_1: value_1;
property_2: value_2;
…
property_n: value_n"
FORMAT FOR DOCUMENT-LEVEL
Style sheet appears as a list of rules that are the content of a <style> tag
The <style> tag must include the type attribute, set to "text/css"
The list of rules must be placed in an HTML comment, because it is not HTML
Comments in the rule list must have a different form - use C comments (/*…*/)
SELECTOR FORMS
Simple Selector
The selector is a tag name or a list of tag names, separated by
commas.
h1, h3
Contextual selectors
ol ol li
SELECTOR FORMS
Class Selectors
Used to allow different occurrences of the same tag to use different style
specifications
A style class has a name, which is attached to a tag name
p.narrow {property/value list}
p.wide {property/value list}
The class you want on a particular occurrence of a tag is specified with
the class attribute of the tag
<p class = "narrow">
...
</p>
...
<p class = "wide">
...
</p>
SELECTOR FORM
Generic Selectors
A generic class can be defined if you want a style to apply to more than one kind of tag
A generic class must be named, and the name must begin with a period
Example,
.really-big { … }
Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>
SELECTOR FORMS
id Selectors
An id selector allow the application of a style to one specific element
Example:#section14 {font-size: 20}
General form:
#specific-id {property-value list}
The difference between an ID and a class is that an ID can be used to identify one
element, whereas a class can be used to identify more than one.
SELECTOR FORMS
Universal Selector
CSS universal selectors select any type of elements in an HTML page. It matches a
single element. An asterisk ( i.e. "*" ) is used to denote a CSS universal selector.
syntax:
*{CSS-Property: value;}
Example:
*{
color: blue; /* color of all the elements should be blue
*/
background: silver; /* silver background is set for all
the elements */
}
Text Decorations
The text-decoration property is used to specify
some special features of text.
The available values are line-through, overline, underline
and none which is the default.
Many browsers implicitly underline links, The none value can
be used to avoid this underlining.
PSEUDO CLASSES
Pseudo classes are styles that apply when something happens, rather than
because the target element simply exists
Two Pseudo classes available are :
hover classes apply when the mouse cursor is over the element
focus classes apply when an element has focus
PROPERTIES
There are 60 different properties in 7 categories:
Fonts
Lists
Alignment of text
Margins
Colors
Backgrounds
Borders
PROPERTY VALUES
• Keywords
Keywords - left, etc,
- left, small, small,
Not…case sensitive
– Not case sensitive
Length - numbers, maybe with decimal points
Units:
• px - pixels
• in - inches
• cm - centimeters
• mm - millimeters
• pt - points
• pc - picas (12 points)
• em - height of the letter ‘m’
• ex-height - height of the letter ‘x’
PROPERTY VALUE FORMS (CONTINUED)
Percentage - just a number followed immediately by a percent sign
URL values As url(protocol://server/pathname)
Property values are inherited by all nested tags, unless overridden
Colors: Color name
rgb(n1, n2, n3)
Numbers can be decimal or percentages
Hex form: #XXXXXX
FONT PROPERTIES
font-family:
Value is a list of font names - browser uses the first in the list it has font-family: Arial,
Helvetica, Courier
Generic fonts: serif, sans-serif, cursive, fantasy, and monospace (defined in CSS)
Browser has a specific font for each
If a font name has more than one word, it should be single-quoted.
font-size Possible values: a length number or a name, such as smaller, xx-large, etc.
font-style: italic, normal
FONT PROPERTIES (CONTINUED)
• font-weight : degrees of boldness
-bolder, lighter, bold, normal
-Could specify as a multiple of 100 (100 – 900)
• font
– For specifying a list of font properties shorthand cab be used.
font: bolder 14pt Arial Helvetica
– Order must be: style, weight, size, name(s)
GENERIC FONTS
FONT PROPERTIES (CONTINUED)
The text-decoration property
line-through, overline, underline, none
letter-spacing – value is any length property value
List properties:
list-style-type
Unordered lists
Bullet can be a disc (default), a square, or a circle
Set it on either the <ul> or <li> tag
On <ul>, it applies to list items
<h3> Some Common Single-Engine Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
LIST PROPERTIES (CONTINUED)
<li> tag applies list-style-type to just that item
<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li style = "list-style-type: disc">
Cessna Skyhawk </li>
<li style = "list-style-type: square">
Beechcraft Bonanza </li>
<li style = "list-style-type: circle">
Piper Cherokee </li>
</ul>
ALIGNMENT OF TEXT
The text-indent property allows indentation
Takes either a length or a % value
The text-align property has the possible values, left (the default), center, right, or
justify
Sometimes we want text to flow around another element - the float property
The float property has the possible values, left, right, and none (the default)
If we have an element we want on the right, with text flowing on its left, we
use the default text-align value (left) for the text and the right value for float
on the element we want on the right
ALIGNMENT OF TEXT (CONTINUED)
<img src = "c210.jpg" style = "float: right" />
QUIZ TIME
10 MINUTES
“All of you have to give quiz where there
will be 5 questions covering today’s
lecture. It is compulsory as it is used for
assessment and attendance”
QUESTIONS FROM LECTURE 12.1
<span> tag property specifies the following
apply
special In CSS tables, the possible values for the
color the font to caption-side property can have the following
entire text specified values.
part of
paragraph
top, top,
bottom, bottom,
increase left or center, left
the size of right or right
the None of
paragraph the above
top or left or
bottom right
QUESTIONS FROM LECTURE 12.1
The valid examples of ID selectors is/are
h1
#black{co An external style sheet is ideal when the style is applied
#black{co
lor: to
lor:
#000000;
#000000;
}
}
many single
pages pages
#black
h2{color:
#000000; All of the
} above
few pages None of
the above
QUESTIONS FROM LECTURE 11.1
What is CSS stands for
What is the correct HTML for referring to an
Cascade external style sheet?
Color Style
Sheets Sheets
Style
<styleshe
<style et>mystyl
src="myst e.css</
Cascade yle.css"> stylesheet
Cascading >
Style
Style Sh
Sheet <link
rel="styles
heet"
type="text None
/css"
href="mys
tyle.css"/>
QUESTIONS FROM LECTURE 11.1
Where in an HTML document is the correct place to
refer to an external style sheet?
What is the correct HTML for referring to an
in the in the external style sheet?
<body> <head>
section section
<script> <style>
At the end
All of the
of the
above
document
<css> <html>
QUESTIONS FROM LECTURE 11.1
Which is the correct CSS syntax?
{body;colo {body:colo
r:black;} r=black}
body{colo
body:color
r:black}
=black
QUESTIONS FROM LECTURE 12.2
Which property is used to specify typefaces ?
How many type faces inside property "font-family" ?
Font-
Font-name
family
1 Max. 2
Font-face
Font-type
Max. 3 No limit
QUESTIONS FROM LECTURE 12.2
Is it mandatory to use "Generic Fonts" as type face while
specifying font faces ?
Fonts such as Times New Roman which have spaces in
NO YES between must be wrapped inside ______
Quotation Round
Mark Brackets
Triangular
Brackets Curly
Braces
QUESTIONS FROM LECTURE 12.2
System independent fonts is called as generic fonts.
True False
THANK YOU
