How to write CSS syntax in HTML?

Posted on August 5, 2023
Subhajit Dutta

CSS syntax in HTML

In HTML, you can write CSS (Cascading Style Sheets) syntax using the <style> element or by including an external CSS file. CSS is used to define the visual styling of your HTML elements, such as colors, fonts, layout, and more. Here's how you can include CSS in your HTML:

Inline CSS (within the HTML file using the <style> tag):

You can include CSS directly within your HTML file using the <style> tag, typically placed within the <head> section of your HTML document. Here's an example:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <style>
        /* Your CSS rules go here */
        body {
            background-color: lightgray;
            font-family: Arial, sans-serif;
        }

        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Hello, CSS!</h1>
    <p>This is a paragraph with some text.</p>
</body>
</html>

External CSS (linking to an external CSS file):

You can also create a separate CSS file with the .css extension and link it to your HTML document using the <link> tag. This method keeps your HTML and CSS code separate, making your code more organized and easier to maintain.

Create a file named styles.css with the following content:

/* styles.css */
body {
    background-color: lightgray;
    font-family: Arial, sans-serif;
}

h1 {
    color: blue;
}

Then, in your HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Hello, CSS!</h1>
    <p>This is a paragraph with some text.</p>
</body>
</html>

In this approach, the href attribute in the <link> tag should point to the location of your external CSS file relative to the location of your HTML file.

Remember that these are just basic examples. CSS offers a wide range of styling possibilities beyond what's shown here. You can target different elements using selectors, apply various styling properties, create layouts, and more.

How to write CSS syntax in HTML?

Popular Post:

Give us your feedback!