HTML Styles: A Beginner’s Guide

We are talking about HTML styles. HTML styles refer to the visual presentation of HTML elements on a web page.

This includes font styles, colors, backgrounds, borders, and other visual effects.

Example:

I am Green

I am Red

I am Big Brown

Table Of Content-

HTML Style Attribute

HTML itself provides a limited set of styles, but to fully customize your web page – CSS allows you to define styles that apply to specific HTML elements or groups of elements.

You can define these styles in a separate CSS file or directly in the HTML document using a style tag.

A style attribute can be used to define the style of an HTML element.

This is the syntax for the HTML style attribute:

<tagname style="font-weight: bold;">

In above example font-weight is a CSS property and bold is a css property value.

There are many CSS properties that you can use to customize the visual appearance of HTML elements.

Here are some of the most commonly used properties:

StylesOverview
colorSets the text color.
background-colorSets the background color.
font-familySets the font family.
font-sizeSets the font size.
font-weightSets the font weight (e.g., bold or normal).
text-alignSets the text alignment (e.g., left, center, or right).
paddingSets the padding (space between the element’s content and its border).
marginSets the margin (space between the element’s border and the surrounding elements).

Background Color

Background colors in CSS are specified by the background-color property.

Example: Set the background color for a page to blue:

<!DOCTYPE html> <html><body style="background-color:blue;"> <h1>Main page heading.</h1> <p>Main page paragraph.</p> </body> </html>
You can also set different background color for each of the following two elements when it comes to HTML styles:

Example:

<!DOCTYPE html> <html><body> <h1 style="background-color:blue;">This is a heading with blue color</h1> <p style="background-color:lightpink;">Its a paragraph in light pink.</p> </body></html>

Example Explanation

The following are the components of the above example:

  • The <h1> tag is used to define the heading element, and it has an inline style attribute with a “background-color” property set to “blue”. This means that the background color of the heading element will be blue when the webpage is rendered in a web browser.
  • The <p> tag is used to define the paragraph element, and it also has an inline style attribute with a “background-color” property set to “lightpink”. This means that the background color of the paragraph element will be light pink when the webpage is rendered in a web browser.
  • Inline styles are CSS styles that are applied directly to individual HTML elements using the “style” attribute. They can be used to override or supplement external or internal CSS styles defined in separate files or in the <style> tags of the HTML document.

In this code, the use of inline styles allows the web developer to define specific background colors for the heading and paragraph elements without affecting other elements on the webpage. The result is a webpage with a blue heading and a light pink paragraph.

Text Color

The color property in CSS describes the text color for an HTML element:

Try setting background colors for two different elements:

Color Code:

<!DOCTYPE html> <html> <body><h1 style="color:green;">H1 heading is in green color</h1> <p style="color:brown;">Paragraph is in brown color.</p></body> </html>

Fonts

An HTML element’s font-family is controlled by the CSS font-family property:

Choose a font family for two separate elements:

Font family code example:

<!DOCTYPE html> <html> <body><h1 style="font-family:verdana;">This is heading has a verdana font family</h1> <p style="font-family:courier;">This paragraph is in courier font family.</p></body> </html>

Text Size

An HTML element’s font-size is specified by the CSS font-size property:

Try setting font size for two separate elements:

Example:

<!DOCTYPE html> <html> <body><h1 style="font-size:360%;">This H1 heading has 360% font size</h1> <p style="font-size:180%;">This paragraph has 180% font size.</p></body> </html>

Text Alignment

An HTML element’s CSS text-align property determines how horizontal text will appear in Html Styles:

Example: 

<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">This H1 heading is centered through text-align css property</h1> <p style="text-align:center;">This paragraph text is centered through text-align css property.</p> </body> </html>

Text Decoration

The text-decoration property in CSS describes the text decor for an HTML element:

Example: 

<!DOCTYPE html> <html> <body> <p style="text-decoration: overline;">This is a paragraph with the text decoration overline.</p> </body> </html>

Html Styles Display

The HTML uses display block property by default but we can change it using CSS Display property. See example below.

Example: 

<!DOCTYPE html> <html> <head><style> div{ display:inline-block; } </style> </head><body> <div> <p>This is a paragraph one.</p> </div> <div> <p>This is a paragraph two.</p> </div> </body> </html>

Html Styles: Border Style

The Border property in CSS is applied to create a border for the element in HTML. See example below:

Example: 

<!DOCTYPE html> <html> <body> <h1 style="border:1px solid">This is a Heading</h1> <p>This is a paragraph</p> </body> </html>

Conclusion

HTML styles are an essential part of web design. With CSS, you can customize the visual appearance of your HTML elements to create a beautiful and user-friendly website.

By using the right CSS properties and selectors, you can make your website standout and provide a better user experience for your visitors.

it’s important to use CSS sparingly and to not overdo it with too many styles and effects. Strive for a balance between aesthetics and usability.

In addition to the basic Html styles properties covered in this article, there are many advanced techniques and frameworks you can use to further enhance your website’s design.

These include responsive design, grid layouts, and CSS frameworks like Bootstrap and Foundation.

However, it’s important to have a solid understanding of the basics before diving into more complex techniques.
If the corresponding article met your needs somehow, share it with other developers using the links down below in order to spread this meaningful information among them as well.
We value your feedback.
+1
1
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon
By subscribing, you agree with our privacy policy and our terms of service.

Leave a Reply

Your email address will not be published. Required fields are marked *