5/26/2019

ITU 07204: Fundamentals of Web

Technologies
Lecture 6: Introduction to CSS

Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2

Agenda:
• Intro to Cascading Style Sheet (CSS)
• CSS Inheritance Vs Cascading

CSS Intro
• HTML was created to describe the content of
a web page
– It was NEVER intended to contain tags for
formatting a web page

• With basic HTML, changing how other HTML

elements look means adding more HTML
elements (for example <b> This is bold text </b> )
– This makes HTML documents crowded with many
HTML tags and hence poorly readable
3

1
 5/26/2019

CSS Intro
• With basic HTML, changing attributes of HTML
elements (for example <p align=“left”> This is left aligned </p>
) is done at element level
– If you have more than one paragraph (all aligned left) and
you want to align them right, for instance, you need to
make changes to all the paragraphs

• With basic HTML, elements can be changed at

document level
– Elements from multiple documents cannot be changed at
once 4

CSS Intro
• CSS (Cascading Style Sheets) allows us to apply
formatting and styling to the HTML that builds
our web pages
• CSS controls many attributes of web pages
such as colors, fonts, borders, backgrounds,
spacing, margins, and many more

CSS Intro
• CSS is NOT a substitute of HTML but rather
works together with HTML
– CSS is an extension to basic HTML that allows you
to style your web pages
– CSS can control attributes of multiple HTML
elements or layout of multiple pages at once and
therefore saves a lot of work on developing or
updating a Website

2
 5/26/2019

CSS Intro
• You can think of a style sheet as a template
with a set of styles that affect HTML elements
• There are three style sheets that affect HTML
elements
– Browser style sheet
– User style sheet
– Developer style sheet

CSS Intro
• Each HTML element has a default style
– An anchor <a> element, for instance, by default
has a blue color and is underlined

• This set of default styles is referred to as a

browser style sheet
– The effect of these styles can only be seen when a
user of a website and a developer do not specify
any style for HTML elements

CSS Intro
• When a developer specify a style for any
HTML element, an developer style sheet is
created
• This style sheet overrides browser style sheet
and affects every instance/copy of a web page
– Two users accessing the same page will have the
same format

3
 5/26/2019

CSS Intro
• Whether a web page is formatted by a
browser or a developer style sheet, modern
browsers allow users to reformat the pages
– In a chrome browser, for instance, a user can
access a developer tool by pressing Ctrl + Shift + I
and reformat a page

10

10

CSS Intro
• When a user reformats a page, a user style
sheet is created
• A user style sheet overrides both browser and
developer style sheets
• Unlike other style sheets, user style sheet
affects only the web page changed by the user
and disappear when the page is refreshed

11

11

CSS Intro
• Cascading means styles can fall (cascade) from
one style sheet to another
• This enables one HTML document to use
multiple style sheets

12

12

4
 5/26/2019

CSS Syntax
• Parts of a style rule

13

13

CSS Syntax: Selectors

• Selector is a pattern used to select HTML

element(s) you want to style
– It associates a CSS declaration block with an HTML
element

• CSS has a number of selectors including;

– Class selector (. followed by name of a class)
– Element type selector (name of an element)
– Specific element selector (# followed by id of an
element)
14

14

CSS Syntax: Selectors: Class

• Class selector uses a dot (.) symbol followed
by a class name

• This selector associates the above declaration

block with any HTML element with class
attribute and “appearance” value i.e
class=“appearance”
15

15

5
 5/26/2019

CSS Syntax: Selectors: Element Type

• Element type selector uses names of HTML

elements

• This selector associates the above declaration

block with ALL div elements

16

16

CSS Syntax: Selectors: Specific Element

• Specific element selector uses hash (#) symbol

followed by a unique name of HTML element

• This selector associates the above declaration

block with any HTML element with id attribute
and “appearance” value i.e id=“appearance”
17

17

CSS Syntax: Selectors: Multiple Elements

• Multiple element types:

• All element types:

• Specific elements by id:

18

18