Internal CSS
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, <style>, inside the <head> tag. The HTML code below contains an example of <style>'s usage.
CSS Code:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
This doesn't actually do anything visually. The code style tag just tells the browser that we will be defining some CSS to be used on this page.
Creating Internal CSS Code
CSS code is not written the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way of manipulating existing HTML. Below is an example of some simple, yet fully functional, CSS code.
CSS Code:
<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>
Display:
White text on a black background!
You probably noticed that in our CSS code we were altering the <body> and <p> HTML tags. The great thing about CSS is that it is an intuitive language. Once you understand the general format for CSS code, you are pretty much set.
General CSS Format:
-
"HTML tag" { "CSS Property" : "Value" ; }
Back in our code example, we manipulated <p> and <body>, 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 chose 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 <body>'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.
Internal CSS Gotta Knows
- Place your CSS Code between <style> and </style>
- Be sure you know the correct format(syntax) of CSS code.
- CSS will literally save you hours of time... after you spend a few getting the hang of it.
Found Something Wrong in this Lesson?Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time! Try it out! | 
