|
Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag, , inside the <head> tag.
The HTML code below contains an example of <style>'s usage.
Example:
<html>
<head>
<style type="text/css">
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
<html>
Background Color will be black and text color will be white
General CSS Format:
HTML tag { CSS Property: Value; }
Back in our code example, we manipulated
and , both well known HTML tags. To clarify, here is a step-by-step process of what is going on in that first line of CSS code where we played around with "p".
• We choose the HTML element we wanted to manipulate. - p{ : ; }
• Then we chose the CSS attribute color. - p { color: ; }
• Next we choose the font color to be white. - p { color: white; }
Now all text within a paragraph tag will show up as white! Now an explanation of the CSS code that altered the 's background:
• We choose the HTML element Body - body { : ; }
• Then we chose the CSS attribute. - body { background-color: ; }
• Next we chose the background color to be black. - body { background-color: black; }
Until you become accustomed to using CSS code, you will probably find your CSS code not working as you expected. A leading cause of this might be an out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or } when it was required. Be sure to check back here if you ever have issues with the correct format for CSS.
|
