Well, I see it's been a long time since I last posted here. A lot of interesting stuff have happened over the past few years! But let's get back to the subject - you want to know how to format your HTML and CSS correctly, and this is how you're going to do it.
Some Benefits of Styling with CSS
Many of these benefits also translate to HTML too, when you organize your markup using HTML5 elements.
By keeping style separate from structure, CSS allows for cleaner, more maintainable code. This separation improves content accessibility and makes styling changes across a website much more manageable.
CSS provides extensive control over the presentation, from fonts to layout, enabling developers to create responsive designs that adapt across devices.
External CSS files can be cached, improving load times for subsequent page views.
Techniques for Applying CSS With Your HTML
CSS can be applied in three primary ways:
-
Inline Styling: Using the
styleattribute directly within HTML elements. While this method is straightforward, it's generally discouraged for its lack of maintainability.
<p style="color: blue;">This text is blue.</p>
-
Internal Styling: Using a
<style>tag in the HTML<head>. This method is useful for small projects or unique styling for a single page.
<style>
p {
color: red;
}
</style>
- External Styling: Linking to a separate .css file, which is the most recommended for extensive projects due to its maintainability and reusability.
<link rel="stylesheet" href="styles.css">
In styles.css:
p {
color: green;
}
Best Practices
Use Semantic HTML, as I wrote above.
Avoid Inline Styles.
Prefer Classes Over IDs when creating selectors.
Consider organizing your CSS properties alphabetically.
Use class names that are descriptive but avoid overly specific selectors that might conflict or be hard to override.
Use Media Queries. They're good for responsive design. I cannot stress this enough.
On a different note...
Did you know that I am running a free eBook giveaway on X/Twitter? You will learn how Google formats their own HTML and CSS and their own advice. If you like free stuff, then check out my tweet.
Top comments (0)