HTML/CSS: Site Organization

External Style Sheets


Inline styles are used to control the look and feel of an individual element. This is a good tool to know about for overriding style rules, but if solely used as a way of styling a web page, can lead to cumbersome and confusing code. When making changes to sites controlled by inline styles, developers must touch every individual element that needs to be changed.

Internal styles are used to control the look and feel of single web page. This method of styling is good as it allows programmers to create rules that can be applied to multiple elements on a page, therefore allowing the alteration of multiple elements with a single change. Unfortulately, this leads to a lot of repeat code throughout a site, as the same information must be re-written on each page. Even more, if site wide changes need to be made, developers would need to touch every page to make the alterations. Not so bad on a 5 page site, but could be very time consuming on a 25 page site.

This brings us to the concept of External styles. External style sheets are css files that are linked to, or included, on each page in a site. In this manner, the general look and feel of a site can be defined in a single document and then each page told to refer to that document to be rendered. This allows developers to make site wide changes with a single line of code. External style sheets also allow the use of both internal and inline styles to create exceptions to the general rules as needed.

External style sheets are written in files saved as .css. These files contain only CSS code, not HTML. The CSS code in an external file is the same code that is written inside the <style> tags of internal styles. An external style sheet may look like this:

myStyle.css 
h1	{
	color:green; 
	text-decoration:underline;
}

.blueBack{	
	background-color:blue;
}

#nav	{
	border: 2px dashed yellow;
}
Once created, these styles are then called by a page using the <link> tag. The link tag requires the rel, type and href attributes. The rel attribute is the type of relationship the linked file has with the document. In this case, we will use a value of 'stylesheet'. The type attribute is the type of code/information that the browser can expect to find in the linked file. For external style sheets, that type is 'text/css'. Finally, the href is the location of the linked file. In this case, that means the .css file. Remember to write your path relatively to help make your site portable. 
<link rel='stylesheet' type='text/css' href='../styles/navStyle.css' />
External styles can be overridden by both internal and/or inline styles, but these types of styles should be reserved for exceptions. Also, many developers choose to write very specific style sheets that are used for parts of a page. This helps to keep their styles organized and separate. That way, they only need to include the required styles on a given page. For example, some developers may make a generic style sheet for colors and fonts, and make a separate style sheet for controlling their navigation look and feel.

Site Organization

It is helpful to have a plan for organizing the files in a web site. Site file numbers can grow fast with pages, images, styles and scripts running around. So, make sure that everything has its place and put it there.

First and foremost, all files associated with a web site, should be stored in a single folder. File and foldernames should be named with only letters, numbers and underscores (starting with a letter) for better portability across platforms. Also, be sure to make the homepage of the site called index.html. When a browser encounters a folder, it automatically looks for (and loads if found) the page called index.html. If you call your home page by another name, users will be forced to type more in the address. For example, 
http://www.myhomepagecalledindex.com

will automatically load the file called index.html. However, 
http://www.myhomepagecalledhome.com/home.html

requires the extra file name at the end of the address for users to find your home page.

Finally, each type of file should have its own sub folder, with the exception of html files. Typically, the html files reside in the main folder. But, there should at least be a folder for images, one for style and one for scripts. Some developers like to have subfolders in their images folder, depending on how many images their site has. Be organized, but be careful. Createing too many subfolders can lead to a navigation nightmare.