Apply a style to a tag in CSS3

102
Apply a style to a tag in CSS3

We can create a CSS rule that applies the style to an HTML tag. For Example, if you want all the paragraphs on your page to have text in the Arial font face with a size of 14 points, you can create a CSS declaration with that style properties and use p as the selector. Any text surrounded by <p> tags will have that formatting. Similarly, you can apply a style to customize the color and boldness of your <h2> tags or the alignment of your image with the <img> tag.

We can define a style for our HTML tags in an internal or external style sheet. To learn more about creating style sheets see the section ” Create an internal style sheet and ” Create an external style sheet.

Apply a style to a tag

Step 1: in our external or internal style sheet type the tag for which you want to create a class.

Step 2: Type {.

Step 3: Type one or more property-value pairs for the class. Separate multiple pairs with semicolons.

Step 4: Type } to end the style rule.

The tag now has a style associated with it. If you are editing an external style sheet save the sheet.

Result output

Now in your web browser, open the page the web browser applies the style to the tag content.

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <Style>
            h1{
                font-family: arial; 
                font-style: italic; 
                color: red;
            }
        </Style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <h2>Fontend Developer and Back-end Developer</h2>
        <hr>
        <p>A front end developer has one general responsibility: to ensure 
          that website visitors can easily interact with the page. Back-end
          developers are the experts who build and maintain the mechanisms 
          that process data and perform actions on websites.</p>
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

Follow us on Social Media For More

FacebookInstagramPinterest

LEAVE A REPLY

Please enter your comment!
Please enter your name here