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.
I am Green
I am Red
I am Big Brown
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.
style attribute can be used to define the style of an HTML element.
This is the syntax for the HTML
<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:
|color||Sets the text color.|
|background-color||Sets the background color.|
|font-family||Sets the font family.|
|font-size||Sets the font size.|
|font-weight||Sets the font weight (e.g., bold or normal).|
|text-align||Sets the text alignment (e.g., left, center, or right).|
|padding||Sets the padding (space between the element’s content and its border).|
|margin||Sets the margin (space between the element’s border and the surrounding elements).|
Background colors in CSS are specified by the background-color property.
Example: Set the background color for a page to blue:
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.
The color property in CSS describes the text color for an HTML element:
Try setting background colors for two different elements:
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:
An HTML element’s font-size is specified by the CSS font-size property:
Try setting font size for two separate elements:
An HTML element’s CSS text-align property determines how horizontal text will appear in Html Styles:
The text-decoration property in CSS describes the text decor for an HTML element:
Html Styles Display
The HTML uses display block property by default but we can change it using CSS Display property. See example below.
Html Styles: Border Style
The Border property in CSS is applied to create a border for the element in HTML. See example below:
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.
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.