HTML Styles
HTML by default is not very visually appealing. Styles help make content more attractive – allowing you to apply colors, sizes, fonts, and layout to elements.
Using inline styles
Inline styles are applied directly to a HTML element using the style attribute. This is a quick solution for individual elements but not recommended for larger projects.
Code Details
<p style="color: red;">This text is red.</p>
<h1 style="font-size: 40px;">Large Heading</h1>
Preview
This text is red.
Adding styles using the <style> tag
A <style> block inside the <head> section of an HTML document allows you to define internal CSS rules. This is useful when you want page-wide rules without creating a separate file.
Using external CSS files
The best practice is to organize styles in a separate file and load it with a <link> tag in the <head>. This makes your code cleaner and more reusable.
Commonly used CSS properties
The most commonly used CSS properties include text color (color), font size (font-size), font family (font-family), and text alignment (text-align). Mastering these basics allows for significant visual improvements.
Common mistakes when using styles
Don't use too many different styling methods on the same page. Remember that inline styles override external CSS, making maintenance harder. Always strive for simplicity and consistency.
When to use each method?
- Use inline styles only for quick testing or in exceptional cases.
- The <style> block is good when working with a single HTML file, for example for learning.
- For serious projects, always use external CSS files.
- Avoid mixed styling approaches – aim for consistency across the project.
Summary
Styles define how a webpage looks. Basic HTML elements can be styled inline, through embedded style blocks, or via external CSS files. Choosing the right method results in cleaner, more maintainable code.
Drag in the correct CSS line that sets the background color to light gray!
Code
<!DOCTYPE html>
<html>
<head>
<style>
body {
Drag the item here
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Answers
Preview
✨ Ask Lara — your AI study partner
Unlock personalized learning support. Lara can explain lessons, summarize topics, and answer your study questions — available from the Go plan and above.
Lara helps you learn faster — exclusive to ReadyTools Go, Plus, and Max members.
