How to add CSS

Prev Next

CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents:

1. Inline CSS

2. Internal CSS

3. External CSS

Inline CSS

Inline CSS is used to apply a unique style to a single HTML element. The CSS property is added directly within the style attribute of the HTML tag.

Example:

<!DOCTYPE html>
<html>
<head>

<title>Inline CSS Example</title>

</head>

<body>

<h3 style="color: blue; text-align: center;">WAY TO CODE TECHNOLOGIES</h3>
<p style="color: red; font-size: 20px;">This is a development company.</p>

</body>
</html>

Output:

WAY TO CODE TECHNOLOGIES

This is a development company.

Internal CSS (Embedded CSS)

Internal CSS is used to define styles for a single HTML document. The CSS rules are added within the <style> tag, inside the <head> section of the HTML file.

Example:

<!DOCTYPE html>

<html>
<head>

<title>Internal CSS Example</title>

<style>
body {
font-family: Arial, sans-serif;
}
h3 {
color: blue;
text-align: center;
}
p {
color: red;
font-size: 20px;
}
</style>

</head>

<body>

<h3>WAY TO CODE TECHNOLOGIES</h3>
<p>This is a development company.</p>

</body>
</html>

External CSS

External CSS is used to apply styles to multiple HTML documents. The CSS rules are defined in a separate .css file, which is then linked to the HTML document using the <link> tag in then <head> section.

Example:

HTML File (index.html):

<!DOCTYPE html>

<html>
<head>

<title>External CSS Example</title>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<h1>WAY TO CODE TECHNOLOGIES</h1>
<p>This is a development company.</p>

</body>
</html>

CSS File (styles.css):

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

Prev Next