Fundamentals of CSS by Lynda- How CSS and HTML work together

Having well structured consistent HTML and being familiar with that structure makes it a lot easier to write the CSS for it.

First, don’t use classes and ID attributes randomly.

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.

13.jpeg

Take this class, ‘redText’.

By itself, it means absolutely nothing.

This is one of the biggest mistakes that 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.

14.jpeg

Now take a look at an updated version of our example. Several of the classes and IDs have been replaced with descriptive values, and in other places they’ve been removed altogether. This structure can be styled with fewer CSS rules than before.

15

You 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. Take this pull quote for example.

16

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.


 

Guidelines for writing HTML

  • Focus on writing clean, efficient code
  • Structure the HTML so it adds meaning to the content
  • Don’t focus on styling when initially structuring code
  • Much easier to style well-structured code
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s