π What is CSS?
CSS stands for Cascading Style Sheets. Think of it as the designer of a website. While HTML provides the content (text, images, etc.), CSS controls how that content looks on the screen. It's what makes a website visually appealing, organized, and easy to use.
π A Little History of CSS
Back in the early days of the internet, websites were pretty basic. Everything was controlled directly within the HTML, which made things messy and difficult to manage. In 1996, CSS was created to separate the style from the content. This made websites easier to update and allowed for more consistent designs.
β¨ Key Principles of CSS
- π― Selectors: π― CSS uses selectors to target specific HTML elements you want to style. For example, you can select all the paragraph tags (<p>) to change their font or color.
- π¨ Properties: π¨ Properties are the characteristics you want to change, such as `color`, `font-size`, `margin`, and `padding`.
- π Values: π Values are the settings you assign to properties. For example, you could set the `color` property to `blue` or the `font-size` to `16px`.
βοΈ CSS Syntax
CSS rules are made up of a selector and a declaration block:
selector {
property: value;
}
For example, to make all paragraph text blue, you'd write:
p {
color: blue;
}
π Real-world Examples
Let's say you have a webpage with a heading and some paragraphs. Without CSS, it might look plain and boring. But with CSS, you can do all sorts of things:
- π Change the colors of the text and background.
- ποΈ Change the font and size of the text.
- 𧱠Add borders and spacing around elements.
- π Control the layout of the page.
π» Example Code
Here's a simple example of how CSS can style an HTML page:
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
text-align: center;
}
p {
color: #333;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text. CSS makes it look nice!</p>
</body>
</html>
π‘ Conclusion
CSS is a powerful tool for making websites look great. By understanding the basics of selectors, properties, and values, you can create stunning and user-friendly web pages. Keep practicing, and you'll be styling websites like a pro in no time! π