Web Development - HTML Styles
HTML Styles
HTML allows you to add simple styling directly to elements using the style attribute.
You can change colors, fonts, sizes, alignments, and more.
Later, you will learn how to separate style into CSS files, but for now, let"s see how inline styling works.
The style Attribute
You can use the style attribute inside any HTML tag to change its appearance.
The syntax looks like this:
Syntax
<tagname style="property:value;">Content</tagname>
Each style consists of a property (like color or font-size) and a value (like blue or 20px).
Background Color
The background-color property changes the background color of an element.
Example
<body style="background-color: lightblue;">
<h1>Welcome!</h1>
<p>This page has a light blue background.</p>
</body>
Try it Yourself »
Text Color
The color property changes the color of the text.
Example
<h1 style="color: blue;">This is a heading</h1>
<p style="color: red;">This is a paragraph.</p>
Try it Yourself »
Fonts and Text Size
You can change the font and text size with the font-family and font-size properties.
Example
<p style="font-family: Arial;">This is Arial font.</p>
<p style="font-family: Courier;">This is Courier font.</p>
<p style="font-size: 24px;">This text is 24 pixels high.</p>
Try it Yourself »
Text Alignment
The text-align property is used to align text to the left, right, or center.
Example
<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: right;">Right-aligned paragraph.</p>
<p style="text-align: left;">Left-aligned paragraph.</p>
Try it Yourself »
Padding
The padding property adds space inside an element, between the content and the border or background.
Example
<p style="background-color: lightgray; padding: 20px;">This paragraph has 20px of padding.</p>
Try it Yourself »
Multiple Styles
You can combine several style properties in one style attribute by separating them with semicolons.
Example
Applying multiple styles:
<p style="color: white; background-color: black; text-align: center;">
Styled paragraph with white text on a black background.
</p>
Try it Yourself »
Tip: Inline styles are great for quick changes, but for larger projects, it is better to use CSS files to keep your code clean and organized.
Summary
- The
styleattribute adds styling directly to elements. - Use CSS properties like
color,background-color, andfont-size. - Separate multiple styles with semicolons.
- Inline styles work for small examples - CSS files are better for full projects.
Now that you know the basics of how to style a web page, let's try it in action and create a simple hero section.
Next » HTML Project: Hero Section
