Introduction of Classes in CSS
CSS (Cascading Style Sheets) is the backbone of web design, allowing you to style and control the appearance of HTML elements. One of the most flexible and powerful aspects of CSS is the ability to apply styles through classes. Classes in CSS are reusable and can be assigned to multiple HTML elements to apply consistent styling throughout a webpage. In this guide, we’ll explore what CSS classes are, how to use them, and tackle some intermediate-level concepts with practical examples.
Join to Become PHP Web Developer - Future Scope Career Guidance
What are Classes in CSS?
In CSS, a class is a way to assign styles to multiple elements without duplicating code. Think of it as a reusable style label you can apply to as many elements as you like. Classes are defined with a period (.) followed by the class name, and they’re referenced in HTML elements using the class attribute.
Syntax Example
Here’s a basic example of defining and using a CSS class:
/* CSS */
.primary-text {
color: #333;
font-size: 18px;
font-weight: bold;
}
/* HTML */
<p class="primary-text">This is styled with a CSS class.</p>In this example, all elements with the primary-text class will have the same color, font size, and weight.
Why Use Classes in CSS?
CSS classes provide several benefits in web design:
- Reusability: Classes allow you to reuse styles across multiple elements.
- Maintenance: Updates to a single class apply to all elements that use it.
- Modularity: Classes promote organized and modular CSS, especially in large projects.
- Responsiveness: Classes can adapt styles for different devices using media queries.
Creating and Using CSS Classes
Steps to Create a Class
- Define the class in CSS: Use a period followed by a class name (e.g, .button).
- Assign properties: Specify styles within curly braces.
- Apply the class in HTML: Use the class attribute on any HTML element.
Class Selectors in Depth
Multiple Class Selectors
CSS allows you to combine multiple classes to achieve more complex styling. For example, adding .highlight to a paragraph with .primary-text
.primary-text {
color: #333;
}
.highlight {
background-color: yellow;
}
/* HTML */
<p class="primary-text highlight">This paragraph has both classes.</p>
Combining Classes and IDs
It’s essential to understand the difference between IDs and classes. IDs (#idname) are unique identifiers for a single element, while classes (.classname) can be used across multiple elements. Proper use of classes and IDs can greatly enhance the specificity and modularity of your stylesheets.
Class Inheritance and Specificity
Understanding specificity helps you avoid conflicts between styles. Generally, IDs have higher specificity than classes, and inline styles override both.
Examples of CSS Classes in Real-World Scenarios
Here are a few examples where CSS classes are invaluable:
- Buttons: Classes can style all buttons similarly, maintaining uniformity.
- Grids and Layouts: Use classes to create grid layouts and make pages responsive.
- Theming: Classes can apply themes (dark mode, light mode) across a site.
What are differences between id and class in CSS
Here’s a table summarizing the differences between id and class in CSS:
| Aspect | id (#) | class (.) |
|---|---|---|
| Uniqueness | Must be unique within a webpage (only one element can have a specific id). | Can be used multiple times on a page (many elements can share the same class). |
| Syntax in CSS | Prefixed with # (e.g., #header). | Prefixed with . (e.g., .btn). |
| Specificity | Higher specificity (overrides class and tag selectors). | Lower specificity (overridden by id but overrides tag selectors). |
| Reusability | Not reusable (should only be used once per page). | Reusable (can be applied to multiple elements). |
| Usage in HTML | <div id=”header”>Header</div> | <div class=”btn”>Button</div> |
| Usage in JavaScript | document.getElementById(‘header’) (selects a single element). | document.getElementsByClassName(‘btn’) (selects multiple elements). |
| Purpose | Used for unique, one-off styling or functionality. | Used for styling or functionality that applies to multiple elements. |
CSS Class MCQs for Interview Preparation
Below are MCQs categorized by level to help reinforce the concepts and prepare for interviews.
Basic Level MCQ Questions
What symbol is used to define a class in CSS?
A) #
B) .
C) *
D) @
Answer: B
What is the correct way to apply multiple classes to an HTML element?
A) class=”class1 class2″
B) class=”class1, class2″
C) class=”class1.class2″
D) class=”class1-class2″
Answer: A
Can a single CSS class be used on multiple HTML elements?
A) Yes
B) No
Answer: A
Which of the following is NOT a valid CSS property?
A) color
B) font-size
C) innerHTML
D) margin
Answer: C
True or False: CSS classes are case-sensitive.
Answer: True
In which HTML attribute do you assign a class to an element?
A) id
B) style
C) class
D) type
Answer: C
What is the correct CSS syntax for defining a class named “highlight”?
A) highlight { color: yellow; }
B) .highlight { color: yellow; }
C) #highlight { color: yellow; }
D) color: yellow;
Answer: B
Which CSS rule will apply to all elements with the “btn” class?
A) .btn { }
B) btn { }
C) #btn { }
D) :btn { }
Answer: A
What is the purpose of using classes in CSS?
A) To style one element only
B) To apply styles to multiple elements
C) To assign JavaScript functions
D) To remove styles from an element
Answer: B
Which has higher specificity: #header or .header?
A) #header
B) .header
C) Both have the same specificity
D) Depends on their position in the stylesheet
Answer: A
Intermediate Level Questions
How would you select an element that has both primary and highlight classes in CSS?
A) .primary .highlight
B) .primary, .highlight
C) .primary.highlight
D) .highlight primary
Answer: C
Which of the following has the highest specificity?
A) #main
B) .main
C) div.main
D) div
Answer: A
What is the correct syntax for adding multiple classes in an HTML element?
A) class=”class1, class2″
B) class=”class1 class2″
C) class=”class1; class2″
D) class=”class1.class2″
Answer: B
Which CSS property affects the stacking order of elements?
A) position
B) margin
C) z-index
D) display
Answer: C
What is the purpose of the !important rule in CSS?
A) To make a class apply to multiple elements
B) To increase specificity of a rule
C) To make a property apply at all times, overriding other rules
D) To prevent a property from being inherited
Answer: C
If both #nav and .nav styles are applied to an element, which will take precedence?
A) #nav
B) .nav
C) Both apply equally
D) Whichever appears last in the stylesheet
Answer: A
What is the purpose of using classes instead of IDs in CSS?
A) IDs are deprecated in CSS
B) Classes can be reused on multiple elements
C) Classes have higher specificity
D) Classes are only used for JavaScript
Answer: B
Which CSS property is typically used to align items horizontally in a flex container?
A) justify-content
B) align-items
C) flex-direction
D) display
Answer: A
How would you make text appear bold in CSS?
A) font-weight: bold;
B) font: bold;
C) weight: bold;
D) text-style: bold;
Answer: A
How do you apply styles only to elements with a class of “btn” inside elements with an ID of “container”?
A) #container.btn { }
B) #container .btn { }
C) .btn #container { }
D) .btn .container { }
Answer: B
Advanced Level Questions
Which of the following rules overrides all other styles?
A) .highlight { color: red; }
B) #highlight { color: blue; }
C) .highlight { color: green !important; }
D) #highlight { color: yellow !important; }
Answer: D
How can you select all elements inside elements with a class of “card”?
A) .card p { }
B) p .card { }
C) .card > p { }
D) .card.p { }
Answer: A
Which of the following statements about specificity is correct?
A) Inline styles have lower specificity than IDs.
B) Class selectors have higher specificity than element selectors.
C) Element selectors have higher specificity than classes.
D) IDs and classes have the same specificity.
Answer: B
What does the :hover pseudo-class do?
A) Adds a style when an element is clicked
B) Adds a style when an element is hovered over
C) Adds a style when an element loses focus
D) Adds a style to child elements
Answer: B
How can you apply a background color to only the first child of a .card class?
A) .card:first { background-color: blue; }
B) .card:first-child { background-color: blue; }
C) .card :first { background-color: blue; }
D) .card > first { background-color: blue; }
Answer: B
Logical and Conceptual Questions
Which selector would you use to target only <a> elements with a nav-link class inside an element with an ID of menu?
A) #menu a.nav-link
B) .menu .nav-link a
C) #menu.nav-link a
D) #menu a .nav-link
Answer: A
If you want a CSS class to apply a different style at different screen sizes, what should you use?
A) Media Queries
B) Multiple classes
C) @keyframes
D) Flexbox
Answer: A
What’s the best practice for styling multiple elements that share the same layout but have different colors?
A) Use multiple IDs
B) Use one class and override the colors for each element
C) Use inline styles
D) Use !important for color overrides
Answer: B
How can you apply a style to an element with both .header and .main classes?
A) .header.main { }
B) .header .main { }
C) #header.main { }
D) .header-main { }
Answer: A
Why is it generally recommended to use classes over IDs for styling purposes?
A) IDs are slower
B) Classes are more reusable
C) IDs are deprecated
D) Classes have higher specificity
Answer: B
Difference Between Margin and Padding in CSS | 3 Important Differences
Follow Us on Social Media for Classes in CSS
Follow Quiz Lancer Telegram Channel to solve html mcq questions. We share important interview questions on Classes in CSS which are asked in the interview. Most of the students get good values from this channel and got selected as a developer.
