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.
The style sheet is a list of named styles and definitions that follow the general format:
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.
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:
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:
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.
These are some important ideas in CSS that you should look up to gain a more complete understanding of CSS:
- CSS box model
- Cascading or Inheritance
- IDs and Classes
- CSS vendor extensions
A Non-Exhaustive Property and Setting List
- a[option] -- where [option] = :hover, :link, :visited, :active
- background: for including gradients in some browsers -- use all three lines
- background: #EECBAD; /* non-CSS3 */
- background: -webkit-gradient(linear, left top, left bottom, from(#FFEC8B), to(#EECBAD)); /* Webkit */
- background: -moz-linear-gradient(top, #FFEC8B, #EECBAD); /* Mozilla */
- background-color: #RRGGBB or rgb(ddd,ddd,ddd) or name (e.g., red)
- background-image: url("imageFolder/backgroundImage.gif")
- background-repeat: repeat or no-repeat
- background-attachment: scroll or fixed
- border-width: number px or thin, medium, thick
- border-color: #RRGGBB or rgb(ddd,ddd,ddd) or name (e.g., red)
- border-radius: rounded border corners in order TL TR BR BL -- you should really include all three lines to cover most browsers because of vendor extensions to CSS.
- border-radius: 6px 0 0 6px; /* W3C */
- -webkit-border-radius: 6px 0 0 6px; /* Webkit */
- -moz-border-radius: 6px 0 0 6px; /* Mozilla */
- border-style: dotted, dashed, solid, double, groove, ridge, inset, outset
- color: #RRGGBB or rgb(ddd,ddd,ddd) or name (e.g., red)
- display: inline or block; make a block element inline or visa versa
- float: left or right
- clear: left, right, or both to stop text and objects from floating around a floating object.
- font-family: Helvetica, Arial, Veranda, san-serif -- Note: The browser will try the fonts in the order listed until it finds an installed font. End the list with font group (e.g., san-serif, serif, monospace)
- font-style: italic, oblique, normal
- font-size: percentage, em, or pt
- font-variant: small-caps or normal
- font-weight: normal or bold
- height: number px
- width: number px
- letter-spacing: number px -- add extra space between letters
- overflow: hidden, scroll, auto
- overflow-x: hidden, scroll, auto
- overflow-y: hidden, scroll, auto
- margin-top: number px
- margin-right: number px
- margin-bottom: number px
- margin-left: number px -- or use the more compact form, for example:
- margin: 10px 15px 40px 10px -- Note that in the compact form, the order is top right bottom left
- The setting, margin = auto, will automatically adjust the margin for the size of the browser window. For example, set the left and right margins for the body to auto and the side margins will be evenly split, effectively centering the body of the page.
- padding-top: number px
- padding-right: number px
- padding-bottom: number px
- padding-left: number px -- or, as with margin, use the compact form.
- position: absolute, static, fixed or relative
- z-index: number -- For stacking object on top of one another. The higher the z-index, the closer the layer is to the top
- text-decoration: overline, underline, line-through
- text-indent: number pt
- text-align: left, right, center, justify
- text-transform: none, uppercase, lowercase, capitalize
- white-space: no-wrap, pre, and pre-wrap -- pre will preserve the white space. In other words, if there are five spaces between two words in the html, those five spaces will not collapse into a single white space.