Start learning with our library of video tutorials taught by experts. Get started

CSS Fundamentals
Illustration by

How CSS works with HTML structure


From:

CSS Fundamentals

with James Williamson

Video: How CSS works with HTML structure

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
CSS Fundamentals
3h 14m Beginner Sep 26, 2011 Updated Dec 13, 2011

Viewers: in countries Watching now:

This course contains a high-level overview of Cascading Style Sheets, while exploring the basic concepts, terminology, and tools of the language. Beginning with an exploration of CSS syntax, author James Williamson explains how CSS modifies text, borders, backgrounds, and color; demonstrates CSS and HTML integration; and contextualizes the current state of CSS. The course also tours some of the most popular CSS editors and frameworks and lists online tools and resources for further study. This course is for people who want a big-picture overview before taking hands-on courses.

Topics include:
  • Understanding basic selector types
  • Integrating CSS with HTML
  • Examining browser rendering differences
  • Exploring CSS specifications
  • Checking browser support
  • Understanding the box model
  • Adjusting margins and padding
  • Positioning elements
  • Exploring basic layout concepts
  • Understanding media queries
  • Introducing CSS3
  • Using CSS Reset
Subjects:
Web Web Foundations
Software:
CSS
Author:
James Williamson

How CSS works with HTML structure

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.

Find answers to the most frequently asked questions about CSS Fundamentals.


Expand all | Collapse all
please wait ...
Q: This course was updated on 12/13/2011. Can you tell me what has changed?
A: One movie called "Who is this course for?" was added to provide information on what you can expect to get from the course, depending on your level of familiarity with CSS.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.