While you surf online, reading your favorite website, many unseen processes go on in the background. Within an average website, there are HTML (Hyper Text Markup Language) files. Each of these files contains many lines of code, all of which contain all sorts of different functions within the page. One such function of the code is called Div. The programmer of the site can use the Div to arrange text and content into invisible boxes within the page. Sometimes these pages of code can get very lengthy which in turn makes it difficult to keep data organized with large volumes of information. If you have hundreds of pages within one site, and you are trying to keep them all uniform looking, without having to copy the same code over and over to each page, without CSS you end up with a long complex bloated page of code.
CSS was eventually created in the early 2000s. Cascading Style Sheets revolutionized how web pages could be formatted in mass quantities by using one short line of code without copying lots of additional code into a web page, to format its content. A web page has a link inserted into the HTML page, linking to wherever the CSS file is located and is put within the header of the HTML page.
The link looks very similar to this:
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
The CSS link would then be placed in the header of the web page:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css”>
<head/>
<body>
<body/>
<html/>
In this case, the CSS file is called stylesheet.css and is located in the same directory that the HTML page would be theoretically.
CSS is composed of fairly simple construction. It can be complex or simple depending on what CSS is needed to be formatted. CSS can format anything from Divs to fonts used for the text.
How CSS works is that the web browser downloads the CSS file into its’ cache. Once it reads the link to the CSS file and finds an ID tag or a class within the HTML page, it will go to the CSS file and see what is associated with the one specific tag. Then it will format HTML to whatever is within the code for that one tag.
For example, if you have a Div ID tag named ‘header’ within an HTML page it will look similar to this:
<div id=”header”>
In the Cascading Style Sheet, the computer will look for the header tag and any code associated with that one specific tag within a CSS page. The tags can be named whatever you like as long as they do not start with a capital or include spaces and are usually no more than eight characters long.
The tag within CSS will look similar to this:
#header {padding:3px;
background-color:#000000;
alignment-adjust:central
}
The “#” is always used at the beginning of most tags. Sometimes other types of tags will have a “.” without a hashtag. Any code within the brackets is what the computer will format for code located within the header tag. Anywhere there is a “;” it is saying to the computer go to the next step for this tag. There are many other special symbols but these are the most basic ones used.
First, the browser will look for the tag header. The browser will see the first starting bracket”{“. The browser then knows there is code associated with this tag. The browser reads “padding:3px;” which tells the browser, the program wants padding (spacing) of 3 pixels around all sides of the Div-tagged header. The background color will be red using a hex code color code. The Alignment Adjust will be central making the Div centered within the page along with any content. The browser will see the ending brackets “}” and knows the formatting for the header has finished. The browser will go to the next tag on the list.
If by chance there are two pieces of code left in the stylesheet, by accident, the first one on the list will be recognized and displayed by the browser. The second one will then be omitted from being processed by the web browser which will then not be viewed on the screen.
You can also add in as many Cascading Style Sheets as you desire as long as they have a different file name and are linked to the HTML files. You can split up the code among several different CSS files, which in turn creates a smaller and more organized web page.
One of the best features of CSS is, as long as all the pages of a website are connected to CSS, when any CSS data gets changed, everything connected to the Style Sheet also changes. In this way using CSS is much more time efficient than trying to change multitudes of HTML pages manually.