When using CSS (Cascading Style Sheets) there are two main types of elements; the default elements associated with conventional HTML tags and the custom elements created by the developer to produce desired effects. The custom elements are more useful than the default since the coder intimately writes every aspect of the script. This is one of the reasons why CSS is widely used as a current industry standard for formatting web pages.

By default h1, b, p, body, etc are part of standard CSS elements. As a developer, you only need to call the element in for CSS and then use the standard HTML on the front end. When the page is loaded, the style modification(s) will show up on the page. To create a unique formatting structures, we can use custom elements. Custom elements always begins with the character “#”. It tells the CSS that it is a custom element and will only be used when the ID is called in by the HTML.

/*
Default and custom elements example
Sanuja Senanayake (SANUJA.COM), Copyright (2003-2013)
*/
body {
   background-color: #999999;	
}
#cont {
   position: relative;
   margin-left: 10%;
   margin-right: 10%;
}

The default element “body” has no hash tag (#) since it is part of the HTML tags library. However, is there is no such HTML tag called “cont”. It is a custom element with the ID of “cont”. The CSS script knows that it is a custom element since it started with a hash tag. So how do you call it in when needed by the HTML file?

<link rel="stylesheet" href="..location/FileName.css" type="text/css" media="screen" />
<div id="cont"> Here are some texts for demo. </div>

The line 1 in the above HTML code loaded the CSS file from the CSS file location. This line will also help the upcoming default and custom tags in the HTML file. The line 2 is a div, which is a built-in (default) tag in HTML. It goes into the CSS file (or CSS files, if you have more than one) and look for the custom element named, count. The count is in the CSS file with a hash tag, hence indicating it is in fact a custom element. If it can’t find such element, it will return nothing (no errors and will display data/text as it is). If the CSS file or files have more than one element named “count”, most likely the first one it sees will be take into effect. Please not that it will look for that element in almost every CSS file you loaded to the particular page.

Now, if you want to check out a live demo of a CSS script, check out the main page (intro page) of this website.