Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

How CSS works with HTML structure

From: CSS Fundamentals

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.

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.

Show transcript

This video is part of

Image for CSS Fundamentals
CSS Fundamentals

36 video lessons · 68407 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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.

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

Your file was successfully uploaded.

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.