So, What's a Style Sheet?

Back when the web first started, there were tags like <font> and <u> that were used for formatting text. In 1996, CSS1 came out and slowly started to replace the old formatting tags. Now, many browsers have stopped support for these tags, making CSS the standard in the web design world.

Once you get used to the formatting, CSS is very simple to use. There are three ways to use CSS

• in a linked style sheet (external)
• a <style> tag placed in the header of a page (internal)
• an inline tag placed directly on the element it’s affecting.

Linked Style Sheets

The linked style sheet is created in the same format as the <style> tag in the header of the page, only it’s an external .css file that is pulled into the HTML page. You can load an external CSS file with the following line of text:

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

Floating Images with Inline Styles

There is a wide range of webmasters in AYSO and I want to get a feel for what we have out there. I know we have quite a few of our websites on the Clubspaces platform. Do you prefer to use the design view or the HTML view when editing pages? Sometimes it’s easier to edit the page in HTML mode to get things to look exactly the way you want - the design view can be a little tricky to format things specifically. 

Styles are one way you can format your text and images. Most styles should go in the header of the HTML page. However, if you have a Clubspaces site, you don't have access to the page headers, so we use what are called inline styles. Inline means that the style is applied directly to the element instead of in a separate location. Here's one way to format your page with styles (CSS) to get a nice format:

FLOATING IMAGES

Say you have an image and you want your text to wrap around the image; similar to a magazine or newspaper style. You could use a table to format it, but it's not always precise and can get messy. Styles can make this work very easily with just a few simple words.

Here is a basic image tag:  <img src="myimage.jpg">

To float this image, you would add the BOLDED RED text to the tag above:

<img src="myimage.jpg" style="float: right;">