- 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.
Try 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.
You know, 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 gonna 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 a 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 an entire website.
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 websites as being controlled
and constructed by five main elements.
HTML controls the document structure.
CSS controls the document's look and feel.
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 a 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 a site is,
I think it's pretty easy to see how important CSS is
to the overall process of creating websites.
Anyone wanting to learn web design
should regard CSS as an essential skill.