Menu Close
HTML Tutorial

Styling HTML with CSS

CSS stands for Cascading Style Sheet. It helps to style the HTML elements and it saves a lot of work.

CSS can control the layout of multiple web pages all at one style sheet.

CSS can be inserted into HTML in three ways.

1. Inline CSS

For this method, the CSS style attribute is added into HTML elements.

2. Internal CSS

In this method, the CSS style element is added in the head section.

3. External CSS

In this method, the CSS style elements are added in a separate file and it links into the head section.

Inline CSS:

In this example, the CSS style attribute is added in a single HTML element.

Example

<html>
<head>
    <title>HTML CSS</title>
</head>
<body>
    <h1>HTML Inline CSS Example</h1>
    <p style="color:blue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>

Output:

HTML-CSS

Internal CSS:

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Internal CSS</title>
    <style>
        body{background-color: green;}
        h1{color: blue;}
        p{color: red;}
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

External CSS:

In this example, the style attributes for HTML elements are added in style.css. This separate file is linked into the head section of the main HTML page.

In this method, the Id and class attributes are very important to styling the HTML elements.

Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Follow the separate CSS file .

style.css

body{
    background-color: gray;
}

h1{
    color: blue;
}

p{
    color: red;
}

Commonly used CSS properties:

Properties

Properties with values

Description

background-color

background-color:green;

It is used to apply the color to the background of that element.

color

color: blue;

It is used to change the text color.

padding

padding: 20px;

It is used to define the space between content and the border.

margin

margin: 20px; margin-left:

It is used to define the space around an element.

font-family

font-family: Arial;

Font-family defines a font for a particular text or the full content.

Font-size

font-size: 16px;

Font-size defines a font size for a text.

text-align

text-align: left;

It is used to change the position of the text.

Previous
Next
Popular HTML Blogs