- 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 website architecture,
I always recommend that new web designers
start out by learning HTML and CSS first
before moving on to server side scripting
or JavaScript.
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're styled with CSS
often gets lost along the way.
I want to take a moment
and discuss how CSS works with HTML structure
in the hopes that it'll help you write more efficient CSS.
I'm gonna 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 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 your CSS.
First, don't use classes and ID attributes arbitrarily.
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 in terms of proper HTML structure,
this has some serious problems.
Yeah, HTML should help define your content
and give it meaning.
Take this class, redText.
You know, by itself, it means absolutely 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.
You know, 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 with 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'd 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
in 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 counter-intuitive
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.