Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
29 views

Fundamentals of Web Technologies: Agenda

The document is a lecture on introducing CSS (Cascading Style Sheets). It discusses that CSS allows styling and formatting of HTML elements on web pages, and that CSS works with HTML. It defines CSS syntax including selectors like class, element type, and ID selectors. CSS inheritance and cascading are also covered, explaining how browser, user and developer style sheets interact and cascade styles.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

Fundamentals of Web Technologies: Agenda

The document is a lecture on introducing CSS (Cascading Style Sheets). It discusses that CSS allows styling and formatting of HTML elements on web pages, and that CSS works with HTML. It defines CSS syntax including selectors like class, element type, and ID selectors. CSS inheritance and cascading are also covered, explaining how browser, user and developer style sheets interact and cascade styles.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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

You might also like