How to Create a CSS in HTML?

Before you know how to Create CSS in HTML, You should know the basics of CSS i.e what CSS is, the purpose of Creating a CSS in HTML, and how many types of CSS there are.  

What is CSS?

CSS stands for Cascading style sheet. It is used to set the format of a website. It improves its way of looking. A single CSS sheet can be applied on many webpages hence it also saves time. With CSS we can control the color, spacing, font family, and style of the text. We also manage the way of looking at our website on different devices and different screen sizes.    

Types of CSS:-

There are three types of CSS Inline, Internal, and External. There are different ways to Create these three different types of CSS in HTML.

Create CSS in HTML

Inline CSS

It is used with the HTML element with the help of <style> tag in the <head> section. It is used to change the style of that particular element where it is applied. Syntax for Inline CSS:-

<!DOCTYPE html>
<head>
    <title>
        Inline CSS
    </title>
</head>
<body style=
     background-color: black;>
<h2 style=color:blanchedalmond;
           font-weight: bold;>
    CodeBlockx
</h2>
<h2 style=color:aquamarine;
            font-weight: bold;>
    Inline CSS
</h2>
<h3 style=color:aqua;
      font-weight: bold;>
    Inline CSS
</h3>
</body>
</html>

OUTPUT

CSS Ouput

Internal CSS

It is used with the HTML element with the help of the <style> tag in the <head> section. It is used to change the style of all that particular tags at one time. The syntax for Inline CSS:-

<!DOCTYPE html>
<head>
    <title>
        Internal CSS
    </title>
    <style>
        body{
            background-color:
             black;
        }
        h2{
            color:aliceblue;
            font-style: italic;
        }
        h3{
            font-family: cursive;
            color: aquamarine;
        }
    </style>
</head>
<body>
    <h2>CodeBlockx</h2>
    <h2>Inline CSS</h2>
    <h3>Inline CSS</h3>
</body>
</html>

OUTPUT

Internal CSS ouptut

External CSS

It is used with the HTML element by adding the link of the stylesheet in its head section that is used to change the style of all that particular tags at one time. It reduces the length of code in HTML and the stylesheet can be used again. The syntax for Inline CSS:-

external.html

<!DOCTYPE html>
<head>
    <title>External CSS</title>
    <link rel=“stylesheet”
    href=“style.css”>
</head>
<body>
    <h1>I Love CodeBlockx</h1>
    <h2>External CSS</h2>
    <p>
        This is an example for
        external CSS.
    </p>
</body>
</html>

style.css

h1{
    color: crimson;
}
h2{
    font-family: ‘Lucida Sans’;
}
p{
    text-decoration: underline;
    font-size: 19px;
}

OUTPUT

External CSS

Hope this blog post was helpful To you and you have got answer of your question. Also, if you are finding it difficult to remember HTML Tags. we have made a HTML Cheat Sheet for the same. You can check it out once. It will be helpful for you.

 

Thank you visiting our blog. If you have any question related to coding let us know in the comments section. We will answer it as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *