It's hard to understate how important HTML and CSS are to web design.
Since both languages have syntax that is relatively easy to learn, and since both
are such fundamental parts of web site architecture,
I always recommend that new web designers start out my learning HTML and CSS
first, before moving on server- side scripting or JavaScript.
And typically, people tend to learn HTML first, and then learn parts of CSS along the way,
eventually getting comfortable enough with it to start tackling some of CSS's
more advanced concepts. While this approach is pretty standard, the importance
of the relationship between the structure of HTML documents and how they are
styled with CSS often gets lost along the way.
I want to take a moment and discuss how CSS works with HTML structure, in hopes
that it'll help you write more efficient CSS.
I'm going to be referencing a lot of the selectors that we discussed in the
previous movie, so if you haven't watched the Basic selectors movie yet, go
back, watch it, and then come back to this one.
Now remember that to style elements in your documents, you'll need to write
selectors that target those elements.
It should go without saying that if you don't have efficient logical HTML code,
it's considerably more difficult to write efficient CSS.
CSS works with the structure of your HTML document, allowing the browser to
parse the HTML code, find the right element, and style it accordingly.
Having a well structured consistent HTML and being familiar with that structure
makes it a lot easier to write the CSS for it.
With that in mind, I want to give you a few best practices that you can follow
when authoring HTML and talk about how this can impact to your CSS.
First, don't use classes and ID attributes arbitrarily.
And I'll take this example.
Here the author has used classes and IDs to define styling for each of the
individual elements.
As you can imagine, there are corresponding selectors in the CSS that define
the element styling.
Now, as far as functionality goes, this would work just fine, but it terms of
proper HTML structure, this have some serious problems.
You know, HTML should help define your content and give it meaning. Take
this class, redText.
You know, by itself it means absolute nothing.
In fact, this is one of the biggest mistakes that I see new web designers make.
They rely too heavily on classes and IDs, and they end up with a considerable
amount of unnecessary markup that's hard to maintain or update.
Classes and IDs should be descriptive, and they should be used to add additional
meaning to your markup.
Now, take a look at an updated version of our example.
Here, several of the classes and IDs have been replaced with descriptive values,
and in other places, they've been removed altogether.
In fact, this structure can be styled with fewer CSS rules than before.
The descriptive ID and class names also allow us to get a much clearer picture
of exactly what we're styling in our document as well.
Now you might also want to make sure that your HTML is structured
consistently across your site.
New authors often structure the same content in different ways on different pages.
This makes it considerably more difficult to write global styles for the entire site.
Now take this pull quote, for example.
On one page it's structured within a div tag; on another page it's structured in
a blockquote; and on this page, it's just represented in a normal paragraph.
To style this consistently across the site, you need several different rules
that are essentially doing exactly the same thing.
By establishing a guideline for how content should be structured and then making
sure that you're consistent and following those guidelines, you can make the
process of writing styles much easier for yourself.
You know, the best piece of advice I can give you is to write your HTML so that
you're giving clean, efficient structure to your content.
As best you can, try to structure the code so that you're adding meaning to the
content without even thinking about the styling.
Now this is sometimes difficult for new web designers and a little bit
counterintuitive, as many visual designers code their pages with styling in mind.
However, remember, the purpose of HTML is to provide a structure for your
content that helps convey meaning.
If you're able to do this for your content, you'll find that you end up with
leaner, more descriptive code that is a lot easier to style.
It also means that you'll find yourself having to modify your code for styling
purposes much less frequently, if ever at all.
Understanding how selectors work and how they relate to your HTML document
structure is a crucial part of writing CSS.
If you focus on those concepts early in the process of learning CSS, you'll find
that you write cleaner, more maintainable styles, and avoid a lot of the
pitfalls that trip up many novice web designers.