AGENDA
Day 2: Applying CSS to HTML
Lesson 3: Applying Styles Using CSS
Example: background color
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
Alignment Tags:
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>
Day 2: Applying CSS to HTML
Lesson 3: Applying Styles Using CSS
- Enhance Text
- Modify the Page Background
- Applying CSS - The different ways you can apply CSS to HTML.
- Selectors, Properties, and Values - The bits that make up CSS.
- Text - How to manipulate the size and shape of text.
- Colors - How to use color. (Color Links (Choices) - http://www.w3schools.com/cssref/css_colors.asp
Example: background color
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<p id="firstname">My name is Donald.</p>
<p id="hometown">I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
Alignment Tags:
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: text-top;
}
img.bottom {
vertical-align: text-bottom;
}
</style>
</head>
<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>