Scribd
Upload
68 views

CSS Introduction: The How and Whys of Applying Style: Recap

This document provides an introduction to CSS (Cascading Style Sheets) and how it is used to style HTML content. It discusses three main ways to apply CSS styles: inline styles using the style attribute, internal styles within the <head> section, and external stylesheets linked via the <link> tag. The document also covers CSS declarations and values, targeting elements by class or ID, link states, named and hex colors, and includes an exercise to recreate a sample page.

Uploaded by

Susan Buck
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
68 views

CSS Introduction: The How and Whys of Applying Style: Recap

This document provides an introduction to CSS (Cascading Style Sheets) and how it is used to style HTML content. It discusses three main ways to apply CSS styles: inline styles using the style attribute, internal styles within the <head> section, and external stylesheets linked via the <link> tag. The document also covers CSS declarations and values, targeting elements by class or ID, link states, named and hex colors, and includes an exercise to recreate a sample page.

Uploaded by

Susan Buck
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS Introduction: The How and Whys of Applying Style

Recap
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.

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, lets use a new tag we haven't covered called the <div> tag. Div stands for division, and it's just a simple, kind of generic, block that groups together pieces of your page. So, say I was using a <div> tag to surround some text that I wanted to be blue: <div style='color:blue'>Roses are red, this text is not.</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). <div style='color:blue; font-weight:bold'>Roses are red, this text is not.</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. I could really go style crazy on this paragraph if I wanted: <div style='color:blue; font-weight:bold; font-family:courier; border:1px; backgroundcolor:grey; margin:10px; padding:10px;'>Roses are red, this text is not.</div> Styles are limitless.

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), which works, but an even better way is to separate it from the HTML. Internal CSS is placed in the <head> of your document. 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>

Now, inside the <head></head> tags add this bit of code: <style type='text/css'> div { color:blue; font-weight:bold;} </style>

Lets note some things about the above: The CSS code is nested inside a <style> tag. All the styles associated with the <div> tag are nested inside of an open and closing curly bracket { } Like inline styles, each declaration:value pair is separated with a semicolon; For neatness sake I put each declaration:value pair on its own line.

That's great, 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, you can target just specific HTML tags by giving them a class name. <style type='text/css'> .profit { color:green; font-weight:bold;

} .loss { color:red; font-weight:bold;} </style> ... <div class='profit'> Your profit this month was +$12.00 dollars! :) </div> <div class='loss'> Your loss this month was -$10.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. We can use our class names repeatedly: <div class='profit'> Your profit in August was +$12.00 dollars! :) </div> <div class='profit'> Your profit in July was +$17.55 dollars! :) </div> <div class='profit'> Your profit in June was +$147.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. With external style sheets, we can apply the same styles to multiple pages! Imagine this scenario:

One day you decide your site made up of 20 different pages should have a green theme instead of a blue theme. Instead of having to edit every individual page making changes, you only have to change it in your one master style sheet.

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 .css extension. Because it's in a .css document, no <style> tag is necessary, just jump right into the CSS (see right). Then, in the head of your HTML page, you connect that stylesheet you just created: <link rel="stylesheet" type="text/css" href="styles.css" /> File: index.html
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class='profit'> Your profit this month was +$12.00 dollars! :) </div> <div class='loss'> Your loss this month was -$10.00 :( </div> </body>

File: styles.css
.profit { color:green; font-weight:bold; } .loss { color:red; }

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

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

Some complexities of styles


Most values for a style declaration are pretty simple: color:red; But some are more complex background-image:url('http://placekitten.com/200/200'); And some work together to create a specific effect background-image:url('http://placekitten.com/200/200'); background-repeat:no-repeat; background-position:center; Finally, sometimes values for a declaration can include multiple bits of information: border:3px solid green; All of these quirky little rules are outlined in the reference for each style you're working with, so don't worry about memorizing every little detail.

Links
Links are unique from other text in that they have different states: link, visited, hover, active

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. a:link { color:#000000; text-decoration:none; } a:visited { color:#00FF00; } a:hover { color:#FF00FF; } a:active { color:#0000FF; }

Colors
CSS has a selection of "named" colors you can use: color:red; color:blue; color:yellow; So on... But if you want full control of your color, using variations of shades, you'll need to find it's hex value which is just an 8 character code specifying that color.

ColorPicker.com is a really simple tool that lets you figure out the hex value for the color you want. color:#800E2A;

Exercise
Recreate the following page. Tip: You'll end up using these styles. margin padding width height border font-weight font-size You don't have to match stuff like width, height or font-sizes exactly - just get close.

You might also like