Adding CSS is essential for making a webpage attractive after creating it with HTML. In this chapter, we will show you how to style a website using three methods, along with simple examples.
Inline styles
Internal styles
External styles
Let's try out these easy methods with easy examples
Inline styles
Inline styles allows you to add styles directly in html element using style attribute
Syntax:
<p style="property:value">My Paragraph!</p>
Example:
<p style="font-size:25px; color: green;">My styled paragraph.</p>
Try It Yourself
You will learn more about Inline CSS in our CSS tutorial.
Internal styles
You can write internal styles inside an HTML document using the
<style> tag within the <head> section.
Syntax:
<style> selector { property: value; } </style>
Example:
<head> <style> p { color: blue; font-size: 25px; } </style> </head>
Example Explanation:
Internal CSS written inside the <style> tag.
The selector chooses elements to style.
Each CSS declaration consists of a property and a value.
Multiple declarations are separated by semicolons (;).
Try It Yourself
External CSS
You can write external styles in a separate CSS file and link it to your HTML document using the <link> tag inside the <head> section.
Step 1: Create an external CSS file (e.g., styles.css)
After creating the CSS file (styles.css) write the CSS rule shown below.
p { color: blue; font-size: 16px; }
Step 2: Link the CSS file in the HTML document
Now link the CSS file with the HTML document using the <link> tag inside the <head> section, as shown below.
<head> <link rel="stylesheet" href="styles.css"> </head>
