Using Style in HTML

Using style in HTML involves applying CSS (Cascading Style Sheets) to your HTML elements. CSS allows you to control the layout, colors, fonts, and other aspects of your web page’s appearance.There are three ways for using style in HTML.

Inline Style in HTML

We can add ‘style’ attribute directly to an HTML tag, so you can adjust style color, background font and so on. Let see an example below:

<!DOCTYPE html>
<html>
<head>
    <title>Inline Styles of HTML</title>
</head>
<body>
    <h1 style="color: yellow; text-align: left;">This is a heading</h1>
    <p style="color: blue;">This is a paragraph with red text.</p>
</body>
</html>

Output:

Internal Styles of HTML

Internal styles are used within a <style> tag inside the <head> section of your HTML document. At this time you can adjust with any color, font or background inside of style. Let see another example:

<!DOCTYPE html>
<html>
<head>
    <title>Internal Styles</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: yellowgreen;
            text-align: left;
        }
        p {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>This is a heading of my first HTML</h1>
    <p>This is a paragraph with yello text.</p>
</body>
</html>

Output:

External Styles of HTML

External styles are used in a separate CSS file, which is linked to your HTML document using the <link> tag. Normally, CSS file will be given name follow your design HTML structure such foot.css, body.css, or header.css and so on. However, you can still use CSS file like ‘style.css’ to cover the whole style of your HTML page, it relies on your design structure. Let see another example below:

This is ‘Style.css’

body {
    font-family: Arial, sans-serif;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    color: red;
}

This is HTML code: index.html

<!DOCTYPE html>
<html>
<head>
    <title>External Styles</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with red text.</p>
</body>
</html>

Categories:HTML