Part 1
For some designers, learning how to program websites can be a bit intimidating – especially if have little to no experience in the field. With the amount of information out there, it’s easy to feel overwhelmed and confused about where to start. In this article, I’ll explain some fundamental principles of CSS and provide a few insights and helpful tips to begin to familiarize yourself with the modern approach to web development.
By definition, CSS, or Cascading Style Sheets, are used to control the appearance of content in a web browser: specifically the layout, style and positioning on the page. To help understand the way cascading style sheets work, I thought it would be help to explain the way things used to be (and in many sites still are) and the way things should be (the current way of producing websites) by making a few diagrams as to how tables and CSS work (in a general sense). See below:
Table Based Layout
Figure 1 - Table based layout
From the diagram above (Figure 1), you can clearly see that with traditional coding methods we are “locked-in”. This sequence of “block-building” would literally be repeated again and again for each major element in the HTML document. Each cell affects the other and if measurements for each component of the entire table aren’t consistent, or are missing, the layout will break sending design elements up, down or completely out of the layout altogether.
While this structure is great for inputting data (like financial information) into aligned columns and rows, it’s not so good with current design techniques such as layering and transparency.
CSS Based Layout
Figure2 - CSS based layout
From the diagram above (Figure 2), we can begin to get a “bigger picture” view of how the web page is being produced. A few things to point out here:
- The term “div” stands for “division” – but you can think of it as a “layer” as in Photoshop layers (more on this later).
- We begin to see how labeling the divs helps understand “where we are” on the page when coding.
- The term <div id=”any value in quotations”> specifies a unique element on the page, for instance, “header” as shown
- The term <div class=”any value in quotations”> specifies an element that is not unique, for instance, “main” as shown
- By definition, any element that is not unique can be repeated on the page as many times as you want.
- In the box-model diagram above, the opening and closing division of “main” can be repeated again and again, containing as much content you want within each division (like paragraphs and images!).
Of course, there is a lot more going on in a finished HTML document, but this should give you a general idea of the approach to building web pages on a very basic level and as an introduction to the fundamentals of web development.
In the next article, I’ll explain CSS in greater detail in terms of its purpose, power and flexibility.
Enjoy!
