Once you start to understand how HTML tags work, you'll soon want greater control over the way your page looks. While HTML allows you to specify the formatting of your content, you do not have the ability to specify things such as specific font sizes, indenting mount, and bullet artwork. Cascading style sheets (CSS) allow you to redefine any HTML style and behavior. What's more, you can even create and apply styles that you make up yourself. See our list of CSS learning resources below.
CSS definitions can appear inside of your HTML file, or they can be in a separate file (e.g., stylesheet.css). If you choose to have your CSS file in an external file, you can share the styles with every page in your site. Therefore, if you make a change to one CSS file, your entire website will reflect that change.
In the example below, we have the CSS definitions inside of the HTML file. We redefined the emphasis tag <em> to have a lavendar color (#ae65b2) and a font face of Arial. We also made up our own definition, called "sub_heading." We give this definition a font size (16 pt), a weight (bold), and a red color (#f00). You will also notice that our custom tag is applied using a span <span> tag, which encloses the "Chapter One" text. When the browser sees the new definitions, it renders the page accordingly.
Going beyond text formatting, CSS allows you to create layers in your documents. Layers, or DIVs, are a way for you to begin to control the exact positioning of content on your web pages. A DIV area can have properties, assigned through CSS definitions, that give you pixel-level control over where they are positioned. This works a lot like the way you would design in a page-layout application like InDesign®. GoLive® gives you a complete visual environment for designing your web pages in this fashion. Keep in mind, however, that different browsers will render these CSS attributes a little differently than each other, so make sure you test your layouts often.
In the example below, the image and the text have been placed inside of DIV tags and positioned in the web page. The positioning code is in the CSS definition, specified by the name of the DIV. In this case, the image is in a DIV named "photo," and the CSS definition places that DIV at left:260, top:30 with a width of 220 pixels. This tells the web browser exactly where to position the DIV and its contents. To see how GoLive represents this in a visual way, visit our Video Demonstrations page and select "Creating a Layout with CSS Objects" from the pulldown menu.
CSS Learning Resources
The following is a list of resources available on the web to help you get up to speed with CSS. While you are learning CSS and using GoLive, we encourage you to display the CSS window/tab and open CSS editor often, so you can see the CSS code while you are working in GoLive's visually rich environment. You will start to pick it up a lot faster than you think.
shire.net
Learning CSS
www.shire.net...
Webmonkey.com
Authoring style sheets
WebReference
Articles and guide references for CSS
W3Schools
Introduction to CSS
University of Texas at Austin
Cascading style sheet introduction
