CSS Design and style... the possibilitiesCSS Design and style... the possibilities

HTML Terminology :: tags and elements

Terminology

One thing, call it a pet peeve if you like..

<div>...</div>

This refers to a <div> element it is made up of an opening <div> tag and a closing </div> tag, so referring to whether a "tag" is closed or not is not correct, it should be, is the element closed. This become especially more focused when talking about e.g. an <img> element ~ it doesn't have a closing tag, but in XHTML the <img /> element needs to be closed. The space and backslash is how you close an "empty" element, but there is no terminology that refers to a closing img "tag" so it's just good practice and all that..

inline styles: refers to when the styles are actually in the HTML itself. 

<p style="color: red;">some text</p>

embedded stylesheet: refers to a style sheet that is embedded within the <head> element of the HTML document.

<head> 
<title>....etc..
<style type="text/css" media="screen"> 
p {color: red;} 
</style> 
</head>

Using embedded stylesheets is an advisable way to work when building/tweaking a CSS design, it allows for quick changes/tweaks and avoids caching problems that may occur because a previous external stylesheet is being held in your cache thus you may not be seeing what you hope to see. The stylesheet can then be put into an external document (.css extension) and imported once it is finalised.

external stylesheet: This usually has a dot css extension (though dynamic ones can be built) it's a plain text file incorporating nothing more than the syntax explained above (i.e. NO HTML)

Example:

/* this is my general paragraph text color */ 
p {color: red;}

External stylesheets can then be imported into your document via a statement within the <head> element of your document.


Resources:

Updates:

«« Previous Page | Crib Sheet Index | Next Page»»