Welcome to the CSS Basics Tutorial!
Best viewed at 800x600
What is CSS? It's a beautiful way of seperating presentation from content. Specifically, it is a scripting language that allows you to define presentational properties for HTML elements, classes, ID'd objects and even objects with specific attributes and values. With the properties that CSS comes with, it is extremely powerful in how it can style elements and text. In fact, this whole tutorial is powered by CSS; no javascripting is used for the tabs or how the content flows.
This tutorial guides you through applying CSS properties from CSS1, CSS2 and SOME CSS3 to elements in a HTML document, however the techniques learnt here could easily be applied to wherever CSS is used. Simply follow along each tab to gain a basic understanding of CSS and even peek into the source code of this page to see how CSS is used in different methods and how its properties affect what styles around the page.
CSS - Cascading Style Sheets; a language with a library of standardized properties that is used to define presentational aspects of elements in a HTML, SVG, XML or any kind of document
CSS3 - A work-in-progress (as of 2010) version of the CSS standard which is partially supported by browsers of the time. It allows text-shadow's as seen on here and promises animation and more.
CSS code in a HTML document can be used in three ways:
|
The first and quickest way: Defining it in the style= attribute of an HTML element. This method is used often to quickly style specific elements of a document.
For example:
<div style="font-weight: bold; border: solid #f00 5px;">This is a DIV box, which is a box that contains anything!</div>
Will result in:
This is a DIV box, which is a box that contains anything!
|
The second and more useful way is defining code within <style type="text/css"></style> tags that is contained in the <head></head> section of a document. This allows full use of the CSS syntax that lets you define styles for elements, classes and ID's
For example:
<head>
<style type="text/css">
#mybox {
font-style: italic;
border: solid #00f 10px;
}
</style>
</head>
<body>
<div id="mybox">This is a DIV box with an ID, styled with code in the head!</div>
</body>
Will result in:
This is a DIV box with an ID, styled with code in the head!
|
The third way is the cleanest and is best for pages that is heavily styled with CSS or even share a common style with other pages in your site. It is the same concept as the second method except instead of putting the code within <style type="text/css"></style> tags, it is all put in an external .CSS file.
To include a CSS file, insert this between the <head></head> tags:
<link href="YOUR CSS FILE HERE.css" rel="stylesheet" type="text/css">
|
<div> - A generic block element which is commonly used to contain any content that should be wrapped up in a box.
In the previous tab, if you were to style using the second or third method, you'll be able to use the full power of CSS which allows you to apply CSS properties in various different ways.