Lecture 3- CSS

BN109 Web and Multimedia Systems

Acknowledgement: T. Felke-Morris, H. College, Web Development & Design

Foundations with HTML5, 8th Edition, Pearson, 2017
 Lecture 2 Review Points

• This Lecture introduced you to HTML.

• You will use these skills over and over again as
you create web pages.

06/21/24 T1 2022
 Learning Outcomes
• In this chapter, you will learn how to . . .
– Describe the evolution of style sheets from print media to
the Web
– List advantages of using Cascading Style Sheets
– Use color on web pages
– Create style sheets Apply inline styles
– Use embedded style sheets, external style sheets
– Configure element, class, id, and contextual selectors
– Utilize the “cascade” in CSS
– Validate CSS

06/21/24 T1 2022
 Overview of
Cascading Style Sheets (CSS)
• See what is possible with CSS:
– Visit http://www.csszengarden.com
• Style Sheets
– used for years in Desktop Publishing
– apply typographical styles
and spacing to printed media
• CSS
– provides the functionality of style sheets (and much more) for
web developers
– a flexible, cross-platform, standards-based language
developed by the W3C.

06/21/24 T1 2022
 CSS
Advantages
• Greater typography and page layout control
• Style is separate from structure
• Styles can be stored in a separate document
and associated with the web page
• Potentially smaller documents
• Easier site maintenance

06/21/24 T1 2022
 Types of
Cascading Style Sheets
• Inline Styles
• Embedded Styles
• External Styles
• Imported Styles

06/21/24 T1 2022
 Cascading
Style Sheets
• Inline Styles
– body section
– HTML style attribute
– apply only to the specific element
• Embedded Styles
– head section
– HTML style element
– apply to the entire web page document

06/21/24 T1 2022
 Cascading
Style Sheets
• External Styles
– Separate text file with .css file extension
– Associate with a HTML link element in the head section of a
web page
• Imported Styles
– Similar to External Styles
– We’ll concentrate on the other three types of styles.

06/21/24 T1 2022
 CSS Syntax

• Style sheets are composed of "Rules" that

describe the styling to be applied.

• Each Rule contains a Selector and a

Declaration

06/21/24 T1 2022
 CSS Syntax Sample

Configure a web page to display blue text and yellow

background.
body { color: blue;
background-color: yellow; }

This could also be written using hexadecimal color

