HTML

HTML Styles

HTML styles allow you to control the presentation of web content, offering different methods to format text, change colors, and set layouts. Styles can be applied inline, internally, or externally using CSS.

Example:

<p style="color:blue;">This is a blue paragraph.</p>

HTML Style Attribute

The style attribute is a quick way to add specific styles directly to an HTML element, letting you customize the appearance without needing a full stylesheet.

Syntax:

<tagname style="property: value;">

In this syntax, property refers to a CSS style you want to apply (like color or font-size), and value is the specific setting for that property (like #ff6600 for color or 16px for font size).

For example, to style a link to SitePoint:

<a href="https://www.sitepoint.com/" style="color: #ff6600;
text-decoration: none;">Visit SitePoint</a>

Output:

This will create a bright orange link to SitePoint with no underline, giving it a sleek, custom look.

Visit SitePoint

Multiple Style

You can easily apply multiple style rules directly within the style attribute by separating each property with a semicolon. This gives you flexibility for quick inline styling.

Example:

<a href="#" style="color: blue; font-weight: bold;
text-transform: uppercase;">Styled Link</a>

Output: This will display a bold, uppercase blue link, making it stand out while keeping everything in one place.

Styled Link

Conflicting Styles in HTML

When multiple styles target the same element, the browser will follow a cascading order, where the last rule typically takes precedence. This means if two conflicting styles exist, the one that appears later in the code will override the previous one.

Example:

<head>
  <style>
    h2 {
      color: green;
    }
  </style>
  <style>
    h2 {
      color: purple;
    }
  </style>
</head>
<body>
  <h2>This is a Subheading</h2>
</body>

Output: Even though the first rule sets the <h2> color to green, the second rule, which appears later, overrides it, so the subheading will be displayed in purple. The browser prioritizes the last rule it reads when there are conflicting styles.

Background Color

You can easily change the background color of any HTML element using the background-color property.

Example:

<div style="background-color: lightblue;">
  This is a styled div!
</div>

Output: The background of the <div> will be light blue, making the content stand out with a nice pop of color.

This is a styled div!

Text Color

You can easily change the color of your text with the color property to make it stand out.

Example:

<h3 style="color: crimson;">Crimson Heading</h3>

Output: The <h3> heading will appear in a bold crimson color, giving it extra emphasis and flair.

Crimson Heading

Font-family

Change the look of your text by setting its font with the font-family property.

Example:

<h3 style="font-family: Georgia;">Georgia Font</h3>

Output: The <h3> text will appear using the Georgia font, giving it a classic, elegant feel.

Georgia Font

Font-size

Easily control how big or small your text appears using font-size.

Example:

<h3 style="font-size: 32px;">Big Heading</h3>

Output: The <h3> heading will display in a larger size, making it stand out more prominently.

Big Heading

Text Alignment

Center, left-align, or right-align your text with the text-align property.

Example:

<h3 style="text-align: center;">Centered Subheading</h3>

Output: The <h3> subheading will be centered, giving it a balanced and symmetrical appearance.

Centered Subheading

Browser Support for HTML Styles

HTML and CSS styles are widely supported across modern browsers, but it’s always a good idea to double-check for consistency. Each browser can have its quirks when rendering styles, so here’s the key list to keep in mind for testing:

Google Chrome – usually quick with the latest CSS features.
Mozilla Firefox – great support but may handle certain styles a bit differently.
Microsoft Edge – solid, but always worth a look for small differences.
Safari – especially important to test on macOS and iOS.
Opera – often similar to Chrome but still worth checking.

Testing across these browsers ensures your design stays consistent for everyone, no matter how they view it.

FAQs on HTML styles

What are the different styles in HTML?

HTML offers a variety of styles you can apply to your elements, from controlling text color and background, to font size, alignment, margins, and borders. You can also use styles to control the layout and positioning of elements on the page, making your content not just functional, but visually appealing.

How do I add more styles in HTML?

You can add styles directly to your HTML elements using the style attribute for quick inline changes, or better yet, link to an external CSS file to keep things organized.

How to add font style in HTML?

To change the font style in HTML, use the font-family property in either an inline style attribute or in your CSS. You can set your text to any web-safe font, or link to external fonts for even more customization. For example, you could use:

<h1 style="font-family: 'Arial', sans-serif;">Styled Heading</h1>

This will apply the Arial font to your heading.

How to change text color in HTML code?

To change the text color in HTML, use the color property either in an inline style attribute or through CSS. For a quick inline example, you can add the style directly to your HTML element like this:

<p style="color: blue;">This text is blue!</p>

Previous Next