-
Hajipur, Bihar, 844101
HTML Styles
Styling in HTML allows you to control how your webpage looks. While HTML defines the structure of a page, styles help you change colors, fonts, spacing, alignment, backgrounds, and many other visual details. Even though full styling is usually done with CSS, HTML provides simple ways to apply basic styles directly to elements. These inline styles are helpful when you want quick visual changes or when you’re learning the fundamentals of design.
In this chapter, you will learn how to use the style attribute, how to apply colors and fonts, how to adjust text alignment, how to change margins and padding, and how styles affect the appearance of different elements. By the end, you’ll be comfortable modifying the look of your text and layout using basic styling techniques.
What Are HTML Styles?
HTML styles are instructions that change the visual appearance of an element. You apply styles using the style attribute, which is placed inside the opening tag of an element. Styles are written as property–value pairs, such as color: blue; or font-size: 20px;.
Basic syntax:
<tagname style="property: value;">Content</tagname>
Example:
<p style="color: green;">This is a green paragraph.</p>
You can apply more than one style by separating them with semicolons.
Example:
<p style="color: blue; font-size: 20px;">Styled paragraph with multiple rules.</p>
Using Colors in HTML
You can set text color and background color using the color and background-color properties.
Text color
<p style="color: red;">Aarohi visited Delhi and explored several historic places.</p>
Background color
<p style="background-color: lightyellow;">Riya enjoyed her trip to Jaipur last winter.</p>
Both together
<p style="color: white; background-color: purple;">
Meera shared her Hyderabad travel story on her blog.
</p>
Colors can be written in several ways, including color names, HEX values, RGB, and HSL. For now, color names are easiest for beginners.
Changing Fonts
You can modify the appearance of text using font-related properties.
Font size
<p style="font-size: 22px;">Kavya visited Mumbai during the monsoon season.</p>
Font family
<p style="font-family: Arial;">Priya wrote about her Kolkata food trail.</p>
Font style (italic)
<p style="font-style: italic;">Neha explored Pune and enjoyed the local cafes.</p>
Font weight (bold)
<p style="font-weight: bold;">Aditi spent a weekend in Bengaluru exploring tech hubs.</p>
You can combine multiple properties in one style attribute.
Text Alignment
Text alignment controls how content appears horizontally inside its container. HTML uses the CSS property text-align.
Center aligned
<p style="text-align: center;">
Aarohi loved the sunset at Marine Drive in Mumbai.
</p>
Right aligned
<p style="text-align: right;">
Meera described her visit to Charminar in Hyderabad.
</p>
Justified
This spreads text evenly from left to right.
<p style="text-align: justify;">
Priya explored the old streets of Kolkata, admiring the architecture, trying local sweets, and learning about the city’s history through its traditional markets.
</p>
Alignment helps maintain readability and gives a polished look to the content.
Adding Backgrounds
Backgrounds help highlight sections or make content visually appealing.
Background color
<div style="background-color: lightblue;">
<p>Aarohi enjoyed the lakes in Udaipur.</p>
</div>
Background image (basic example)
<div style="background-image: url('city.jpg');">
<p>Meera shared her Surat travel diary.</p>
</div>
Background images are used more often with external CSS, but it’s useful to know that the property exists.
Adjusting Margins and Padding
Margins create space outside an element. Padding creates space inside an element. This is important for layout and spacing.
Margin example
<p style="margin-top: 20px;">
Riya visited Varanasi for a cultural trip.
</p>
Padding example
<p style="padding: 15px; background-color: lightgrey;">
Aditi explored Mysuru Palace during her vacation.
</p>
Margin + padding
<div style="margin: 20px; padding: 15px; background-color: beige;">
<p>Kavya enjoyed the cafes around Connaught Place in Delhi.</p>
</div>
Proper spacing makes a webpage look balanced and neat.
Border Styles
Borders add outlines around elements. They help separate sections visually.
Basic border
<p style="border: 1px solid black;">
Meera wrote a blog about Pune’s food scene.
</p>
Border with padding
<p style="border: 2px dashed blue; padding: 10px;">
Aarohi shared photos from her trip to Shimla.
</p>
Borders come in different types such as solid, dashed, dotted, and double.
Width and Height
You can control the size of an element using width and height.
<div style="width: 300px; height: 150px; background-color: lightgreen;">
This is a fixed-size box containing a short description.
</div>
This is helpful when designing layouts or creating boxes for content.
Styling Multiple Elements in One Page
Here’s a complete example demonstrating different styles working together:
<!DOCTYPE html>
<html>
<head>
<title>Styled Content Example</title>
</head>
<body>
<h1 style="color: darkblue; text-align: center;">
Travel Stories from India
</h1>
<p style="font-size: 18px;">
Aarohi spent two days in Mumbai exploring beaches, markets, and iconic landmarks.
</p>
<p style="color: brown; background-color: lightyellow; padding: 10px;">
Riya visited Jaipur and enjoyed the vibrant colors of the old city.
</p>
<p style="text-align: justify; font-family: Georgia;">
Meera explored Hyderabad, visiting Charminar, Golconda Fort, and local food joints that served delicious biryani.
</p>
<div style="margin-top: 20px; background-color: lavender; padding: 15px; border: 1px solid gray;">
<p>Priya’s favorite trip was to Kolkata, where she visited Victoria Memorial and explored ancient markets.</p>
</div>
</body>
</html>
This example includes text colors, backgrounds, spacing, borders, fonts, and alignment. It demonstrates how inline styles improve visual presentation.
Tips for Using Inline Styles
-
Use inline styles for small, quick changes.
-
Keep your code clean by not overusing inline styling.
-
Prefer external CSS when building complete websites.
-
Write styles in a consistent order for readability.
-
Test your styled elements across different browsers.
Inline styles help you understand the basics of CSS, but as your projects grow, you’ll rely more on external styling for better organization.
Practice Task
Create a webpage with:
-
One main heading styled with color and font size
-
Four paragraphs using different combinations of color, alignment, background, and font properties
-
One paragraph with padding, border, and custom font family
-
One
<div>styled with margin, background color, and width -
At least one inline element inside a styled paragraph
This exercise will help you practice applying different style properties and understand how styling affects layout.
Summary of HTML Styles
HTML styles allow you to control colors, fonts, spacing, borders, alignment, and backgrounds. You learned how to apply styles using the style attribute, how to modify text and containers, and how to combine multiple style rules in one place. These basic styling methods help you build visually appealing webpages and prepare you for deeper CSS learning in future chapters.
Practice Questions
Q1. Write a paragraph with text color set to red using the style attribute.
Q2. Display a heading with font size 30px.
Q3. Add a background color of yellow to a <div>.
Q4. Center-align a paragraph using inline styles.
Q5. Use font-family to change paragraph text to Arial.
Q6. Add a border to a heading using inline style.
Q7. Write a paragraph with multiple styles: color blue, font-size 18px, and text-align right.
Q8. Create three differently styled paragraphs using style attribute.
Q9. Add background color and text color to a single line of text.
Q10. Make a <p> tag appear with green color, 20px size, and bold text.
