Unit 4 - DIV/SPAN Outside CSS
In your coding software or host, create a CSS file that ends in css such as customcss.css. This is where you'll put your outside CSS. I will explain why outside CSS is better in certain situations in Unit 6, but for now, let's focus on how to do it.

Within the <head> tag of your HTML file, insert the following code:

1. <link rel="stylesheet" type="text/css" href="customcss.css">


The code tells the HTML file to find a CSS file and use it. Now that the CSS file is linked, how do we format it to tell a certain DIV or SPAN to act a certain way?

Let's look back at Unit 3's first code example where I make a colored DIV box. Here it is for easy reference:

1. <div style="background-color: lightblue">
2. I'm text
3. </div>
4. <div style="background-color: lightgreen">
5. I'm even more text
6. </div>


Outcome:

I'm text
I'm even more text


Now instead of the style attribute being within the DIV's beginning < and ending >, the style will be within the CSS file. In order to that, we must identify that DIV so we put the correct background color on the correct DIV.

We now need to add the class attribute and give it a name that makes it easy for us to recall what DIV we're referring to. In this case, I'll name the first DIV "lightblue" and the second DIV "lightgreen".

Within the CSS file:

1. .lightblue {
2.  background-color: lightblue;
3. }
4. .lightgreen {
5.  background-color: lightgreen;
6. }


Within the HTML file:

1. <div class="lightblue">
2. I'm text
3. </div>
4. <div class="lightgreen>
5. I'm even more text
6. </div>


Outcome:

I'm text
I'm even more text


Remember that you must identify the DIV with a class name. Then in the CSS file, make sure to use the class name that matches the DIV you want to style. You can have muiltiple DIV within the same HTML file. If the words "I'm text" and "I'm even more text" were both within a DIV thats class name was "lightblue", both "I'm text" and "I'm even more text" would follow the DIV with the class name "lightblue". In other wods, both background colors would be blue.

Here is an example of two different texts with the same DIV class name:

Within the CSS file:

1. .lightblue {
2.  background-color: lightblue;
3. }
4. .lightgreen {
5.  background-color: lightgreen;
6. }


Within the HTML file:

1. <div class="lightblue">
2. I'm text
3. </div>
4. <div class="lightblue">
5. I'm even more text
6. </div>


Outcome:

I'm text
I'm even more text


A few other formatting things to note about CSS is that all the attributes must be enclosed within { and }. Also you could write your CSS like this:

1. .lightblue {background-color: lightblue; }

2. .lightgreen {background-color: lightgreen;}


Now what if I want the background color to be blue and for the text in the DIV to be red instead of default black?

Just like in in-line styles, separate each new style with a semicolon. To show this, I will rename my DIV class to "lightblue-red" as I am also using outside CSS to show you what the outcome looks like.

1. .lightblue-red {
2.  background-color: lightblue;
3.  color: red;
4. }


Within the HTML file:

1. <div class="lightblue-red">
2. I'm text
3. </div>


Outcome:

I'm text


Your class name cannot have a space. If my class name was "lightblue red", the HTML file would assume I want to pull style information from "lightblue" and "red". You only want to use a space when you have a DIV that you want to have multiple different styles on. You could have a class name that is "text-blue" which makes text color blue and another class name that is "text-italic" and if you combine the class names to become <div class="text-blue text-italic>, the text inside that DIV would be both blue and italic.

There is another way to customize a DIV. You learned how do it within the DIV style attribute and just now how to do it in a CSS file. There's a hybrid of these two methods that can be good in certain situations. It is within the HTML file (so you don't need a CSS file), but using the structure and format of the CSS file.

Telling the website that you're beginning to insert CSS within the HTML file but not directly into the DIV is done by putting the <style> tag, inserting the CSS, and then ending it with </style>. I suggest placing the style tag after the header and keeping all your CSS in that one style tag. You can put style tags anywhere in the HTML file but I don't suggest it.

Within the HTML file:

<style>
1. .lightblue {
2.  background-color: lightblue;
3. }

4. .lightgreen {
5.  background-color: lightgreen;
6. }
7. </style>

8. <div class="lightblue">
9. I'm text
10. </div>
11. <div class="lightgreen>
12. I'm even more text
13. </div>


Outcome:

I'm text
I'm even more text


In the end of Unit 1, I showed you how to put HTML comments into a HTML file. In a CSS file there are also comments but the formatting is different. Note that the CSS comment only works within a CSS file and within the <style> tag. Funny story, while coding in a CSS file, I forgot that CSS had different format comments and put HTML comments in the CSS file. Well...all the coding below the HTML comment broke. Don't make this mistake! Most coding softwares will show the CSS commenting in a faded color.

Here's what a CSS comment would look like:

1. /* Words */


And on multiple ines:

1. /* Words
2. More words?
3. Even more! */