In the last section of this course, we developed a basic web page using tables and in-line style attributes. You might recall we styled table borders, fonts, headings, and background colors. You may have noticed this process was quite inefficient. We repetitively had to keep placing the same style attributes over and over again for any document element that we wanted to apply a style to. For example, if we wanted to change the font color and type face of text in three separate areas, we would need to change the font face and color attribute in each instance. This made the process inefficient and the code quite lengthy.
Secondly, when we put the web page together, we put the contents in tables using rows and columns. This helped make the page look organized, but there really wasnâ€™t too much flexibility in the positioning of our content. We were more or less limited to left, center or right alignment attributes. More so, we were unable to stack multiple objects on top of one another. For example, if we inserted an image into a table cell, we could not place any other object underneath or on top of that image - a concept known as layering.
In this section of the course we are going to explore the world of CSS (Cascading Style Sheets). CSS helps eliminate all these issues, and makes the development process much more flexible, efficient and browser friendly. Once you start developing sites using CSS, you will likely never use table based website layouts again. This doesnâ€™t mean you will never use tables. Tables are still an excellent way to layout tabular data, but you will not use them for laying out and styling your website elements and content.
So what exactly is CSS? Think of a cascading style sheet as a list of style rules that you can refer to at any time to format your text, images, tables, and just about any object on your web page. These style rules are entirely user defined, meaning you make them based on your needs. They are highly customizable and easy to use. Furthermore, you can link each page on your website to a single style sheet and update hundreds or even thousands of pages simultaneously.
At this time you might be wondering what a Cascading Style Sheet looks like. Well we touched on it in the beginning of the last section. If you recall, we introduced the
<style></style> tags and created a single rule to define the webpage text color. The block of code is shown below. Remember it was situated in the
Don't worry if you've forgotten.. We will be working extensively with style sheets during this section.