What is CSS?
CSS stands for Cascading Style Sheets. It’s a language used to style HTML elements, controlling things like the color, fonts, and layout of web pages. While HTML defines the structure and content, CSS focuses on how that content looks. CSS allows you to make a website visually appealing and easy to navigate, ensuring consistency across different pages.
How to Add CSS to HTML
There are three main ways to include CSS in your HTML:
1. Inline CSS
This involves adding CSS directly to the HTML element using the style attribute. This is useful for small, one-off style changes, but it’s not ideal for large websites.
<p style="color: blue;">This text will be blue.</p>2. Internal CSS
Internal CSS is added inside the <style> tag in the <head> section of your HTML document. This method is great for styling a single page but becomes inefficient for websites with multiple pages.
<head> <style> p { color: red; } </style></head><body> <p>This text will be red.</p></body>3. External CSS
This is the most common and efficient way to apply styles. You create a separate CSS file with a .css extension and link it to your HTML file. This method is best for larger projects where you want the same styles to be applied across multiple pages.
<head> <link rel="stylesheet" href="styles.css"></head><body> <p>This text will be styled from an external CSS file.</p></body>External CSS (styles.css):
p { color: green;}Example of CSS in HTML Code
<html><head> <style> h1 { color: navy; font-size: 36px; } p { color: darkgray; font-family: Arial, sans-serif; line-height: 1.6; } </style></head><body> <h1>Welcome to CSS</h1> <p>This is a paragraph styled with CSS. Notice how the font, color, and size of both the heading and paragraph are controlled by CSS.</p></body></html>CSS Labs