values as shown below.
body { color: #0000FF;
background-color: #FFFF00; }

06/21/24 T1 2022
 Common Formatting
CSS Properties
• See Table 3.1 Common
CSS Properties,
including:
– background-color - line-height
– color - margin
– font-family - text-align
- text-decoration
– font-size
- width
– font-style
– font-weight
06/21/24 T1 2022
 Using Color on Web Pages

• Computer monitors display color as

intensities of red, green, and blue
light
• RGB Color
• The values of red, green, and blue
vary from 0 to 255.
• Hexadecimal numbers (base 16)
represent these color values.

06/21/24 T1 2022
 Hexadecimal
Color Values
• # indicates a hexadecimal value
• Hex value pairs range from 00 to FF
• Three hex value pairs describe an RGB color

– #000000 black #FFFFFF white

– #FF0000 red #00FF00 green
– #0000FF blue #CCCCCC grey

06/21/24 T1 2022
 Web Color Palette

• A collection of 216 colors

• Display the most
similar on the Mac and PC
platforms.
• Hex values:
00, 33, 66, 99, CC, FF
• *Color Chart
http://webdevfoundations.net/color
• *The number 216 was used because it allows six equally spaced shades of
red, green and blue (6x6x6), each from FF to 00.

06/21/24 T1 2022
 Making Color Choices

• How to choose a color scheme?

– Monochromatic
• http://meyerweb.com/eric/tools/color-blend
– Choose from a photograph or other image
• http://www.colr.org
– Begin with a favorite color
• Use one of the sites below to choose other colors
– http://colorsontheweb.com/colorwizard.asp
– https://color.adobe.com/create/color-wheel
– http://paletton.com

06/21/24 T1 2022
 Support Web Accessiblity
Verify Sufficient Contrast
• When you choose colors for text and background,
sufficient contrast is needed so that the text is
easy to read.
• Use one of the following online tools to verify
contrast:
– http://webaim.org/resources/contrastchecker
– http://snook.ca/technical/colour_contrast/colour.html
– http://juicystudio.com/services/
luminositycontrastratio.php

06/21/24 T1 2022
 Configuring Color with Inline
CSS
• Inline CSS
– Configured in the body of the web page
– Use the style attribute of an HTML tag
– Apply only to the specific element

• The Style Attribute

– Value: one or more style declaration property and
value pairs

06/21/24 T1 2022
 Configuring Color with Inline
CSS (2)
• Example : configure the red text in the
heading and configure a gray background in
the heading
• Separate style rule declarations with ;
<h1 style="color:#FF0000;background-
color:#cccccc">This is displayed as a red
heading with gray background</h1>

06/21/24 T1 2022
 CSS Embedded (Internal)
Styles
• Configured in the head section of a web page.
• Use the HTML <style> element
• Apply to the entire web page document
• Style declarations are contained between the
opening and closing <style> tags
• Example: Configure a web page with white
text on a black background
<style>
body { background-color: #000000;
color: #FFFFFF;
}
06/21/24 T1 2022
</style>
 CSS Embedded Styles

<style> • The body selector sets the global

body { background-color: style rules for the entire page.
#E6E6FA; color: #191970;}
• These global rules are
h1 { background-color: #191970; overridden for <h1> and <h2>
color: #E6E6FA;} elements by the h1 and h2 style
rules.
h2 { background-color: #AEAED4;
color: #191970;}
</style>

06/21/24 T1 2022
 Configuring Text with CSS

• CSS properties for configuring text:

– font-weight
• Configures the boldness of text
– font-style
• Configures text to an italic style
– font-size
• Configures the size of the text
– font-family
• Configures the font typeface of the text

06/21/24 T1 2022
 The font-size Property
• Accessibility Recommendation: Use em or percentage font
sizes – these can be easily enlarged in all browsers by users

06/21/24 T1 2022
 The font-family Property

• Not everyone has the same fonts installed in

their computer
• Configure a list of fonts and include a generic
family name
p { font-family: Arial, Verdana, sans-serif; }

06/21/24 T1 2022
 Embedded Styles Example

<style>
body { background-color: #E6E6FA;
color: #191970;
font-family: Arial, Verdana, sans-serif; }
h1 { background-color: #191970;
color: #E6E6FA;
line-height: 200%;
font-family: Georgia, "Times New Roman",
serif; }
h2 { background-color: #AEAED4;
color: #191970; text-align: center;
font-family: Georgia, "Times New Roman",
serif; }
p {font-size: .90em; text-indent: 3em; }
ul {font-weight: bold; }
06/21/24 </style>T1 2022
 CSS Selectors

• CSS style rules can be

configured for an:
– HTML element selector
– class selector
– id selector
– descendant selector

06/21/24 T1 2022
 Using CSS with “class”

• class Selector <style>

.new { color: #FF0000;
– Apply a CSS font-style: italic;
}
rule to a certain "class" of </style>
elements on a web page
– Does not associate the
style to a specific HTML element
• Configure with .classname
– code CSS to create a class called “new” with red italic text.
Apply the class:
<p class=“new”>This is text is red and in italics</p>

06/21/24 T1 2022
 Using CSS with “id”
<style>
• id Selector #new { color: #FF0000;
– Apply a CSS font-size:2em;
rule to ONE element font-style: italic;
on a web page. }
</style>
• Configure with #idname
– Code CSS to create an id called “new”
with red, large, italic text.
• Apply the id:
<p id=“new”>This is text is red, large, and in
italics</p>
06/21/24 T1 2022
 External Style Sheets - 1

• CSS style rules are contained in a text file

separate from the HTML documents.

• The External Style Sheet text file:

– extension ".css"
– contains only style rules
– does not contain any HTML tags

06/21/24 T1 2022
 External Style Sheets - 2

– Multiple web pages can associate with the same

external style sheet file.
• site.css
body
body {background-
{background- index.html
index.html
color:#E6E6FA;
color:#E6E6FA;
color:#000000;
color:#000000; clients.html
font-family: clients.html
font-family: Arial,
Arial, sans-
sans-
serif;
serif;
font-size:90%;
font-size:90%; }} about.html
about.html
h2
h2 {{ color:
color: #003366;
#003366; }}
nav
nav {{ font-size:
font-size: 16px;
16px;
font-weight:
font-weight: bold;
bold; }}
Etc…

06/21/24 T1 2022
 Using an External Style Sheet
External Style Sheet color.css
body { background-color: #0000FF;
color: #FFFFFF;
}

• To associate the external style sheet called

color.css, the HTML code placed in the head
section is:
<link rel="stylesheet" href="color.css">

06/21/24 T1 2022
 Centering Page Content with
CSS
#container { margin-left: auto;
margin-right: auto;
width:80%; }

06/21/24 T1 2022
 The “Cascade”

06/21/24 T1 2022
 Summary

• This lecture introduced you to Cascading Style

Sheet Rules associated with color and text on
web pages.
• You configured inline styles, embedded styles,
and external styles.
• You applied CSS style rues to HTML, class, id,
and descendent selectors.
• You are able to submit your CSS to the W3C CSS
Validation test.
06/21/24 T1 2022
 Hands on with CSS

• External files(HTML and CSS)

• Visit the URL http://csszengarden.com.
• Select the styles and observe the difference
on appearance of webpage.
• What remained same while applying various
style?

06/21/24 T1 2022
 Checkpoint 3.1

• List three reasons to use CSS on a web page.

• When designing a page that uses colors other
than the default colors for text and
background, explain why it is a good reason to
configure style rules for both text color and
background color.
• Describe one advantage to using embedded
styles instead of inline styles.

06/21/24 T1 2022
 Checkpoint 3.2

• 1. Describe a reason to use embedded styles.

Explain where embedded styles are placed on a
web page.
2. Describe a reason to use external styles.
Explain where external styles are placed and how
web pages indicate they are using external styles.
• 3. Write the code to configure a web page to
use an external style sheet called “mystyles.css”.

06/21/24 T1 2022