Tag Archives: CSS

Buncha Links

Usually when I come across some good articles, I like to post links to them for you. Today I’ve found an abundance of good stuff so give this a shot. Continue reading Buncha Links

Advertisements

Cascading Style Sheets

Cascading Style Sheets (CSS), are basically controls telling the browser how things should look. Anytime you see text with a specific typeface, color or size, it is usually controlled by a style sheet.

Embedded CSS
In it’s most basic form CSS is embedded into the HTML document itself. By default Dreamweaver will create it’s style sheets in the HEAD of your document. If you have your document opened in Split screen or Code view, there will be a line that looks like this, “style type=”text/css”” in angle brackets. This tells the browser that the information between this line and the next /style line should be used to set the appearance of text, objects or layout within the browser window.

As soon as you created your document and clicked on the Page Properties in the Properties panel, Dreamweaver set to writing these instructions for the browser to follow.

Page Properties window

code for CSS

As you can see in the image above, there have to be opening and closing tags to contain the particular styles used. This keeps the style sheet individual and prevents it from running directly into any other style sheets or lines of code.

External CSS
Having embedded style sheets for a single simple document is ok, however it can be difficult to manage when you are working with an entire site. In such a case I would use external style sheets.

The advantage to external style sheets is in making changes to the look of your site. If you decide to change the text color, with an external style sheet you only need to change it in one document. In contrast, if you want to change the color of your text and each page uses it’s own embedded style sheet, then you have to open every HTML document and change it in the HEAD.

To create an external style sheet in Dreamweaver, simply go to File>New, select Blank Page and under the Page Type window, select CSS and hit the Create button. Now even though we have a new external style sheet, it isn’t populated by anything.

If you already set your Page Properties for your HTML document, you can select and Command X the information between the style tags.

Select and Command X everything within the style tags

Paste the copied code into your .css document, then name and save the .css file (I generally name my initial style sheet “main” just so it’s easy to identify what purpose it serves).

Now we need to link your HTML document to the style sheet. Delete the style tags from your code… you don’t want things getting messy. Right click a blank area in your HTML document, NOT in the code itself though. One of the options you will get is CSS Styles. Highlight this and a dropdown will appear, select Attach Style Sheet. In the window that appears, click the browse button, then find and open your style sheet, making certain the Link radio button is selected.

If your HTML document hasn’t been saved, it will ask you to save it. Be sure you save it in the same folder as your style sheet. This will be your project folder and it’s a good idea not to let it get cluttered.

If you have successfully linked your style sheet then you are done.

Structure of a Style Sheet

The structure of style sheets is a little different than HTML. For one thing, every separate element is enclosed in curly brackets rather than angle brackets. For another, colons and semicolons are used frequently.

In style sheets, colons are used to separate an identifier and it’s specific style. For example, if you have an identifier for the font-family you want to use, you would separate that from the specific acceptable fonts with a colon. (font-family: Verdana, Geneva, sans-serif;)

A semicolon is used to identify the end of a particular style characteristic. Without the semicolon at the end of the line, your browser won’t know that it’s separate from the following line.

In the example above you will notice that there is a tag that specifies what we are working with. A general body tag will encapsulate all the specifics of the page itself, whereas one labeled “body,td,th will include specifics dealing with body text. There are many additional types of style sheet tags that will be helpful, but these are two of the most basic and most common.

Using an existing Dreamweaver Style Sheet

Go to File>New and the menu that appears will have Page from Sample fourth down in the left column. Open the CSS Style Sheet Sample Folder and inside you will find a variety of stylesheets you can start with. Some are basic, only giving the font family, whereas others will create a full set of styles for you. You might open a few of these to check out the differences and to get a feel for what tags link to different style options.

W3 Schools has some very good step-by-step articles over creating style sheets, as well as almost everything else that has to do with the technical side of web design. Check them out here for more information.

A final note that covers everything related to code… There are specific rules for each type of file. These rules have to be adhered to, otherwise you won’t get the result you would like to. Every colon, period, bracket, etc. serves a purpose so don’t leave anything out.