Module 3
Introduction to CSS
USING STYLES TO ADD COLORS AND TEXT
This slideshow supplements the material in Chapter 3
of Web Development and Design Foundations with
HTML5
1
Agenda Module 3
1. Intro to the CSS language Module 3 in a Text Form
at
2. CSS Syntax
Lab Instructions
3. Three ways to Add CSS
4. Colors
5. The font-family Property and Google F
onts
6. Font Size and Other CSS Text Propertie
s
7. Classes and IDs
8. How to Center a Web Page
9. Lab Instructions
2
Frequently Asked Questions
Why is it important to have the folder and files in a specified way for this course?
When I have taught this class in the past I have found that some students had multiple sets of folders and files on their
computers, and they would do the homework for one module in one set of files and homework for another module in another
set of folders. To repair the damage, they would have to try to reconcile the work in two different sets of files. It is so difficult
to reconcile them that it is almost easier to start over than to try to reconcile two or more sets of files.
Why build a website template?
The purpose of keeping a template is that you have the code that you will need in EVERY website. You will need a good
template to work from when we are done with Joystick Junkies. You may also want a good starting point to make websites
after you finish this course. The template includes all of the code that you will only want to type one time in your lifetime,
like, "<!DOCTYPE html>". Having the template also makes sure that you have key elements included, like the semantic
elements. We will be adding to the template throughout the class modules.
Is making a website template optional?
No. When we work on Module 7 you will use the website template as a starting point. If you don't have the work on the
template, then you won't have the starting point you need.
Check Your HTML
Template
Take a few minutes to check your
HTML template against the image
at right. We will be adding to the
template in class today.
You may have something different
in the <main> section. That's
fine, because you will generally
delete the main section and start
over on each web page.
Your HTML template file should be
in the "template" folder, which is
in the "websites" folder.
Where are we going?
Module 2 vs. Module 3
There is quite a difference between the lab assignments for modules 2 and 3.
In the lab for modules three you see colors, fonts, and some centering.
At the end of this
slideshow, you will
know two coding
languages:
HTML and
CSS
Intro to CSS
What is CSS?
Cascading Style
Sheets
Cascading: The browser cascades through the
various CSS styles set throughout the website code.
In class we have one stylesheet, but a business
website will typically have several CSS stylesheets.
Stylesheets are used by organizations and
publishers. A style sheet will specify how a logo is
used and which fonts and colors can be used for the
organization's branding. With CSS we use code to
create the
Because style
the CSSsheet.
styles (eg. [Link]) are kept outside of the HTML, they apply to all
HTML pages. In the lab we will make one stylesheet for Joystick Junkies, and we will link
to the same stylesheet to both the [Link] and [Link] pages.
9
What is a cascade, anyway?
This is a
cascading
waterfall.
Definition of "cascade"
What does CSS do?
Definition from W3C
• Adds color CSS is the language for describing the presentation of
• Changes text Web pages, including colors, layout, and fonts. It allows
appearance one to adapt the presentation to different types of
devices, such as large screens, small screens, or
• Add background printers. CSS is independent of HTML and can be used
images with any XML-based markup language. The separation
of HTML from CSS makes it easier to maintain sites,
• Sets height and share style sheets across pages, and tailor pages to
width different environments. This is referred to as the
• And much more! separation of structure (or: content) from presentation.
12
CSS Color Properties
The background-color property is used for setting
background colors. The code looks like this:
background-color: yellow;
The color property is used for the text color:
color: black;
Demo: Inline CSS
Click the PLAY button
Exercise: Inline CSS
Practice: Let's jump right in and add a CSS
style to [Link]
1. Copy or type this HTML element into the
HTML Section of JSFiddle.
<h1>Hello World</h1>
2. Add a text color inside of the h1 tag with
the style attribute:
<h1 style="color:blue">
Add a background color with a semicolon in
between each of the CSS properties:
<h1 style="color:blue; background-
color:red">
Your JSFiddle should look like this…
Why isn’t the font color called
font-color or text-color?
There is no clear answer to that
Use the
question. Make a mental note that "color"
"color" means text color in CSS.
property to
set the text-
color in CSS
Demo: Cascading Styles
Click the PLAY button
Exercise: Cascading Styles
Go to [Link]. Type or copy this code into the HTML section.
<div style="background-color:gray">
<h1 style="background-color:green">Adding inline
CSS styles</h1>
</div>
Think about it before you hit the Run button. Note that we have
set the h1 background-color to be both gray and green.
When there are two styles for the background-color,
which one wins?
20
And we have a winner….
And the winner is the more specific
CSS in the <h1> element!
CSS Syntax
CSS Formatting
CSS syntax has requires three definitions: the
selector, the property and the value.
Selector: The "selector" selects the HTML. This can
be an HTML Element or it also can be defined by an
HTML attribute, like class and id. In the example at
right,, the selector selects the <body> of the
website.
Property: The property defines which aspect of the
selector will be changed; for example, the color or
the font.
Value: The value defines what the color, size or
shape of the property. For example, if the property is
"color", then the value could be "blue".
The selector is followed by curly braces, and the
property:value statements go inside of the curly
braces. The property and value are separated by a
colon, and the property:value statement ends with a
semicolon.
Pop Quiz
Identify the following:
Value
Selector
Property
1._____________
2.____________
3.____________
Three Ways to Add CSS
3 Ways to Add CSS
Option 1: Inline Styles
<p style="color:blue">The text is blue</p>
This is the "Quick and Dirty" way to add styles, and is sort of a hack. We just
added inline styles in JSFiddle.
Option 2: Embedded Styles
You can add styles to the <head>inside of <style></style> tags. This is often
used in tutorials, where it is handy to have all the code in one file.
Option 3: External Stylesheet
You create a separate code file with a .css file extension, usually named
“[Link]”. This is the best practice and where we will write CSS for class.
26
Option 1: Inline CSS
We added inline CSS in the previous JSFiddles.
Inline styles:
● Are added in the body of the web page
● Use the style attribute
● Apply only to the specific element
● Are used for a quick fix
27
Option 2: Embedded
Embedded CSS is added in the web page <head>
<head> ● Syntax is the same as an
<style>
external style sheet
body{ ● Place in the html <head>
background- in between style tags
color: red;
● See the example on this
color: black; video game:
} [Link]
[Link]?filename=trygame_default_grav
</style> ity
</head>
28
Option 3: External CSS
External CSS goes into a
separate style sheet.
Using External CSS is a best
practice
We will use an external CSS
style sheet for Joystick
The website files work together to make the website. In
Junkies and all lab the screenshot above, you can see that there are three
assignments HTML files, one CSS file, a favicon, and an images folder.
All of these files work together to make the website.
29
Demo: External CSS
Click the PLAY button
Exercise: External CSS
1. Go to [Link]
2. Change your fiddle from inline to external CSS by moving the CSS to the
CSS section.
Attaching an External CSS File
If the CSS is not in the same file as the HTML,
how does the browser know where to find it?
32
A Website is a Set of
Files
The files are linked together in
code.
The code references the other
files based on their location in
the file structure.
<a href="[Link]">Game List</a>
Example <link rel="stylesheet" href="[Link]">
s
Demo: Link and Test Stylesheet
Click the PLAY button
Exercise: Link CSS
Step 1. Go to your templates folder
Step 2. In the text editor, create a
new file. Use Save As to name the Add a [Link] file to your template (Step
file, "[Link]". Make sure you save 2)
it in the template folder.
Step 3. Open your
template/[Link] file
Step 4. Copy this code to the head:
<link rel="stylesheet"
href="[Link]">
Place the stylesheet link in the <head> (Step 4.)
35
Exercise: Test External CSS
Work in your template/[Link] and template/[Link]
files.
Step 1. Add this code to [Link] in the <main> section
<h2>Using CSS to add styles</h2>
Step 2. Enter this code in [Link]
h2 {
color: blue;
background-color: yellow;
}
Step 3. Save both files.
Step 4. View [Link] in the Chrome browser. You
should see the yellow background and blue text on the
<h2>
36
Exercise: Remove Test CSS
Now that you know you have correctly attached
the CSS style sheet, you can delete the code we
added for our test.
Step 1. Delete this code from [Link]
<h2>Using CSS to add styles</h2>
Step 2. Delete this code in [Link]
h2 {
color: blue;
background-color: yellow;
}
Step 3. Save both files.
37
Add Stylesheet to Template
If you skipped the exercise in the previous slide, go back an
do it now. This is part of the lab for this module. When going
through the slideshow, look for the sticky notes and take a
moment to try the exercises. Some exercises, like this one,
involve modifications to the template and are graded.
Colors
Color Syntax Options
So far we have just used color names. You can also use much
more specific colors. Here are three ways to add color values:
1. Color name (eg. purple, blue, green)
2. Hexadecimal (eg. #FFFFFF). This is used most frequently.
3. RGBA (to include opacity). This is a special use case if you
would like to be able to see through the colors.
color: purple;
color: #800080;
color: rgba(128,0,128,1);
Tricks of the Trade
● Use Color Picker tool at W3 Schools to find hex
numbers for colors.
● Use hex colors because they are easier unless you
need to set the opacity. If you need to use opacity,
then use RGBA.
● Adobe tool for color selection:
[Link]
41
Demo: Color Practice with Hex
Click the PLAY button
Exercise: Hex Colors
Open [Link].
Pick out some
hexadecimal colors
from W3 Schools
and add them to
JSFiddle. Your JSFiddle will look something like this, but with
the colors you picked out instead of the colors
shown here.
43
Demo: Color Practice with RGBA
Click the PLAY button
Exercise: RGBA Colors
Open JS Fiddle.
1. Cut and paste this into the CSS Section :
body{
background-image:url(
[Link]
late/images/[Link]
);
2. Add a title in <h1> tags with a white color (#FFFFFF);
3. Change the color from white to RGBA with opacity
of .5. Make the font larger. See the code below.
h1{
color: rgba(255,255,255,.5);
font-size:4em;
} 45
Your JSFiddle Should Look Like This…
The font-family Property
font-family Property
The font-family property sets the font choice. The
code looks like this.
p {
font-family: Arial, Verdana, sans-serif;
}
● This code instructs the browser to first look for the Arial font.
● If Arial isn't available, then use the Verdana font.
● If Verdana isn't available, then use the default sans-serif font
for the browser.
Note that the three fonts are separated with a comma. 48
Web-Safe Fonts
For a complete list: Web-safe fonts
Web-safe fonts are generally available
on all browsers. You can see five of
them on the image at the right.
Using web safe fonts make a website
load a bit more quickly.
Web designers generally consider the web safe fonts
to be too limiting. Because of that, most websites
today use Google Fonts instead of Web Safe Fonts.
49
Google Fonts
See the Google Font choices at [Link]
Google Fonts are FREE!
There are two steps to using a Google Font.
1. Import the font stylesheets to your stylesheet
2. Add the font to the specified CSS, like the body or
an h1.
Filtering Google Fonts
Because there are so many free fonts
available, it can be difficult to navigate. Use
the left panel to filter.
● Type in your name or some text into the
preview
● Play with the various filters to find a font
that you like.
Selecting Fonts
Once you decide on a font-family,
then click the Get Font button.
When you are done selecting font-
families, go to your shopping cart.
Click the Get Embed Code button.
Importing Google Fonts
In order to make a font-family available for your use, you need
to import the font-family into your website. The easiest way to
do this is by adding the @import code to the top of your CSS
file.
Easy to Read Fonts
In web design, it is important to make the text easy to
read, especially the regular text.
A common practice it to choose an easy to read font for
the overall text, and then to override it for the major
headings.
Demo: Google Fonts
Click the PLAY button
This video is a bit outdated, but may
help you see what we are trying to
do. Use the detailed instruction on
the prior page for up to date
screenshots.
Exercise:
Add a Google font that is easy to read
Work in your template/[Link] file.
The code in your CSS file should
Step 1. Go to [Link]
look something like this:
Step 2. Select a font that is easy to read. This will be the
base font for your website template. Some popular fonts that @import
are easy to read are Roboto, Open Sans, Montserrat, or Lora. url('[Link]
family=Montserrat:ital,wght@0,100..900;1,10
Step 3. Find and click the Get Font button.
0..900&display=swap');
Step 4. Place the @import at the top of your CSS file in your
website template. (Don't bring over the <style> tags.) body{
Step 5. Now that you have the font imported, you can use it font-family: "Montserrat", sans-serif;
on the website. Write the CSS to add the font to everything in }
the website body, using "body" as the selector with the font-
family property.
Step 6. Save your CSS file, and open [Link] in the
browser
Having Trouble?
I have a blog post with detailed instructions:
[Link]
Optional Exercise:
Add a decorative Google font for headings
Step 1. Go to [Link]
The code in your CSS file should
Step 2. Select a second decorative fonts. look something like this:
@import url('
Step 3. Place the @import at the top of [Link]
your CSS file in your website template. You s+Into+Light&family=Ubuntu+Sans:ital,wght@0,100
..800;1,100..800&display=swap
can either bring over a second import tag, ');
or replace your original import with the code body{
for multiple fonts. You can see your font font-family: "Ubuntu Sans", sans-serif;
}
selections inside of the import tag.
h1, h2, h3{
Step 4. Add a selector for the headings, eg. font-family: "Shadows Into Light", cursive;
}
h1, h2 or h1, h2, h3. Add the font-family
code to the selector.
Sample Font Code
(Optional Heading Font)
Your code will look something like this. Make sure there is a
semicolon at the end.
● In this example I have a different
font for h1 and h2 only.
● I put in the overall body font-
family and color first and then I
overrode it with the special font-
family and color for the h1 and
h2.
● Use your own font-families and
colors for this step.
A word of warning: Do not attempt to type the import tag
at left. Find your own fonts and cut and paste them into
your stylesheet.
Add one or two Google Fonts to [Link] in your template
If you skipped the exercise in the previous slide, go back an
do it now. This is part of the lab for this module. When going
through the slideshow, look for the sticky notes and take a
moment to try the exercises. Some exercises, like this one,
involve modifications to the template and are graded.
font-size and Other Text Properties
font-size Property
● You can use pixels, points,
EMs, or percentage to set
the font size
● EMs are best practice
● EMs come from the width
of an “M” in typography
● 16 pixels = 1em
Other CSS Text Properties
There are a many other text properties. Listed below are the most
commonly used text properties.
font-weight: The values would usually be "bold" or "normal"
text-align: You can use this property to align the text to center, right or
left. Left is the default.
line-height: This is the spacing between each line. A nice setting is 1.5.
letter-spacing: This is the spacing between each letter. It makes a nice
effect on a heading.
Demo: Font and text properties
Click the PLAY button
Exercise:
font and text properties
<h1> Placeholder Text </h1>
1. Open [Link]. <p> Lorem ipsum dolor sit amet,
2. Add some text to the HTML consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et
section with HTML markup. Copy dolore magna aliqua. Ut enim ad minim
the code and text at right. veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
3. Modify your font-size with in commodo consequat. Duis aute irure
the CSS dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint
Try the following CSS properties. occaecat cupidatat non proident, sunt
font-weight: normal|bold in culpa qui officia deserunt mollit
line-height: Eg. 1.5 anim id est laborum. </p>
text-align: left|right|center
letter-spacing: Eg. 2px
65
Your JSFiddle should look something like this…
Classes and IDs
Refresh on the Selector
In CSS, the selector "selects"
which HTML it will modify.
Pick me!
Pick me!
CSS Selectors
SELECT
which HTML to style
Types of CSS Selectors
So far we have used the HTML element as the selector,
like body or h1. Now we are going to learn about more
advanced types of selectors.
● class selector
● id selector
● descendant selector
But first, we need a quick review of HTML Attributes.
70
Review of HTML Attributes
Attributes modify the HTML element, like this:
<h1 class="headline">My Headline</h1>
Sometimes an element will have several attributes, like
this:
<h1 class="headline" id="headline">My
Headline</h1>
Note that there is a space between the class and the id
attributes.
Common Typos with HTML Attributes
Can you spot the typos?
<h1 class=headline id=headline>
<h1 class="headline id="headline>
<h1 class="headline"id="headline">
Common Typos with HTML Attributes
<h1 class=headline id=headline>
The developer missed the quotation marks.
<h1 class="headline id="headline>
The developer missed the closing quotation marks
<h1 class="headline"id="headline">
The developer didn't put a space in between the two
attributes.
New attributes: id and class
Use id when you need to use the CSS once on the page.
Use class if the CSS may be used more than once on the
page.
Note: Classes are typically used for CSS rather than ids,
because they can be reused.
HTML and CSS are different languages
The syntax is different in HTML and CSS.
HTML Attribute CSS Selector
class="textbox" .textbox
id="sidebar" #sidebar
Why would you add a class or ID attribute?
While working in CSS, you want to
think about big-picture styles, like,
"How do I want all of the <img> In designing a website, you want a
consistent look for all images. In the
elements to display on the website?" example at left, the designer is creating
a look for the images that looks like an
old-fashioned printed photo.
However, it is often necessary to style
something less broadly for the entire
website. For example, you may want
the <img> tags to appear differently
when the <img> tag is used for a logo.
The look of an old-fashioned printed
Following the example of an <img>, photo wouldn't be a good design idea
on the logo. To select the logo
you would code the HTML like this: differently than other images, you could
<img class="logo">. Then, in the add a class to it: <img class="logo" …>
CSS you can select .logo and apply
different styles to the logo image only.
Demo: Class and ID Selectors
Click the PLAY button
Exercise: Class Selector
Add a class and id in the HTML and CSS in JSFiddle.
Your Fiddle should look something like this:
78
Pop Quiz
When would you use "id"?
When would you use "class"?
79
Class vs ID
• Class is used more frequently than ID, because it can
be reused throughout a website
• ID can only be used once on a page.
• Before CSS3 and the semantic elements, we used it for a
footer or nav, eg. <div id="footer">
• ID is often used as a selector in Javascript
• In most cases you should use a class instead of an ID.
80
Descendent Selector
Sometimes you need to have a selector that is more specific than only an
element. We'll learn a lot more in upcoming modules about advanced selectors.
One commonly used advanced selector is the SPACE, the descendant selector.
Example:
nav a{
text-decoration:none;
}
In English:
"If there is an a tag inside of a nav tag, then apply this CSS"
See more CSS Combinators:
[Link]
Span and Div
<span> and <div> are generic elements you can add in order to
select parts of the websites.
For example:
<p>We can help you make a website at <span class="company-
name">Platypus Web Design</span>.
We will work with you to build your website.</p>
<span> tags are used for smaller sections of text.
<div> is used around larger sections (more to come on this).
82
How to Center a Web Page
How to Center a Web Page
You can center a block element by setting the margin to auto on both the
left and right sides. The code below is used to set the main section of the
website to a maximum width of 800px, and then center it horizontally.
main{
margin-left: auto;
margin-right: auto;
max-width: 800px;
}
Demo: Centering Page Content 3.10
Click the PLAY button
Exercise: Centering A Page
Open [Link]. Add some content and add a
div with the id of wrapper around it. Center it.
#wrapper {
width:80%;
margin-left: auto;
margin-right: auto;
}
86
Your JSFiddle should look like this…
Changes to the Template
Let's add what we have learned to your template.
We'll center most of the content on the page and add a max-width to the <main> section. The next slides will walk
you through the steps.
Centering the <header> Section
We'll start at the top of the page and make the template a better
starting point for future websites.
Let's start by centering the website header for your template.
Add this CSS to your stylesheet.
Centering the <nav> Section
Center the navigation with text-align: center
Style the <main> section
On a typical website, the footer, header, and nav are full width, but the main section has a
maximum width applied. We'll use 1000px for the template, but this is a value that could
change based on the website.
Step 1. Add a main selector to your CSS file.
Step 2 Apply a max-width of 1000px to the main section.
Step 3. Center the main section with margin: 20px auto.
Step 4. Add 10px of padding
Centering the Footer
Last but not least we will center the footer.
Check Your Template
Your Google Fonts will be different than these
screenshots.
Take the Quiz
Now that you have finished reading Chapter 3 and studying this
slideshow, take the Module 3 Quiz in D2L.
I highly recommend taking the quiz before you start the lab assignment.
The open book quiz questions are designed to help you review the
material so you will know how to do the lab assignments.
Lab Instructions
Check Your Template
On the [Link] file, the only
thing we added is the <link> in
the template to the stylesheet.
In the [Link] file, we imported
one or two Google Fonts, and
added some code to select those
fonts.
Is it better to do the
lab your own way,
or to do it step by
step with the
instructions?
Follow Each Step
● For this phase of class, follow each step exactly.
● When doing the labs, not every instruction has a purpose that
you can see immediately.
● For example, if you skipped the semantic tags in Lab 2, your
website would display perfectly in the browser for Lab 2.
However, some of the CSS will not work in Lab 3, because it
relies on the semantic tags being there.
There will be more opportunity for creativity very soon.
Lab: Joystick Junkies Chapter 3
Hints
● Work step by step. Don't skip over steps in
the lab.
● If the CSS doesn't work, perhaps you
Joystick Junkies Lab 3 skipped the semantic tags. Recheck your
work from the last module against the
solution.
● If your text is all bold, you haven't closed
the a bold tag or a header tag that defaults
to bold.
● If you didn't start with the starter files, you
will need them for future assignments.
