CSS Style Blocks

In the previous lesson, we learned how to create inline styles, which are great for applying CSS style rules to a single HTML element. To affect styles across a whole page or website, we will need to use CSS style sheets. We will learn how to do that in the next lesson, but first we’re going to learn how to create CSS style blocks because they are the heart-and-soul CSS style sheets.

Within CSS style sheets, CSS properties are grouped into blocks. A CSS style block is a list of CSS rules contained inside a set of curly braces (that’s the { and the } symbols). Each block must be preceded by one or more selectors. A selector lets the browser know which element to apply the block of CSS rules to. Below I show the basic pattern of how a CSS style block might appear. If you don’t get it, keep going. This will make more sense as we go on.

selector {
    property name: property value;
    property name: property value;
    property name: property value;
}

We will learn more about CSS selectors later, but for now, we will work with what may be the easiest type of selector, which is just the actual names of the HTML tags themselves. Let’s say, for example, we wanted all DIV tags on a page, or even a whole site, to be little red boxes (this would actually be a stupid thing to do generally…it’s just for the sake of an example). We could write code like below.

A CSS style block that makes all DIV tags be little red boxes
CSS
div {
    width: 20px;
    height: 20px;
    background-color: red;
}
HTML Code <div></div>
results

Or, maybe we’d like to override the default behavior of the bold tags (<b></b>) everywhere on the page. Maybe, instead of making the font bold, we’d like it to highlight the text in yellow. Sounds strange, I know, but you can definitely do it with CSS.

Overriding default behavior of the bold tags (<b></b>)
CSS
b {
    font-weight: normal; // this will un-bold the text
    background-color: yellow;
}
HTML Code some text <b>some bold text</b> some more text
results some text some bold text some more text

Or maybe we’d like all our H1 tags (<h1></h1>) to have a black background with bold, centered text that is silver in color.

Making Nice Titles
CSS
h1 {
    font-weight: bold;
    background-color: black;
    color: silver; // color = text color
    text-align: center;
}
HTML Code <h1>Here’s a Nice Title</h1>
results

Here’s a Nice Title

One final thing, white space is really flexible in CSS style sheets, so you can write the CSS style blocks in almost any way that you want…so long as you write the selector followed by the rules within the { and } brackets. Some common ways to write CSS code are…

div {
    width: 20px;
    height: 20px;
    background-color: red;
}

p {
    color: blue;
    margin: 20px 0 5px 0;
}

…OR…

div
{
    width: 20px;
    height: 20px;
    background-color: red;
}

p
{
    color: blue;
    margin: 20px 0 5px 0;
}

…OR…

div {width: 20px; height: 20px; background-color: red;}
p {color: blue; margin: 20px 0 5px 0;}

…OR even (and this is the most compressed way possible)…

div{width:20px;height:20px;background-color:red;}p{color:blue;margin:20px 0 5px 0;}

And either way would be fine. However, you will find the first way to be pretty standard. The last way removes all unnecessary white space (white space is spaces, tabs, and new-line characters) and puts all CSS blocks and rules on a single line. This method, called minification, is often used for really large CSS files in order to save server bandwidth (every space represents a byte of data…so for really large CSS files on popular websites, removing all unnecessary spaces can have a significant impact on bandwidth). For most websites, however, the CSS file is going to be small enough anyways, and whether you include the spaces or not won’t really matter, and so they should be included for readability.

Well, that’s enough examples for now. I just wanted you to see what CSS style blocks look like. Of course, they don’t work unless they are contained within a CSS stylesheet. And that’s what the next two lessons are about: how to create internal style sheets and external style sheets.

This entry was posted in CSS Tutorials. Bookmark the permalink.

Leave a Reply