• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Klong Designs

Klong Designs

Wordpress Designer, Developer and Web Programmer

  • Home
  • About
  • Services
    • WordPress
      • Theme Design
      • Plugin Tweaks
      • Site Migrations
    • Graphic Design
    • Custom Programming
      • Responsive Design
    • SEO
  • Articles
    • Facebook
    • HTML
    • jQuery
    • PHP
    • WordPress
  • Contact/Quote Request

Classes and IDs

August 21, 2013 By Chris Klongpayabal Leave a Comment

You may have heard about these things on the web. You have probably seen them in your code. It looks very familiar:

<div id="container">

It doesn’t need to be confusing. Classes and IDs are simply a way to organize your code and add styles to certain elements in your design. To make it easier to understand, think of it like this: Classes are little children, and ID’s are parents. There is only one parent, but there can be many children. Also, Parents have more authority than children.

Classes – The Child

In CSS, classes have a period before them and look like .box1. You style them like any other element. However, you can have more than one of these on a page. So you can have <div> tags throughout your page and style them the same by giving them the same class.

IDs – The Parents

ID’s are more strict. They have a pound sign before them (#), and you can only have one ID name throughout your page. For example, only one element on your page can have an ID of “nav”.

So when do you use classes and when do you use IDs?

The both do the same thing, so how do you know when to use them? There’s no set rule, but since a particular ID can only be assigned to one element, if you want a style that will applied to many elements, then you may want to group it into a class. In my CSS, I have some standard classes that do basic styling. For example, I have a class called “alignleft”, that has the styles: “float: left;” and “margin-right: 10px”. Anytime I want to put an image on the left side of the page, I just need to give that element a class of “alignleft”.

Next time, I’ll talk about the best practices of using Classes. Stay tuned!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Quick Quote

Footer

Services

Graphic Design - This includes (but is not limited to) logos, banners, signs, posters, business cards, rack cards, brochures, flyers, and postcards.
Website Design - This includes (but is not limited to) theme design, logo design, banner ads, post graphics, pinterest-based images, image maps and navigation design.
Website Programming - This includes (but is not limited to) HTML, CSS, Javascript, PHP, jQuery, SCSS and LESS, as well as MVC frameworks, Theme updates and tweaks, plugin updates and tweaks, Multisite setup, plugin design and customization.
SEO Work - This includes (but is not limited to) analytics review, site SEO review, video SEO, ongoing SEO updates, sitemap setup and goal tracking.
Maintenance Work - This includes (but is not limited to) Keeping WordPress up-to-date, running backups of your site and database, and answering any questions you have about your site.
If you would like more information, please fill out the quick quote form. Thanks!

Follow

A Few Client Sites

  • 5 Dollar Dinners
  • Get Rich Slowly
  • The Happy Housewife
  • I Save A2Z
  • Hip Homeschool Moms
  • Redefined Mom
  • Queen Bee Coupons
  • More with Less Today
  • Saving Advice
  • One Crazy Mom

Copyright © 2023 · Klong Designs