How to Make External Css Style Sheets | DigitalRise

Digital Rise Homepage

How to Make External Css Style Sheets

External cascading style sheets are the best of three options – in-line styles, embedded style sheets, and external style sheets – for assigning styles to your website. Before learning to create one, one should first know what an external cascading style sheet is and why one should be used.

“External” means that this style sheet will be in a separate file from the rest of the web page. This is what gives external style sheets an advantage over the other two methods. Since the style sheet is a separate file, it will be cached by the browser, and will not need to be loaded anew every time the user navigates to a new page within your website. This reduces loading times. Also, if changes need to be made to the entire website’s style, this can be done by changing just one document, rather than having to edit all of them, as would be the case with in-line and embedded styles. Since it is an external file, the website designer must provide a link to the file in the head section of the HTML document. This will look something like, “< link rel=”stylesheet” type=”text/css” href=”mystylesheet.css” />”.

“Cascading” is a reference to the order in which styles are applied. It is possible to link to more than one style sheet in the same HTML document. When this happens, if two style sheets contradict each other (for example, they assign two different background colors to the same element) the style that is assigned last will be the one the user will see. So, if a web designer includes a link to style sheet that says that all tables will have a red background, then a link to a style sheet that says that all tables will have a blue background, the browser will show the tables with a blue background.

“Style sheet” means exactly what it sounds like. This document will describe the style to be applied to the website.

To begin making an external style sheet, create a new document and save it with the file extension “.css”. The style sheet will consist of three basic elements: selectors, properties, and values. The selector will tell the browser which element or elements to apply a style to. The property will tell the browser which attribute of that element you are setting. The value will tell the browser what to set that property to. They will be laid out in the document as follows:

selector, selector{

property: value;

property: value;

}

Note that all of this information could be on one line, but many web designers find this layout easier to work with. In style sheets, the spaces, tabs, and line returns do not matter at all, but the punctuation is vital. If a style sheet is created and linked, but it does not seem to be working, it should be checked for missing colons, semicolons, commas, and brackets, since these are among the most common mistakes.

The selector can be one or more HTML tags, IDs, or classes. HTML tags are the simplest of these. Let’s say the style sheet needed to give all tables a red background color. That section would look like this:

table{

background-color: red;

}

One may also include multiple selectors, separated by commas. For instance, if one wanted to make the background color red for both tables and paragraphs, the style sheet would look like this:

table, p{

background-color: red;

}

A class can also be used to select elements. To do this, in each HTML tag to which the formatting will apply, include “class=”myclass”” where “myclass” is the class name. I’ll be using “myclass” for these examples, but the class can have any name, preferably one that describes what those elements are. To use a class in a selector, type a period followed by the class name. For example, to make all elements of the class “myclass” use an italicized font, the style sheet would read:

.myclass{

font-style: italic;

}

Using an ID in a selector is very similar. In the element to which a style should apply, include “id=”myid”” where “myid” is the ID used in the element’s tag. In the selector, type a # followed by the id. In the style sheet, to make that font italicized, the style sheet would read:

#myid{

font-style: italic;

}

Though classes and IDs work very similarly in style sheets, there is a major difference between the two. No two elements in the same HTML document should have the same ID, but they may have the same class. Use the ID if the style should apply to one specific element, and use the class if the style should apply to a group of elements. Here is a style sheet including all of the element properties set so far in these examples and with one additional property set:

table, p{

background-color: red;

}

.myclass, #myid{

font-style: italic;

background-color: blue;

}

Note that, since the same style has been applied to both “myclass” and “myid”, they can be grouped together. Also, remember that styles will always be applied in order from top to bottom, with the last one being the one displayed in the browser. In this case, if there is a table with its class set to “myclass” in the HTML document, its background color will be blue, not red.

One can also use external CSS to set up a page header. To do this, use the background image property if an element, most likely by using an ID. Wherever you want a header to be, one could set the id to “myheader” and use the following CSS:

#myheader{

background-image: url(mybackground.jpg);

background-repeat: no-repeat;

}

This will set the background image to the file found at mybackground.jpg. Setting the background repeat property to “no-repeat” makes the image display only once, no matter how big the element is, although in most cases the element containing the image will only be big enough to display it once anyway. This makes future changes to the website easier since, if one wishes to change the header image, one can simply change the link in the style sheet to a new file, or even upload a new image with the same name and overwrite the old one. As long as each page has linked to the style sheet and has an element with the id “myheader”, this will change that header on all documents by making one simple change. A page footer and other similar sections can be set up in the same way.

Given this information, the reader should be comfortable using external CSS to format and lay out pages on a website in a consistent, easy-to-edit way.