|
There is an abundant amount of design and CSS (Cascading Style Sheets) information on the net. But what is CSS and why exactly are Cascading Style Sheets so important?
Style sheets are a style, or skin, of elements contained in a web page. CSS elements enable designers to 'style' or control the look from within an HTML document, including ASP, PHP and other various markup languages.
CSS is almost as simple as HTML and enables you to have more control over your designs.
 There are several ways to work with CSS
An inline sheet is written and used within your page, typically in the header and an external sheet is imported from the header.
Here's one method to call an external sheet from within the header:
<style type="text/css">
<!--
@import url("stylesheet.css");
-->
</style>
You can start a style in the header the same way with the <style> tags. Either way, the style works pretty much the same and calls the same commands.
So, let's create an example style sheet that will be called from within the header of a document and I'll comment out what each thing does by default.
<style>
/* Controls the body elements of the page */
BODY {font-family:arial;font-size:10px;color:#333;background-color:#EBEBEB}
</style>
The above style sheet controls one thing- the default body settings.
There are several things here to notice.
- Notice the name followed by brackets. This tells the HTML page what the style is controlling.
- Notice that within these brackets are definitions. Each definition has a setting, separated by a colon. The definition is completed with a semi-colon.
- The definition is predetermined. You can find lists of definitions that can be used all over the Internet. We used a few common ones in the example above, but ultimately resort to Dreamweaver's built in reference guide for a complete list of examples and specifically how and when to use them.
- The "definition" setting is controlled by you. For instance, the above chosen "font-size" is 10px. That means the font size will be a size of 10px throughout the body of the document.
So, what can be controlled through CSS? You can control fonts, font colors, backgrounds, table borders, cell widths and heights, background images and a whole lot more.
Now the important question, why is CSS so useful? The benefits of CSS are countless. You can use a style within a single HTML element or you can write a style sheet as we did above in the header to control a single document. You can also import a single style sheet to control various elements on different pages. Importing your sheet allows the flexibility to change HTML elements throughout an entire site without having to change many pages, saving significant amounts of time. Importing is particularly useful when you have a site with a large amount of pages of in a web application.
So should you know CSS? You shouldn't necessarily 'know' it unless you're spending a lot of time designing. Even if you're not a designer, you should at least make an attempt to use the basics of CSS in your design.
CSS also provides added control over future changes and manipulations. |
