What is CSS?
CSS (Cascading Style Sheets) is a language used to style the appearance of web pages. While HTML (HyperText Markup Language) provides the structure and content of a web page (such as headings, paragraphs, and images), CSS is responsible for how these elements look—such as their color, size, layout, and spacing.
CSS makes it easy to define the look and feel of multiple pages of a website at once by allowing you to create rules that apply consistently across an entire site. It also separates the content (HTML) from the design (CSS), making your code easier to maintain and update.
Why Use CSS?
Using CSS has several advantages:
- Separation of content and design: It separates your HTML content from the way it is presented.
- Consistency: You can style multiple web pages with a single CSS file, ensuring consistency across your site.
- Flexibility: CSS provides you with more design flexibility than just using HTML.
- Responsiveness: It helps create responsive designs that look good on all devices, such as desktops, tablets, and phones.
Adding CSS to Your HTML
There are three ways to apply CSS to an HTML document:
- Inline CSS: Applied directly within HTML elements using the
styleattribute. - Internal CSS: Added within the
<style>tag in the<head>section of an HTML file. - External CSS: Linked through an external stylesheet that is included in the HTML document using the
<link>tag.
Let’s dive into how you can apply simple styles using each method.
1. Inline CSS
Inline CSS is the quickest way to add styles to your elements. You apply it directly to an HTML element using the style attribute. This is useful for small, quick changes, but it’s not ideal for larger projects as it mixes content with style.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">Hello, World!</h1> <p style="font-size: 18px; color: gray;">This is a paragraph styled with inline CSS.</p>
</body>
</html>In this example, the h1 heading is styled to have blue text and be centered, while the paragraph has gray text and a font size of 18px.
2. Internal CSS
With internal CSS, you place all your styles in the <style> section inside the <head> of your HTML file. This method keeps your styles separate from the HTML content but still in the same file. It’s useful for single-page websites.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: blue; text-align: center; }
p { font-size: 18px; color: gray; }
</style>
</head>
<body>
<h1>Hello, World!</h1> <p>This is a paragraph styled with internal CSS.</p>
</body>
</html>In this case, the styles for the h1 and p tags are defined in the <style> section, which is more efficient than using inline CSS if you need to style multiple elements in the same way.
3. External CSS
External CSS is the most efficient and commonly used method, especially for multi-page websites. All your CSS is written in a separate .css file, and you link it to your HTML file. This allows you to change the look of multiple pages by simply editing one CSS file.
<!-- index.html -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body> <h1>Hello, World!</h1> <p>This is a paragraph styled with external CSS.</p>
</body>
</html>
/* styles.css */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
With external CSS, all styles are stored in styles.css, and the <link> tag in the <head> of your HTML document connects it to the webpage. This approach keeps your code clean and easy to manage.
Basic CSS Properties
Here are a few common CSS properties that you can use to style HTML elements:
color: Sets the text color.font-size: Specifies the size of the font.background-color: Defines the background color of an element.margin: Sets the space outside the element’s border.padding: Sets the space inside the element’s border.text-align: Aligns text within an element (left, right, center, justify).
Example
Let’s create a simple webpage using external CSS:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<section> <p>This is a simple webpage styled with CSS.</p> </section>
</body>
</html>
/* styles.css */
body {
background-color: #f0f0f0;
font-family: 'Helvetica', sans-serif;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 20px;
}
p {
font-size: 16px;
color: #333;
padding: 20px;
margin: 20px;
border: 1px solid #ccc;
background-color: #fff;
}Conclusion
CSS is a powerful tool for styling web pages. By separating the design from the content, it makes web development more efficient and manageable. Whether you use inline, internal, or external CSS, it allows you to control the look of your website easily. By learning the basics of CSS, you can greatly improve the appearance and user experience of your web projects.
