If you're brand-new to web design it's often easy to get overwhelmed at all
the different technologies and terminology used in web development.
Trying to understand what you need to learn first, or even making sense of it
all, can be frustrating.
With that in mind, I want to take a moment to define exactly what CSS is and
where it fits in a larger scheme of web design.
CSS, or Cascading Style Sheets, is a style sheet language developed to control the
presentation of markup language documents, like HTML.
You can think of HTML as controlling the structure of the web while CSS controls
the presentation of it.
The best way that I can think of to display that visually is to think of HTML as
the structure of a new building.
You can see the structure as it's being built, but you don't really know what
the building is going to look like.
CSS, on the other hand, serves as the skin of the building, and determines what the
outside of the building is going to look like.
By separating structure and presentation in this way, you can change how
things look by simply changing the CSS files, all without changing the
underlying structure.
In terms of syntax, CSS is not a markup language like HTML, or even a scripting
language like JavaScript;
it's style sheet language.
This means that CSS consists of a collection of formatting rules which
identify the elements in the document that they should control and the
properties that they wish to set.
These styles are usually contained in an external file that can control a single
document or entire web site.
The term cascade refers to how these styles are applied to pages.
Styles are applied in the order that they're found and since styles can be
placed in several different locations, this often results in a cascade of styles,
from external documents all the way down to locally placed styles.
One of the major benefits of CSS is that it allows us to enable highly
modularized web design.
While this is a bit of an oversimplification, you can think of web sites as
being controlled and constructed by five main elements:
HTML controls the document structure;
CSS controls the documents' look and field; JavaScript controls behavior within
the client, or browser if you prefer; server-side languages such as PHP control
processing and business logic; and databases such as MySQL store content.
Now in some cases a web site might use all of these elements, while in others it
might only use HTML and CSS.
This modular approach means that you can change each of these elements
independently of each other.
In terms of CSS, you can change the entire layout and design of a page without
ever changing its content or structure.
You also speed development and site maintenance by controlling the formatting
for an entire site through a small number of CSS files.
Separating style and structure in this way helps your content become
more portable as well.
You can define separate styles for different types of media so that your page
looks one way on the desktop and receives a more optimized design for print
and mobile devices.
As more and more devices consume web content, this allows you to control the
presentation of your content within that device without having to change the
structure of your file.
Regardless of how complex the site is, I think it's pretty easy to see how
important CSS is to the overall process of creating web sites.
Anyone wanting to learn web design should regard CSS as an essential skill.