What is the style in HTML?

HTML (Hypertext Markup Language) is used to structure and present content on the web. CSS (Cascading Style Sheets) is a markup language that determines how your web pages will appear.

HTML Tutorials Contents:

Styles in HTML allow you to change the appearance of the content on your web page, it is used to add styles to an element, such as color, font, size, and more.

There are three types of CSS

1. Inline Styles: by using the style attribute inside HTML elements

2. Internal Styles: by using a <style> element in the <head> section of an HTML page

3. External Styles: by using a <link> element to link to an external CSS file

There are several ways to add styles to HTML, including:

Inline Styles

Inline styles are applied directly to an HTML element using the style attribute. The property is a CSS property. The value is a CSS value.

<tagname style="property:value;">

For example, to set the color, font size, and style of the paragraph, you can use the following code:

<p style="color:blue;">This is a blue paragraph.</p>
<p style="color:red; font-size:24px;">This is a red paragraph with font size 24px.</p>
<p style="color:green; font-size:24px; font-style:italic;">This is a green paragraph with font size 28px and italic.</p>

– <p> is a tagname, HTML element.

– style is an attribute.

– color is a CSS property.

– blue is a value.

Internal Styles

Internal styles (internal CSS) are defined within the <head> section of an HTML page using the <style> tag.

<style>
        tagname, attribute id, attribute name... {
            property: value;
        }
</style>

For example:

<!DOCTYPE html>
<html>
<head>

    <title>Internal Styles</title>
    <style>

        body {
            background-color: green;
        }
        p {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p>This is a blue paragraph with font size 24px.</p>
</body>
</html>

External Styles

External styles are defined in a separate CSS (Cascading Style Sheet) file and linked to the HTML page using the link tag in the head section. For example, to create an external style sheet named “style.css” and link it to an HTML document, you can use the following code:

<head>
    <link rel="stylesheet" href="style.css">
</head>

Then, in the “style.css” file, you can define styles for HTML elements. For example:

p {
    color: red;
}

Using these methods, you can define styles for various HTML elements, such as text, headings, paragraphs, lists, links, images, and tables. You can change the font, size, color, background color, spacing, alignment, and other properties of these elements to make your web page visually appealing and easy to read.

Related Articles