CSS Introduction: The How and Whys of Applying Style

So far we've learned HTML is a bunch of tags describing the structure of your page. We talked about a lot of tags: <b> <i> <ul> <ol> <li> <table> <a> <img> <html> <head> <title> <body> And learned there's many more which we can learn about at HTML Dog's tag reference directory. Then we created some boring examples; this is because HTML alone is insufficient since all it does is describe the content of a page - this is a table, this is a paragraph, this is a list, this is the body, etc. The missing piece of the puzzle is CSS to add style.

CSS! What is it?
CSS stands for Cascading Style Sheets. The acronym will make more sense later on, so lets just break it down in plain English: CSS is a way to describe how the content on your page should look.

So. font-weight:bold.</div> color is called the declaration and blue is the value font-weight is also a declaration and bold is the value So CSS is just made up of declaration:value pairs assigned to HTML tags. padding:10px. <div style='color:blue. backgroundcolor:grey. this text is not. Div stands for division. say I was using a <div> tag to surround some text that I wanted to be blue: <div style='color:blue'>Roses are red.</div> What if I wanted to also make it bold? I can add that right to the style list (just as long as I separate them with a semicolon). font-family:courier.How does CSS work with HTML? CSS gets integrated right into your existing HTML document in a few different ways. The first way is to just add a style attribute (remember attributes from last class?) For this example. block that groups together pieces of your page. I could really go style crazy on this paragraph if I wanted: <div style='color:blue. this text is not. . margin:10px. lets use a new tag we haven't covered called the <div> tag.'>Roses are red. and it's just a simple. border:1px. font-weight:bold'>Roses are red. this text is not. kind of generic.</div> Styles are limitless.

but an even better way is to separate it from the HTML. Lets work from our basic HTML page template: <!DOCTYPE html> <head> <title>A Poem</title> </head> <body> <div> Roses are red. this text is not. </div> </body> </html> . Internal CSS is placed in the <head> of your document. which works.To see what style tags you have at your disposal. HTML Dog has a reference page for that. Separating your styles out from your HTML code Lets look at another way we can style our HTML with CSS. In the above method we were using the inline technique (we were writing it inline with the HTML).

each declaration:value pair is separated with a semicolon. inside the <head></head> tags add this bit of code: <style type='text/css'> div { color:blue. <style type='text/css'> .profit { color:green. ● For neatness sake I put each declaration:value pair on its own line.Now. but what if I didn't want all my div's to have that same style? In addition to applying styles to every instance of an HTML tag. That's great.} </style> Lets note some things about the above: ● The CSS code is nested inside a <style> tag. font-weight:bold. font-weight:bold. . you can target just specific HTML tags by giving them a class name. ● All the styles associated with the <div> tag are nested inside of an open and closing curly bracket { } ● Like inline styles.

00 dollars! :) </div> <div class='profit'> Your profit in July was +$17. <div class='profit'> Your profit this month was +$12.55 dollars! :) </div> Last method for applying styles: External (the most awesome way) When we apply styles externally we take the styles completely out of the page and move them into their own file.. That file then gets linked back to the pages we're working on. We can use our class names repeatedly: <div class='profit'> Your profit in August was +$12.} . font-weight:bold. we can apply the same styles to multiple pages! Imagine this scenario: .00 dollars! :) </div> <div class='loss'> Your loss this month was -$10. With external style sheets.} </style> .00 :( </div> The period in front of the class name in the style block lets it know we're targeting an element by its class name..55 dollars! :) </div> <div class='profit'> Your profit in June was +$147.loss { color:red.

} .profit { color:green.css .css" /> File: index. you only have to change it in your one master style sheet.css extension.html <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="styles. you connect that stylesheet you just created: <link rel="stylesheet" type="text/css" href="styles. } . in the head of your HTML page. To use an external style sheet you're going to take all of the CSS code out of your HTML and put in a separate file you name with a . Instead of having to edit every individual page making changes. no <style> tag is necessary. Because it's in a .css"> </head> <body> <div class='profit'> Your profit this month was +$12. just jump right into the CSS (see right).css document.00 :( </div> </body> File: styles.loss { color:red.00 dollars! :) </div> <div class='loss'> Your loss this month was -$10. font-weight:bold. Then.One day you decide your site made up of 20 different pages should have a green theme instead of a blue theme.

check out the CSS Zen Garden. Here's a metaphor describing the three different ways to use CSS in your .For a really interesting example of the power of external styles.

page. Note that you can use inline. . internal and external styles together on a page.

All of these quirky little rules are outlined in the reference for each style you're working with.com/200/200').com/200/200'). But some are more complex background-image:url('http://placekitten. sometimes values for a declaration can include multiple bits of information: border:3px solid green. so don't worry about memorizing every little detail.Some complexities of styles Most values for a style declaration are pretty simple: color:red. background-repeat:no-repeat. visited. hover. Links Links are unique from other text in that they have different states: link. And some work together to create a specific effect background-image:url('http://placekitten. background-position:center. Finally. active .

color:blue.By default links are underlined and blue (or purple if they've been clicked). Using this bit of CSS code we can change any of that. } Colors CSS has a selection of "named" colors you can use: color:red. } a:hover { color:#FF00FF. color:yellow. text-decoration:none. . a:link { color:#000000. So on. But if you want full control of your color... } a:active { color:#0000FF. you'll need to find it's hex value which is just an 8 character code specifying that color. using variations of shades. } a:visited { color:#00FF00.

Exercise Recreate the following page. margin padding width height border font-weight font-size You don't have to match stuff like width.just get close. color:#800E2A. Tip: You'll end up using these styles.com is a really simple tool that lets you figure out the hex value for the color you want.ColorPicker. . height or font-sizes exactly .

Sign up to vote on this title
UsefulNot useful