Chapter 8 - Getting Started With CSS
Thursday - What is CSS
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title> </title>
</head>
<body>
</body>
</html>
2. We need to look at the <style> area in our code so we can put more "style" to our web pages. (as seen in green)
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title>Starbuzz Coffee</title>
<style type ="text/css" >
</style>
</head>
<body>
WE WILL also need to start checking our coding to make sure it is a valid XHTML file. We will be using the W3C Markup Validation site. See video how to upload file to check.
- CSS = Cascading Style Sheets, which helps define our style in our HTML files.
- Because we are adding more STYLE to our pages, we need to do several things:
- Add the following code (in blue to our html files). This changes our doctype to HTML5 for use of more advance devices and applications.
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title> </title>
</head>
<body>
</body>
</html>
2. We need to look at the <style> area in our code so we can put more "style" to our web pages. (as seen in green)
<!DOCTYPE html>
<head>
<meta charset = "UTF-8">
<title>Starbuzz Coffee</title>
<style type ="text/css" >
</style>
</head>
<body>
WE WILL also need to start checking our coding to make sure it is a valid XHTML file. We will be using the W3C Markup Validation site. See video how to upload file to check.
In-class Assignment: THE LOUNGE
- In your WEB folder, create a new folder called CHAPTER8
- Download the following .zip file
hfhtml_ch08.zip | |
File Size: | 37 kb |
File Type: | zip |
3. Unzip file. You should have a lounge 3 folder
4. Open up the lounge.html file.
5. Change the doctype area to...<!DOCTYPE html>
your page should NOT have the same <meta> tag as well. You just need the to add the items that are colored in the "New" area below... so <meta> will change and add the <style type="text/css"> information.
4. Open up the lounge.html file.
5. Change the doctype area to...<!DOCTYPE html>
your page should NOT have the same <meta> tag as well. You just need the to add the items that are colored in the "New" area below... so <meta> will change and add the <style type="text/css"> information.
Old<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Head First Lounge</title> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1> <p><img src="images/drinks.gif" alt="Drinks" /></p> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body> </html> |
New<!DOCTYPE html>
<head> <meta charset = "UTF-8"> <title>Head First Lounge</title> <style type = "text/css" > </style> </head> <body> <h1>Welcome to the New and Improved Head First Lounge</h1> <p><img src="images/drinks.gif" alt="Drinks" /></p> <p> Join us any evening for refreshing <a href="beverages/elixir.html">elixirs</a>, conversation and maybe a game or two of <em>Dance Dance Revolution</em>. Wireless access is always provided; BYOWS (Bring Your Own Web Server). </p> <h2>Directions</h2> <p> You'll find us right in the center of downtown Webville. If you need help finding us, check out our <a href="about/directions.html">detailed directions</a>. Come join us! </p> </body> </html> |
Changing Font Color
- Check the file in the W3C validator
- Once OK and validated...meaning you show take a screen shot of the validated page.
- When you are done and your lounge.html file looks like the AFTER... compress the folder and submit using Schoology and HAND IN the IN CLASS ASSIGNMENT: The Lounge
- MOVE ON TO NEXT ASSIGNMENT BELOW FOR Thursday and Friday
Thursday and Friday (12/2/16)
CHAPTER 8 - Adding Class
- When we add "class" to our files we will be concentrating on defining our elements and giving them a name so that our selectors can call upon the class name.
Using the information shown in the above, complete the following in-class assignment Elixir.html
1. Using your Chapter 8 lounge folder, you will use the elixir.html file found in your beverage folder.
2. You will CHANGE the elixir.html file using multiple p selectors and p class names. DO NOT use spaces or characters in your names! EX: p.red{ color: red; } p.drinkBlue{ color:blue; } <p class="red"> <p class="drinkBlue"> 3. Your goal is to get elixir.html to go from BEFORE to look like AFTER 4. Validate and check using W3C 5. When done, compress your lounge folder and submit in Schoology using the assignment ELIXIR ASSIGNMENT |
MAKE SURE YOU MAKE THE HTML5 Changes with the doctype and meta tag.
|
Friday Elixir Class
Using the information shown in the above and the the following video... create a css page
CREATING A CSS page.
font-family: sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } p.greentea { color: green; }
<meta charset = "UTF-8"> <title>Head First Lounge Elixirs</title> <link rel="stylesheet" href="../lounge.css" /> </head>
|
|