HTML Style
In HTML, styles tell your web browser how to display elements on a web page. They control things like colors, fonts, sizes, and layouts, making your content look exactly the way you want it to.
Using the Style Attribute
The style attribute in HTML lets you add styles directly to your HTML elements.
Here’s how you use it:
<p style=”color:red;”>This is a red paragraph.</p>
Output:
In this example:
- style attribute: Tells the browser that you want to add styles.
- color:red: make the text color is red.
Common Style Attribute Properties
Here’s a list of common style attribute properties:
| Property | Description | Example |
|---|---|---|
| property | Sets the text color | color: red; |
| font-size | Sets the font size | font-size: 16px; |
| font-family | Sets the font family | font-family: Arial, sans-serif; |
| background-color | Sets the background color | background-color: #f0f0f0; |
| border | Sets the border style | border: 1px solid black; |
| margin | Sets the margin around an element | margin: 10px; |
| padding | Sets the padding within an element | padding: 5px; |
| text-align | Sets the text alignment | text-align: center; |
| width | Sets the width of an element | width: 200px;; |
| height | Sets the height of an element | height: 100px; |
Background Color
You can set the background color of an element.
Example:
<body style=”background-color:powderblue;”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Output:
In this example:
- The style=”background-color:powderblue;” is an inline style that changes the background color of the entire body of the web page.
- The <h1> element is used for the main heading of the page.
- The <p> element is used to define a block of text.
Example with different elements:
<body style=”background-color:powderblue;”>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Output:
In this example:
- The <h1> element has a background color of powder blue.
- The <p> element has a background color of tomato.
Text Size
You can change the size of the text.
Example:
<h1 style=”font-size:36px;”>This is a large heading</h1>
<p style=”font-size:18px;”>This is a smaller paragraph</p>
Output:
In this example:
- The style=”font-size:36px;” and style=”font-size:18px;” are inline styles that change the size of the text.
- The font-size is a CSS property that sets the size of the font.
- 36px makes the heading text large.
- 18px makes the paragraph text smaller compared to the heading.
Text Alignment
You can align the text to the center, left, or right.
Example:
<h1 style=”text-align:center;”>This heading is centered</h1>
<p style=”text-align:center;”>This paragraph is centered</p>
Output:
In this example:
- The style=”text-align:center;” is an inline style that centers the text within the element.
- The text-align is a CSS property that sets the horizontal alignment of text within an element.
- The center value centers the text horizontally within the element’s containing block.
Using the <style> Tag
The <style> tag allows you to set styles for multiple elements in one place.
Example:
Output:
In this example:
The <style> tag in the <head> section contains CSS rules that style the headings and paragraphs.
- All <h1> elements will have the same blue color and a 28-pixel font size.
- All <p> elements will have the same red color, an 18-pixel font size, and a 20-pixel margin.
- The styles for <h1> and <p> are defined once in the <style> tag.
- This way, you don’t need to repeat the style attributes for each element.
Using styles in HTML helps you make your web page look better. You can add styles directly to each element using the style attribute or the <style> tag to apply styles to multiple elements at once.
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Multiple Styled Paragraphs
Objective: Create a web page with multiple paragraphs, each with different styles.
Expected Output: A web page with three paragraphs, each with different text colors.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Styled Paragraphs</title>
</head>
<body>
<p style=”color:blue;”>This is the first paragraph.</p>
<p style=”color:green;”>This is the second paragraph.</p>
<p style=”color:orange;”>This is the third paragraph.</p>
</body>
</html>
Output:
Scenario 2: Paragraphs with Background Colors
Objective: Create a web page with paragraphs that have different background colors.
Expected Output: A web page with two paragraphs, each with a different background color.
<!DOCTYPE html>
<html>
<head>
<title>Paragraphs with Background Colors</title>
</head>
<body>
<p style=”background-color:lightgrey;”>This paragraph has a light grey background.</p>
<p style=”background-color:lightblue;”>This paragraph has a light blue background.</p>
</body>
</html>
Output:
Scenario 3: Paragraphs with Mixed Styles
Objective: Create a web page with paragraphs that have mixed styles (color, background, font size).
Expected Output: A web page with two paragraphs, each with different combinations of styles.
<!DOCTYPE html>
<html>
<head>
<title>Mixed Styles Paragraphs</title>
</head>
<body>
<p style=”color:white; background-color:blue; font-size:20px;”>This paragraph has a blue background, white text, and larger font size.</p>
<p style=”color:black; background-color:yellow; font-size:16px;”>This paragraph has a yellow background, black text, and medium font size.</p>
</body>
</html>
Output:
Scenario 4: Using the <style> Tag
Objective: Create a web page with multiple paragraphs and style them using the <style> tag.
Expected Output: A web page with paragraphs styled using CSS in the <style> tag in the <head> section.
<!DOCTYPE html>
<html>
<head>
<title>Styled Paragraphs with Style Tag</title>
<style>
p {
color: green;
font-size: 18px;
margin: 10px;
}
</style>
</head>
<body>
<p>This is the first styled paragraph.</p>
<p>This is the second styled paragraph.</p>
<p>This is the third styled paragraph.</p>
</body>
</html>
Output:
Scenario 5: Combined Styled Paragraphs
Objective: Create a web page with multiple paragraphs, each with different styles, background colors, mixed styles, and styles using the <style> tag.
Expected Output: A web page with four paragraphs:
- The first paragraph has a blue text color.
- The second paragraph has a light grey background color.
- The third paragraph has a combination of styles: blue background, white text, and larger font size.
- The fourth paragraph is styled using CSS within the <style> tag in the <head> section, with green text color, a font size of 18px, and a margin of 10px.
Output:
