[fusion_builder_container type=”flex” hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” video_preview_image=”” border_color=”” border_style=”solid” padding_top=”” padding_bottom=”” padding_left=”” padding_right=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” border_sizes_top=”” border_sizes_bottom=”” border_sizes_left=”” border_sizes_right=”” first=”true”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
🌟 Lesson: Using CSS Classes to Clean Up Your Code
🧠 Why CSS Classes?
You might have noticed that adding many CSS properties directly to your HTML tags makes your code long, messy, and repetitive. For example:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”css” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PGRpdiBzdHlsZT0iY29sb3I6IGJsdWU7IGZvbnQtc2l6ZTogMjBweDsgYmFja2dyb3VuZC1jb2xvcjogeWVsbG93OyI+CiAgSGVsbG8gV29ybGQhCjwvZGl2Pgo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
This kind of code becomes a pain when used repeatedly. A better way is to define these styles once and reuse them using CSS classes. Let’s learn how.
📦 What Is a CSS Class?
A CSS class is a named collection of styles that you define once and apply to any HTML element using the class attribute.
Think of it like a style kit: you build it once and reuse it across multiple elements.
🧩 Basic Structure of a CSS Class
To write a CSS class, we use the <style> tag inside the <head> section of our HTML.
[/fusion_text][fusion_syntax_highlighter theme=”” language=”css” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAudGV4dCB7CiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyOwogICAgICAgIGZvbnQtc2l6ZTogMjBweDsKICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiB5ZWxsb3c7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0idGV4dCI+SGVsbG8gV29ybGQhPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
🔍 Breakdown of Code
-
<style> Tag — Tells the browser that the following code is CSS.
-
.text — The class name. It must begin with a dot (.).
-
{ ... } — Curly braces contain the style rules.
-
property: value; — Each style rule has a property (e.g., font-size) and a value (e.g., 20px), separated by a colon and ended with a semicolon.
🖼️ Using CSS Classes in HTML
After defining your class in the <head>, use it in the <body> like this:
[/fusion_text][fusion_syntax_highlighter theme=”” language=”css” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PGRpdiBjbGFzcz0idGV4dCI+VGhpcyBkaXYgdXNlcyB0aGUgInRleHQiIGNsYXNzITwvZGl2Pgo8cCBjbGFzcz0idGV4dCI+U28gZG9lcyB0aGlzIHBhcmFncmFwaCE8L3A+Cg==[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
This helps you apply consistent styling across your page without rewriting CSS repeatedly.
📚 Best Practices
-
✅ Use descriptive class names (e.g., .main-header, .error-message)
-
✅ Keep your styles in the <style> tag or better yet, a separate .css file
-
❌ Avoid inline styles unless necessary
📝 Assignment
Create a webpage with the following:
-
A CSS class named .highlight that:
-
Use this class in:
✅ Assignment Answer Key
-
[/fusion_text][fusion_syntax_highlighter theme=”” language=”css” line_numbers=”” line_wrapping=”” copy_to_clipboard=”” copy_to_clipboard_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” font_size=”” border_size=”” border_color=”” hue=”” saturation=”” lightness=”” alpha=”” border_style=”” background_color=”” line_number_background_color=”” line_number_text_color=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=””]PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICAuaGlnaGxpZ2h0IHsKICAgICAgICBjb2xvcjogd2hpdGU7CiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTsKICAgICAgICBwYWRkaW5nOiAxMHB4OwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImhpZ2hsaWdodCI+VGhpcyBpcyBhIGhpZ2hsaWdodGVkIGRpdi48L2Rpdj4KICAgIDxwIGNsYXNzPSJoaWdobGlnaHQiPlRoaXMgaXMgYSBoaWdobGlnaHRlZCBwYXJhZ3JhcGguPC9wPgogIDwvYm9keT4KPC9odG1sPgo=[/fusion_syntax_highlighter][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
🌐 Want to Learn More?
Check out:
🚀 Why CSS Classes Matter & Where to Go Next
Learning to use CSS classes is a game-changer in your journey as a web developer. Instead of repeating yourself over and over, you now have a smarter way to keep your code clean, organized, and easy to update.
Think of CSS classes like having your own set of tools. Once you build a style you like, you can reuse it anytime, anywhere — just by calling its name. That’s not just convenient — it’s professional.
This is how real-world websites are built: reusable components, scalable design, and efficient code. You’ve just taken your first real step into that world.
🧭 Where to Go Next?
Ready to level up your skills? Here’s what you can explore next:
-
External Stylesheets: Learn how to move your CSS into a separate .css file for even cleaner structure.
-
Multiple Classes on One Element: Did you know you can combine CSS classes?
-
CSS Layouts (Flexbox & Grid): Take control of how your content is arranged on the page.
-
Responsive Design: Make your pages look great on mobile, tablet, and desktop.
-
JavaScript + CSS: Add interactivity by dynamically changing classes with JavaScript.
🛣️ Your learning journey is just getting started — keep exploring, keep building, and have fun!
[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” user_select=”” awb-switch-editor-focus=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”50px” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Related Videos:
Related Posts:
The background-color CSS property
Using the class attribute
Using more than one CSS property
HTML, CSS, & JavaScript: Essentials of Web Development
CODING WITH CSS: The style attribute
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
