Cascading Style Sheet Quick Reference

And they asked him, “Are you the one who is to come, or shall we look for another?” And Jesus answered them, “Go and tell John what you hear and see: the blind receive their sight and the lame walk, lepers are cleansed and the deaf hear, and the dead are raised up, and the poor have good news preached to them. Blessed is the one who is not offended by me.”

Matt 11:3-6

I'm a teacher by vocation and gifting; I love to teach. By corollary, I love to learn. I'm curious about everything and I have a blast learning about almost anything. Over the years, I've picked up quite a bit of information through the Internet. This website is my simple attempt to pay back; to contribute to the community and try to make the interwebs a better place.

As such, I don't require registration. I don't want your personal information. I don't set cookies. I won't put up advertisements. If I mention a product or service, it's because I use it, benefit from it, and I think others would too. I don't need, or want, your money. I simply want to offer some information to other curious characters.

I'm writing this site as an experiment. It's all written in a text editor. I make my own graphics, write my own JavaScript, CSS, PHP, and HTML from scratch because I'm trying to learn more about how all these pieces fit together. I use TextWrangler because I think it's a great text editor and it does everything I want in a very simple and efficient way.

If you want to contact me, try FaceBook or Twitter.

February 24, 2012

NB: There is a pdf version of this document in downloads.

CSS is for formatting and applying styles to your HTML content. A style sheet is a text file that defines the styles for the different HTML tags in your document. You can apply styles right in the HTML, but it's a bad idea. It's much better to have a separate style sheet and then simply link to it in the header of your page. Not only is it less work this way, but it gives the site consistent styling and makes it easier to maintain.

To link a style sheet to your web page you need to insert an HTML <link> tag in the header of the page. In this example, style.css is the name of the text file located in the relative folder css/. Note that the link tag is a self-closing tag.

<link rel = "stylesheet" type = "text/css" href = "css/style.css" />

The style sheet is a list of named styles and definitions that follow the general format:

object { property: setting; }

The object is the tag or page element to format. For example, to define the format for the <h1> tag, use h1 as the object and then set the properties within the braces.

h1 { font-family: Helvetica, Arial, Veranda, san-serif; font-size: 130%; font-weight: bold; }

Note the semi-colon at the end of each line. It is not optional. When you use the <h1> tag in the html file, the font for the tagged text will be Helvetica (if Helvetica is available, other wise it will use the first available font in the list), bold, and 130% of the base font size. The font size can be specified as a percentage, em, or points. Percentage or em is the best choice because it gives the user more control over their page view. One hundred thirty percent and 1.3em are the same thing. Also note, it’s the syntax that is important, not the layout; I prefer this layout for readability.

It is possible to add formatting to an existing class such as <a> and <p> tags and image tags with the format tag.className. The class can then be used in forms, wrappers, etc., for example:

img.right { width: 250px; margin-left: 15px; margin-top: 10px; float: right; }

In the HTML file, use the syntax class=“right” in an image tag, and the image will be formatted according to the definition, for example:

<img class=“right” src=“images/logo.png” alt=“Company Name” />

Span can be used in much the same way as div, but span is for formatting within a block; div will format groups of blocks.

Further Reading

These are some important ideas in CSS that you should look up to gain a more complete understanding of CSS:

A Non-Exhaustive Property and Setting List

All content and graphics copyright (c) 2012-2017 Brian Dentler - all rights reserved.