HTML styles allow you to apply visual styles such as colors, fonts and layouts to your HTML elements. There are different ways to used the styles in HTML, but the most common way is by using inline styles, internal styles or externals styles.
Inline styles are directly applied to the HTML element using the “style” attribute.
<p style="color: red; font-size: 20px;">This is a paragraph with inline styles.</p>In above example, here we use the inline styles to change the font size and color of the paragraph element.
Internal styles written in the head section of the HTML document using the “style” tag.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
<p>This is another paragraph with internal styles.</p>
</body>
</html>
In the above example, we write the internal styles or CSS to change the color and font of all paragraphs of the HTML documents.
External styles are defines in a separate CSS file and linked to the HTML document using the “link” tag in the head section.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This is a paragraph with external styles.</p>
<p>This is another paragraph with external styles.</p>
</body>
</html>
CSS File (style.css):
p {
color: red;
font-size: 20px;
}In the above example, we write the external styles or external CSS to change the color and font of all paragraphs of the HTML documents.
In HTML the “style” attribute is used to apply the inline styles to the individual HTML element. The “style” attribute is added to an HTML element and is followed by one or more style declarations separater by semicolon.
HTML style attribute following the syntax.
<tagname style="property:value;">For example: change the color and font size of the paragraph.
<p style="color: blue; font-size: 36px;">This text is red and has a font size of 16 pixels.</p>The Inline CSS set the background color using the “background-color”property for an HTML element.
<h1 style="background-color: tomato">This is the first Heading</h1>The Inline CSS set the color of the text using the “color” property.
<p style="color: red">hello World!</p>
<p style="color: green">Welcome to lapmos.com</p>The CSS set the font size using the “font-size” property.
<h1 style="font-size:100px;">This is a heading</h1>
<p style="font-size:60px;">This is a paragraph.</p>The CSS set the text horizontally aligment using the “text-align” property.
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:right;">Right paragraph.</p>| CSS Property | Description | Example Value |
|---|---|---|
| color | Sets the color of text. | red, #333, rgb(245, 78, 0) |
| font-family | Sets the font family used for text. | Arial, Helvetica, cursive, sans-serif. |
| font-size | Sets the font size of text. | 20px, 1em, 2rem |
| font-weight | Sets the weight or thickness of the text. | normal, bold, bolder, 500, 800 |
| background | Sets the background color or image of an element. | #fefefe, url("image.img") |
| border | Sets the border style, width, and color of an element. | 1ps solid black |
| padding | Sets the padding between the element's content and border. | 10px, 2rem, 5px 10px |
| margin | Sets the margin around an element. | 10px, 0 auto, 5px 10px |
| text-align | Sets the horizontal alignment of text. | left, center, right |
| text-decoration | Sets the text decoration, such as underline or strike-through. | none, udnerline |
| display | Sets the display behavior of an element. | block, inline, flex, none, grid |
| width | Sets the width of an element. | 100%, 300px |
| height | Sets the height of an element. | 400px, 100% |
| ``float | Sets the horizontal alignment of an element. | left, right, none |
| clear | Sets the vertial alignment of an element. | left, right, both, none |
Comments
Oops!