Search Header Logo
Web Page Design

Web Page Design

Assessment

Presentation

Other

9th - 12th Grade

Practice Problem

Medium

Created by

Kaley Hudson

Used 36+ times

FREE Resource

8 Slides • 5 Questions

1

WP Unit 3 CSS

Cascading Style Sheets

Slide image

2

Cascading Style Sheets

  • (CSS) is used to format the layout of a webpage.

  • With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

3

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements

  • Internal - by using a <style> element in the <head> section

  • External - by using a <link> element to link to an external CSS file

4

Multiple Choice

<h1 style="color:blue;">A Blue Heading</h1>

1

Inline

2

Internal

3

External

5

Multiple Choice

<head>

<style>

body {background-color: powderblue;}

h1 {color: blue;}

p {color: red;}

</style>

</head>

1

Inline

2

Internal

3

External

6

Inline CSS

  • Used to apply a unique style to a single HTML element

  • Uses the Style attribute of an HTML element

7

Multiple Choice

Attribute

1

Represents the root of an HTML document. Example, <html>

2

Provide additional information about HTML elements. Example, href,style,id

3

<a> tag defines a hyperlink, which is used to link form one page to another.

8

Example of Inline CSS

<h1 style="color:blue;">A blue Headng</h1>


<p style="color:red;">A red Paragraph</p>

9

Internal CSS

  • Used to define a style for a single HTML page

  • Defined in the <head> secotion of an HTML page, within a <style> element.

10

Example of Inline CSS

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;}

h1 {color:blue;}

p {color: red;}

</style>

</head>

11

Multiple Choice

What section of an HTML page is an internal CSS defined?

1

<body> section

2

<head> section

3

<html> section

12

External CSS

  • Is used to define the style for many HTML Pages

  • Use an external style sheet, add a link to it in the <head> section of each HTML page

  • <link rel="stylesheet" href="styles.css">

13

Multiple Choice

To use an external style sheet, add a link to it in the _____ section of each HTML page.

1

<body> section

2

<head> section

3

<html> section

WP Unit 3 CSS

Cascading Style Sheets

Slide image

Show answer

Auto Play

Slide 1 / 13

SLIDE