Cascading Style
Sheet 3.0
Lesson 01: Introduction to CSS 3.0
Lesson Objectives
In this lesson, we will learn:
Introduction to CSS
• What is CSS
• CSS History
• CSS 3.0 features
• What CSS can do
CSS Syntax
Types of CSS
1.1 Introduction to CSS
What is CSS ?
Cascading Style Sheets (CSS) is a style sheet language used to describe the
presentation (that is, the look and formatting) of a document written in a
markup language.
CSS was created by Hakon Wium Lie and Bert Bos and was adopted as a
W3C Recommendation in late 1996
1.1 Introduction to CSS
CSS History
Version Description Features
CSS 1 The first CSS specification , an official typeface, emphasis,backgrounds,spacing
W3C Recommendation, published in between words, letters, and lines of text.
December 1996 Alignment of text, images, tables and other
elements Margin, border, padding etc
CSS 2 CSS level 2 specification was developed includes a number of new capabilities like
by the W3C and published as a absolute, relative, and fixed positioning of
recommendation in May 1998. elements and z-index, the concept of media
types, support for aural style sheets and
bidirectional text, and new font properties such
as shadows
CSS2.1 CSS 2.1 was published as a W3C CSS level 2 revision 1, often referred to as "CSS
Recommendation on 7 June 2011 2.1", fixes errors in CSS 2, removes poorly
supported or not fully interoperable features
and adds already-implemented browser
extensions to the specification
CSS 3 Current version CSS 3 is divided into several separate
documents called "modules". Each module adds
new capabilities or extends features defined in
CSS 2. As of June 2012, there are over fifty CSS
modules published from the CSS Working Group
Capgemini Internal
1.1 Introduction to CSS
Why CSS?
Solves common problem:
Separate document presentation from the web page content.
Save lots of work:
Allows developers to control the style and layout of multiple Web pages all at once.
1.1 Introduction to CSS
CSS 3.0 Features
Many exciting new functions and features have been introduced in CSS3.
Following table list some of the new features
Property New Attributes
Borders border-color border-image border-radius box-shadow
Background background- background- multiple-
s origin size backgrounds
Color HSL Colors HSLA Colors RGBA Colors opacity
Text Effects text-shadow text-overflow word-wrap
Selectors Attribute-selector :nth-child() :nth-of-type()
Many more features like…
CSS3 Transitions
Animations
media queries
multi-column layout
Web fonts
1.1 Introduction to CSS
What Can CSS Do?
Text formatting
Element sizing
Element positioning
Change link attributes
Cursor manipulation
Animation
Many More….
1.2 CSS Syntax
CSS Syntax
A CSS rule has two main parts:
A selector
One or more declarations
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
1.3 Types of CSS
Types of CSS
Three CSS implementations
Inline
• Affects only the element applied to
Embedded
• Affects only the elements in a single file
External
• Linked to an unlimited number of files
1.3 Types of CSS
HTML Page Structure
Document (HTML)
<!DOCTYPE HTML> Head
<HTML>
Title Text
<HEAD>
<TITLE>Title Text</TITLE>
</HEAD>
Body
<BODY>
H1 Heading
<H1>H1 Heading</H1>
<P>Paragraph 1</P>
<P>Paragraph 2</P> Paragraph 1
</BODY>
</HTML> Paragraph 2
Capgemini Internal
1.3 Types of CSS
HTML Page Structure with CSS
Document (HTML)
<!DOCTYPE HTML> Head
<HTML>
Title Text
<HEAD>
<TITLE>Title Text</TITLE>
</HEAD>
Body
<BODY> H1 Heading
<H1>H1 Heading</H1>
<P>Paragraph 1</P>
<P>Paragraph 2</P> Paragraph 1
</BODY>
</HTML> Paragraph 2
Capgemini Internal
1.3 Types of CSS
Inline CSS
Inline Style Sheets:
All style attribute are specified in the tag it self.
It gives desired effect on that tag only. It does not affect any other HTML tag.
Syntax:
An example of STYLE attribute usage:
<element style=“propertyname : value; propertyname : value">
is equivalent to
<p style=“font-weight: bold”>This is bold text</p>
<p><b>This is bold text</b></p>
1.3 Types of CSS
Embedded CSS
Embedded Style Sheet:
Set of style definitions placed within <STYLE> tags.
Added to the <HEAD> area of file
Syntax:
<HEAD>
An example of <STYLE> tag usage:
<STYLE TYPE=“text/css”>..</STYLE>
</HEAD>
<HEAD>
<TITLE>New Topic1</TITLE>
<STYLE>P {font-weight : bold}</STYLE>
</HEAD>
1.3 Types of CSS
External CSS
The <LINK> element is used to attach an external CSS document to an
HTML document
All style definition are store in one file (.css file)
This file gets called by the HTML file during page loading
Syntax: <link rel=“stylesheet” href=“filename.css” type=“text/css”>
Example
Content in first.css:
P {font-weight : bold}
Content in first.html file:
<HEAD>
<TITLE>Demo CSS</TITLE>
< LINK HREF=“FIRST.CSS" REL="STYLESHEET" TYPE=“TEXT/CSS”>
</HEAD>
1.3 Types of CSS
CSS Precedence
Browser determines default format.
Order of precedence when three CSS types combine at run time in the HTML
page are:
Inline styles
Embedded style sheets
Linked (external) style sheets
Demo : CSS Syntax and CSS Types
Lesson01
demo1.html
Embeddedstylesheet.htm
Linkedstylesheet.htm
Inlinestylesheet.htm
Lesson Summary
In this lesson, you have learnt about:
What is CSS
CSS history
What CSS can do
CSS Syntax
Types of CSS
Review Questions
Question 1: Which of the following are CSS Types.
Inline
Embedded
External
All the above
Question 2: CSS rule has __________ and
_____________
Selector
Declaration
Element
All the Above
