Rather than throwing you, dear reader, into the midst of confusing code and trusting you to flounder in the right direction, I want to introduce you to the concept of CSS. I’ll cover how to write proper CSS, no worries, but that will be later. For now, let’s get started on the concept.
CSS, for those who don’t know, is the web language for style. Or more accurately, styling HTML. It stands for Cascading Style Sheets, and can be counted on to provide endless hours of loving frustration.
The Elements
Nearly every style element (or style definition) is divided into two types; Classes and Divisions. These types correspond to HTML declarations that bridge the two languages. I want you to think of these two types like this:
Class: an element used multiple times throughout a page.
Division: an element used only once on a page.
There are some minor exceptions, but they don’t effect how you should think of Classes and Divisions. I’ll cover them in a later article, but for now we’ll focus on just these two.
Forming a plan
This is where I must momentarily wade into deeper waters, and for that I apologize. In most cases, the person coding the style sheet is also coding the HTML structure of the website. This doesn’t apply to all cases, especially for those learning CSS for theming purposes. If this is the case, you may want to skip this next bit.
At the very beginning of the coding process, yes before you’ve written a single line of code, you should deconstruct the design and figure out how it needs to be structured, both in HTML and CSS. CSS has many wonderful features that have amazingly annoying restrictions and faults, both in general and specific browsers. Once you know about these deficiencies, you can take them into account at the beginning of the process and plan around them.
For a beginner, this will sound daunting. How should you know how to deconstruct a page, I haven’t taught you a single line of CSS yet. This is a learning process, so we won’t worry about it now. However, in the future you should give thought to how the HTML will work with the CSS, as it will save you a lot of time down the road.
Cascading your Style Sheet
One key to a good style sheet is organization. There are many different ways to organize your style sheet, such as grouping by relevancy, purpose or use.
I highly recommend cascading your elements in unison with their use on the page. This method, along with the use of groups, will help make your style sheet easy to navigate and read.
At this stage, I should point out a fact that should be rather obvious but often gets forgotten. Cascading is part of the name for a reason. Cascading, for clarity’s sake, meaning that the browser reads down the style sheet. This means that if the browser encounters a contradiction, it will honor the settings from the later style definition.
Yes it may be obvious, but it’s also key to learn this early on. Under most circumstances, well written style sheets won’t have issues with the Cascading aspect of CSS, thanks to specific style definitions (something I’ll cover later as well).
A Final Note
So far I’ve taken you through the basic concept of CSS, breaking down a design and organizing your style sheet. But I want to give you one last bit of advice.
Keep your definitions as minimal as possible. This will make modifications easier, and allow you to use a single definition in a myriad of instances. I’ll come back to this when we can apply it to some code, but I wanted to mention it now.
And with that, I will leave you. I hope that this has given you a good idea of the concept of CSS. If you have any questions, just post them in the comments below.
Leave Your Response