CSS Tips for Event Site Themes

These CSS Tips are supplied by HTML Dog. If you really want to understand the basics of building web pages, giving you more control over the appearance of your event site, have a read through the tutorials on the HTML Dog web site.

CSS (Cascading Style Sheets) is a very simple language designed to present your web page. Whereas HTML structures the content, CSS can be used to move around and slap paint over that content to make it look just how you want.

CSS is made up of selectors, properties, and values. The selector latches the code on to the piece of the page that you want to change (such as a heading, table, or paragraphs, for example). Properties are the things you can change (such as the color or font size). Values are what you set the properties to (such as orange or green for a color, for example). They take the form of selector { property: value }. So p { color: red } makes the text in paragraphs (which are defined in HTML with a

tag) red. If you want to change more than one property, you can separate them with semi-colons, so:

h1 {
	color: blue;
	font-size: 120%;
}

will make an h1 element (a top-level heading in HTML) blue, and 120% the standard font size.

If you're completely new to CSS, and you're not up for trying out the aforementioned tutorials, try editing the default theme, which is commented, and designed to make it easily changeable.

Colors

To change the color of text, you can use the color property. To change the background color, you can use the background-color property.

The value can be one of 17 names (such as red, blue, or orange), but you will gain more control by using a "hex" code, which is made up of hexadecimal digits (0-9 then a-f to represent 16 digits), such as #f00, #00f, or #f90.

Example: color white; background-color: #f90;

HTML Dog Page: Colours

Fonts

You can change the font type, boldness, italics, and size with a few straightforward properties such as font-family, font-weight, font-style, and font-size.

Example: font-family: arial; font-weight bold; font-style: italic; font-size: 120%;

HTML Dog Page: Text

Layout

Unfortunately, layout cannot be adequately explained so easily! Go on over to the Page Layout page on HTML Dog to learn more.

Importing

Perhaps most relevant to those who opt to use their own web site, and so simply want to style the registration pages, the @import selector will allow you to pull in an existing CSS file, hosted elsewhere, and apply it to the event site pages. You could, therefore, use the same CSS file for both your main site and the event registration pages.

When creating a theme, simply put the following for your CSS:

@import url(http://www.yoursite.com/whatever.css);