HTML Styles

Updated on 03/02/2025453 Views

Table of Content

Designing a good website is a work of art, and requires adequate knowledge about both the front-end and back-end development aspects. As a developer, you have the full liberty to decide how a website you are designing should look. You may experiment with the font style, colors, and other elements to check which style looks the best!

Such variations in website designs can be brought about with the help of HTML styles, that is implemented through CSS or Cascading Style Sheets. While HTML decides the page structure, the primary task of HTML styles is to control the different aspects that can enhance the readability and enhance the visual appeal of the websites.

In this tutorial, we will learn how developers can apply different styles throughout a website, thereby enabling clearer visuals, responsive layouts, and adequate contrast.

The Style Attribute in HTML

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:

style="property:value;"

The property is a CSS property. The value is a CSS value

<body style="background-color:lightgrey;">
<h1 style="color:blue;">This is a heading</h1>
<p style="color:#FF0088;">This is a paragraph.</p>
</body>

The style attribute in HTML helps in defining how an element should be rendered in a web browser. With the help of the style attribute, developers can set different properties such as font size, alignment, color, etc. with the HTML tag.

The syntax used for the style attribute in HTML is <tagname style=”property: value;”>, where property denotes a CSS property, and value denotes a CSS value.

Adding HTML Styles

You can either attach the style information as a distinct document, or you have to embed it in an HTML document. There are three ways in which a developer can insert styling information in an HTML document.

Inline Styles: In this, the styling instructions are put directly into the start tag. Developers can attach inline styles to an element with the help of the style attribute.

This, however, may cause the presentation to be merged with the document’s content, and is therefore considered a bad practice.

Embedded Style: They only affect the documents in which they are embedded. Developers define embedded style sheets in an HTML document’s <head> section with the help of the <style> tag.
External Style Sheet: External HTML style sheet can be linked to HTML documents with the help of the <link> tag.

Working with Different HTML Style Properties

With so many options of HTML styles to work with, you can design your website the way you want. I’ll be listing down some of the wonders you can do using the HTML style types.

Setting the Background Color

Although this may seem pretty trivial, a website’s background color has an important role to play in creating a visual impact and conveying a message to the audience or viewers.

Colors can evoke feelings and guide the attention of the users, thereby enhancing their overall experience. For instance, red evokes a sense of urgency, whereas blue denotes a sense of serenity and calmness.

It is also important to choose the right color palette that aligns well with the identity of the brand. The color scheme used throughout a website helps in establishing a cohesive visual identity and increases the engagement of users. It also makes it easy for users to associate a brand with a particular color.

HTML styles attribute can help you decide the background color. The CSS background-color helps in defining the color of an HTML element. Let us say that you want to set the background color for a certain HTML element amber.

For this, you need to use the code:

<html>
<body>
<body style="background-color:orange;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

After compilation:

If you want to set two different background colors for two different HTML elements, you will have to use the following code:

<html>
<body>
<h1 style="background-color:orange;">This is a heading</h1>
<p style="background-color:turquoise;">This is a paragraph.</p>
</body>
</html>

After compilation:

This HTML style background color code will create a heading that will have an amber color, and the <p> tag with the inline "background-color:turquoise;" will create a paragraph that will have a turquoise background color.

Determining the Right Text Color

HTML color codes

While deciding text colors, as a developer, you need to be aware about the various factors like choosing colors that are in contrast and can ensure great readability to the audience. Text color is an important component in any website that enhances the overall appearance of the website.

The CSS color property in HTML styles is used to define the text color of an HTML element.

Here is how you can use the code:

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

When this HTML style element code is rendered in a web browser, your text will be returned with its heading in red color, and the paragraph in blue color.

Choosing the Right Fonts

I, personally, am very particular about the font style that a website is using.

While talking about text color, size, and fonts, the first and most important thing that we need to keep in mind is readability. It is important to make sure that the font that a website is using is easy on the viewers’ eyes.

Apart from that, fonts also help to establish brand identity. We often associate a font style with a certain brand.

The font should also align with the commodity or service that a brand is selling. Choosing the right font has a huge impact on the way a brand’s website communicates with the audience.

The HTML styles CSS property that defines the font that is to be used for an HTML element is font-family. Here is how you need to write the code:

<h1 style="font-family:serif;">This is a heading</h1>
<p style="font-family:arial;">This is a paragraph.</p>

This HTML style font size code will deliver the result in which the heading will appear in “Serif” font and the paragraph, that is the body of the text, will appear in “Arial”.

Alignment of the Text

The right text alignment is essential as it ensures good readability and also guides the eyes of the audience through the content present in the website.

Use the code written below:

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

In response to this code, both the heading and the paragraph will be center aligned with their contents.

The Border of an HTML Element

While designing a website, borders are of the utmost importance as they help to define space and define the structure of the web page layout.

For the border HTML style, use the border-style property. Let me list down the different border values that developers can use.

Dotted	The border will appear dotted.
Solid	The border will appear solid.
Dashed	This will give a dashed border.
Double	This syntax will give a double border.
None	This indicates no border.
Hidden	This indicates a hidden border.
Groove	This denotes a 3D grooved border.
Ridge	This denotes a 3D ridged border.
Inset	This denotes a 3D inset border.
Outset	This denotes a 3D outset border.

Adding a Button in Your Webpage

HTML has a button tag that is used to define a clickable button that can trigger some action. While some buttons contain images like interesting emoticons denoting a specific action, the others may contain images or texts.

The syntax for button HTML style is

<button type = "button"> Click Me </button>.

Here, button indicates an HTML element that can create a button that the audience can click. The element type=”button” specifies that it is a simple button that will not have any predefined behavior.

The Click Me is the text element that is to be displayed on the button thus created.

Summing Up

If a website is unorganized, viewers will automatically lose interest. A nice-looking and organized website persuades visitors to navigate through it and stay for longer. Therefore, web developers need to spend a fair lot of time in deciding how to go about the craftsmanship so that viewers decide to stick around.

You can pursue a course in web development to learn more about the nitty gritty details of designing a web page. upGrad has many courses that are designed for individuals who are looking forward to upskill in a given sector, or pursue a new interest to later seek it as a career opportunity.

Visit their website to learn more and choose a course that interests you!

Frequently Asked Questions

What is the style tag in HTML?

With the help of the style tag in HTML, developers can declare a web document’s style information and define the aspects such as the font style, the text color, spacing, and so on.

How can I apply styles to HTML elements?

Styles can be applied to HTML elements in different ways like:

Inline styles
Embedded styles
External styles
CSS selectors
CSS frameworks
CSS preprocessors

What is the body style of HTML?

In HTML, the <body> tag contains all the elements that are contained in an HTML document, such as headings, paragraphs, lists, etc.

How many types of styles are there in HTML?

There are three types of styles in HTML: Inline, internal, and external.

Can you have 2 styles in HTML?

CSS is the shortened form for Cascading Style Sheets, which means being layered on top of one another. Therefore, developers can use various <style> tags and include more than one style declaration.

What is inline style?

An inline style is one that is directly applied within the tag of an HTML element with the help of the style attribute. Using this method, developers can define certain styles for individual HTML elements within the HTML document and not in an external CSS file.

Where is the style tag in HTML?

The <style> tag is placed within the <head> section of an HTML document.

What are the 3 types of style in HTML?

The 3 types of styles in HTML are inline, internal, and external.

Join 10M+ Learners & Transform Your Career

Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918045604032

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.