Loading ...CSS Tutorial Intro| What is CSS?
2 April 2008 - 21:42
Before we can understand what CSS is, you’ll first need to understand what HTML is. HTML is essentially the code used to give a web page it’s basic structure. HTML stands for Hyper Text Markup Language and it is written in the form of tags. These tags make up the structural elements of a page. According to wikipedia:
Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element's content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element's attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute="value">Content</element-name>). Some elements, such as <br>, do not have any content and must not have a closing tag.
I assume that if you are looking at a CSS tutorial, you probably have an idea of what HTML is. However, if you are just trying to get a feel for things because you maybe said something like “yeah, I’m familiar with CSS” in a job interview then this is a good place to get a basic understanding.
Anyway… back to HTML for a quick second. So, HTML is made up of tags that create the basic page structure. It is separate from design. For example, a basic HTML page would that look something like this:
<html><body>
<p>My HTML Page</p>
</body>
</html>
Everything in between the body tag would show up in a web browser. In essence, HTML is the building block of the page and in order to learn CSS you need to know HTML first.
If you want to get a more detailed description you should check out Wikipedia’s entry on HTML:
http://en.wikipedia.org/wiki/HTML
Now that we’ve got that out of the way we can talk about CSS, or in other words – Cascading Style Sheets.
So, what is CSS?
CSS stands for Cascading Style Sheets. A style sheet is simply a text file with some rules that define how the elements of a page will be styled and what the layout will look like. For example, you can style text by assigning fonts, determining line spacing, and justification. You can style images by giving them boarders and padding, setting the size and providing them with mouse over effects, and you can control the layout of a page by positioning elements on the page.
Before CSS nearly all of the presentation for web pages was housed within HTML markup. This created all sorts of problems for folks. For example many people chose to use “font tags” to specify which fonts they wanted to use across their site. They would place these tags in each page and as the site grew and became outdated they soon realized they wanted to update their site. This created a problem because simply updating a the font across the site became a very big task. CSS solved this by allowing a single “style rule” to control the font across the entire site.
The concept to grasp is the CSS controls page appearance, while (x)HTML controls the basic structure. When creating websites you always want to separate form from content or in other words, separate the appearance from the structure. In the coming tutorials I’ll take you through the basics of the language, help you to learn how to construct CSS rules and by the end you’ll be well on your way to designing beautiful websites.
No Comments | Tags: CSS