After you establish a CSS file with your coding software you need to link it to the HTML5 page using this:
<link rel="stylesheet" type="text/css" href="file_name.css" />.
This is the standard form for attaching CSS. After doing this you will now create some div(s). A div is just a way to order elements in the HTML5 file; they can be as big or as small as you want and are labelled as you see fit. For instance, this gray box is labeled as "article1" on the corresponding div since there are three of them in the document.
We are going to put a div on our cow page by wrapping the document from step 1 in a div property. Then we will create a CSS property to alter the looks of it and the page that it sits upon.
Wow you made it this far! You must be dedicated, but enough praise. Now that you have the more important stuff under your belt: lets talk about div(s) and CSS. Now the page you are looking at is a combination of div, class, and the corresponding CSS atributes that appear in a separate file. CSS code is quite simple compared to HTML5 code or rather it feels more straight forward. The relation of div to CSS is like that to a pizza delivery and a frat party
the div is the party and the CSS is the pizza. Without the div telling the CSS pizza delivery guy where to go you will not get your delicious cheesy treat. In short, the div identifies what, where and how to the CSS. If I wanted blue text then I would link the text to a particular CSS designation which states text color.
It can be confusing at first so we will review just the basics of CSS and div.
<body>
<p>
Ode to the Bovine,
Creature of the wide green field,
Whispering breezes</p>
<div id="cowbox">
<p>
Cows are very large and can weigh a ton (2000lbs). For the most part they are docile creatures with moon-eyes who want nothing more than to eat. They smell badly most of the time but a buttermilk bath and a large bow tied around their neck will make any cowgirl giddy.
</p>
</div>
</body>
That is how it should look when you code it. At this point you will switch to the CSS style sheet that you made with your software(usually just by saving a new file with a .css)
As mentioned before, CSS is very straight forward. To connect a behaviour to a div you first "id" the specific class and since you only have one"cowbox", which is found in the div, then that is what we will use.
The CSS format to idetify "cowbox" is .cowbox this way the browser knows that it should only apply the CSS rule to just "cowbox".
The CSS for "cowbox" would look like this:
.cowbox {
color: red; (makes the font red)
font-family: arial, verdana; (changes the font)
background-color: yellow; (makes the immeadiate area around the text yellow)
}
Also important is closing each characteristic with a semicolon as you see above. This will ensure that the browser recognizes what you want displayed.
