{"id":624,"date":"2016-08-30T00:00:00","date_gmt":"2016-08-30T00:00:00","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websitehow-to-create-classes-for-a-responsive-website-on-a-css-file\/"},"modified":"2026-03-09T19:20:14","modified_gmt":"2026-03-09T19:20:14","slug":"css-class","status":"publish","type":"post","link":"\/ng\/tutorials\/css-class","title":{"rendered":"What is a CSS class? A complete guide to using the CSS selector"},"content":{"rendered":"

A CSS class is an attribute used in HTML to select and style specific elements<\/strong>. It allows you to simultaneously apply the same set of styling rules – like color, font size, or spacing – to multiple elements simultaneously, rather than coding each one individually.<\/p>

Take these steps to use a CSS class to style your site:<\/p>

    \n
  1. Open your CSS stylesheet<\/strong>. This is the file (like style.css<\/strong>) where you’ll write the styling rules.<\/li>\n\n\n\n
  2. Define the CSS class<\/strong>. Create a “rule” by giving your class a name, like .my-class<\/strong>, and defining its properties, like color: blue;.<\/li>\n\n\n\n
  3. Open your HTML document<\/strong>. This is the file (like index.html<\/strong>) containing the content you want to style.<\/li>\n\n\n\n
  4. Find the HTML element to style<\/strong>. Identify the element you want to change, like a paragraph <p><\/strong> or a division <div><\/strong>.<\/li>\n\n\n\n
  5. Assign the CSS class to the HTML element<\/strong>. Add the class=”my-class”<\/strong> attribute to the element’s opening tag to link it to the style rule you defined.<\/li>\n<\/ol>

    \n\n\n\n<\/p>

    How does a CSS class work?<\/h2>

    A Cascading Style Sheets (CSS)<\/a> class works by creating a reusable “label” that links your HyperText Markup Language (HTML) structure to your CSS rules<\/strong>.<\/p>

    When you assign a class to an HTML<\/a> element, you’re telling the browser to find the style definition for that class in the stylesheet and apply it to that specific element.<\/p>

    This creates a powerful separation of concerns. Your HTML file handles the content (the “what”), while your stylesheet handles the presentation (the “how it looks”).<\/p>

    For example, imagine you have five “alert” boxes on your website that all need a red border and bold text. Instead of styling each box individually, you can create a single class named .alert<\/strong> in your CSS.<\/p>

    Then, you just add class=”alert”<\/strong> to each of the five boxes in your HTML. If you later decide to change the border to blue, you only have to make the change once in your .alert<\/strong> class definition, and all five boxes will update automatically.<\/p>

    How to use a CSS class to style an HTML element?<\/h2>

    To style an HTML element using a CSS class, open your CSS stylesheet and define the style rules. Then, open your HTML file, find the element you want to style, and apply the CSS class to that element<\/strong>.<\/p>

    1. Open your CSS stylesheet<\/h3>

    First, you need a place to write your CSS rules. You have two options:<\/p>