Learning Objectives:

You will learn how to modify a webpage using CSS.

You will be able to identify the difference between internal, inline, and external CSS.

Homework:

Post: Polish up the Homework Page using CSS and graphics

Read:  Chapters 6 & 7

Watch: Layout Design

Watch: How to use ChatGPT (A great way to create placeholder text that is relevant.)

Review: CSS W3schools Cover CSS Home to CSS Box Model

Watch: How the Homework Page Works

Your homework page needs to have all the links set up for class

Validation link: <p> <a href="https://validator.w3.org/check?uri=referer" referrerpolicy="no-referrer-when-downgrade"><img src="images/valid-html5.png" alt="HTML Valid"/></a>

Watch: How to update Validation Link and Check Validation

 

 

Watch: CSS intro movie

 

Reminder: Post your articles on Canvas under the Weekly Articles on the Discussion Board Section.

ChatGPT is a cool tool using AI

Additional Information:

The CSS Box Model

CSS: Adding Style to the Web

3 ways to attach a style sheet! Internal, External, and inline Style Sheets

Syntax for Internal and External Styles:

selector {property: value}

Example: h3 {color: #FF0000} 
This changes all h3's font color to Red (#FF0000)
You can apply multiple styles at once by separating them with a ; (semi colon)

Example: h3 
{
   color: #FF0000;
   font-family: Arial; 
}

Internal Styles use the style tag inside the head section of your webpage(Change the color of the h3 text and size of the font (text) inside a p tag)

<style type="text/css">

body { background-image: url("suns.jpg"); font-family:arial;}

h3 {color: #FF0000;}

p { font-size: 150%}

</style>

External Styles are called by using the Link tag

Example: <link rel="stylesheet" type="text/css" href="file-name_of_stylesheet.css" />

 

Inline styles are placed inside the tag (element) as an attribute!

Example: <p style="font-family: arial; font-size:1.1em;">

 

Terms:

CSS, link, internal styles, external styles, selector, property, value