2. Quick Review
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
3. Quick Review
• External – separate .css file
• Internal – inside the <style> tag
• Inline – on the same line of code using the style attribute
4. CSS Inheritance
• Used when you have many sections of a website/web page and want them to
look differently
• Each section can be modified using both internal and inline CSS code
• Works like programming languages, such as Java or Python
5. General CSS – Remember?
• Uses our tags like paragraph <p> or header <h1> or <body>
• <style>
• p {
• color: red;
• }
• </style>
Internal CSS
6. Inheritance CSS
• First, create a class
<style>
.bobdole {
background-color: red;
color: blue;
}
</style>
Internal CSS
8. Another Example
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• .intro {
• background-color: yellow;
• }
• </style>
• </head>
• <body>
• <h1>Welcome to My Homepage</h1>
• <div class="intro">
• <p>My name is Jerry.</p>
• <p>George is unemployed and lives with his
parents.</p>
• </div>
• <p>My neighbor is Kramer.</p>
• <p class="intro">Gene sounds like Mickey.</p>
• </body>
• </html>
9. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
10. Link Defaults
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using CSS:
30. In Class Exercise
Change your html page created in In Class Exercise 1 to include CSS code so that your links and
paragraph section are different colors, size, and font. Make sure to use internal CSS code (i.e. code in the
HTML file).
31. CSS Assignment
• Create an HTML file called dropdown.html where you utilize internal CSS to
create a dropdown menu AND set CSS parameters [color, alignment, etc.]
for your headers and paragraphs.
• Your dropdown menu should include a Home, About Me, Class Info, and
Contact Me pages listed. Create dropdowns for both the About Me and
Class Info sections.
