CSS: Connecting And Applying Styles

Styling Webpages With CSS

TIME LIMIT: 3 HOURS

Once you’ve created and structured your content with HTML, you can style it with CSS.

CSS stands for Cascading Styles Sheets. A CSS stylesheet is just a collection of 1 or more CSS blocks

CSS selectors pick out HTML elements

and then style them. Each individual piece of style can also be called a “rule”. When more than one rule applies to element and a conflict occurs, a “cascading” priority scheme decides which rule wins.

Cascading” refers to how the CSS language decides which style to apply when a piece of content has more than one CSS rule applying to it.

This primer

CSS Rules: How to Style An HTML Element

All CSS rules have:

1) At least one selector. This is how you identify the HTML content you want to style. There are many different ways to select HTML elements. Some of the most common are: tag type, class attribute, ID attribute.

2) One declaration block. This is an opening brace { and closing brace }. All of the declarations you’re going to apply go in between the opening and closing brackets.

3) One or more declarations. Each declaration consistes of two parts - a CSS property and the value to be declared for it. There are many different CSS properties.

Let’s illustrate with an example:

div {
    background-color: red;
    border: 10px;
    margin: 22px;
    text-align: center;
    color: blue;
    font-family: helvitica, sans-serif;
}

The selector here - div - is telling the browser to apply the following styles to all div elements on the webpage. The opening and closing brackets then dictate which rules apply to the divs. Six rules inside the declaration block then style all the divs. In terms of CSS syntax (syntax means the rules for writing code that makes sense), each individual declaration separates the property from the value with a color, : and ends each individual declaration with a semicolon ;. So, for example, all divs on this webpage will have a background color of red and margins of 22 pixels.

Plugging in

There are three ways to connect your CSS styles to HTML. We cover all three.

1. The Worst: Inline `style` attributes.

You can style HTML elements like this:

<img src="images/woman.png" style="border: 10px solid black; width: 150px; padding: 10px; margin: 20px; display: block;" >

See that style attribute with a long string after it? You don’t want to use this tedious method for anything other than occasional experimentation in-browser. It’s terrible to debug and makes your HTML a confusing jumble.

Sometimes you will use JavaScript to change a style, and it will forcibly use this method of CSS application. This is probably the only time it makes sense to use inline styling in a production web application.

2. Good for small pages: Internal Style Sheets With the `<style>` Elements

We uses this method in Part 2 of this book. You simple nest opening and closing style tags in the head of a webpage, then write all of your CSS inside the style element.

3. Great For Everything: External Style Sheets with the `<link>` Tag

This is what we did in the last chapter and what we will do for the rest of this book. You simply create CSS stylesheets as their own standalone documents and link to the webpage in the head of the webpage.

<link rel="stylesheet" href="styles.css">

The rel and href attributed are mandatory in this tag. rel tells the browser you’re linking an external stylesheet, and href tells the browswer where to get the stylesheet from. styles.css is thus simply a file with nothing but CSS in it. Nice and tidy.

Exercises

Read Chapter 2 of the CSS book.
Skim Chapter 3 of the CSS book.
Locate the Mozilla Developer Network’s resources on CSS.
Follow the CSS tag on stackoverflow.com if you have not already.
Are there any web design or CSS meetups on meetup.com in your area?

CHAPTER 23