What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the appearance and layout of HTML elements on a web page. It controls how your website looks on all devices.
Why Use CSS?
- Separate content from design
- Make sites responsive and mobile-friendly
- Add animations and transitions
- Create consistent designs across pages
- Reduce code repetition with classes and selectors
Types of CSS
There are three main ways to apply CSS to your HTML:
- Inline CSS
- Directly inside the HTML element using the
styleattribute.
<p style="color:blue;">Hello CSS</p>
- Internal CSS
- Inside a
<style>tag within the HTML file's<head>.
<style>
p {
color: green;
}
</style>
- External CSS
- Linked through a separate
.cssfile. Best practice for real-world projects.
<link rel="stylesheet" href="style.css" />
Basic CSS Syntax
selector {
property: value;
}
Example:
body {
background-color: #f5f5f5;
font-family: Arial;
}
Popular CSS Properties
color: Sets text colorbackground-color: Sets background colorfont-size: Controls text sizemargin: Space outside an elementpadding: Space inside an elementborder: Adds borderswidthandheight: Set dimensions
Selectors in CSS
Selectors target the HTML elements you want to style.
*- Universal selectorp- Element selector.class-name- Class selector#id-name- ID selectordiv p- Descendant selector
Responsive Design with CSS
Using media queries and flexible units like %, em, and vh, you can make websites look good on all screen sizes.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
CSS in Action: Simple Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
text-align: center;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This paragraph is styled using CSS.</p>
</body>
</html>
Conclusion
CSS is the magic that brings life and beauty to your web pages. Whether you're building a portfolio, a landing page, or a full website, CSS gives you the power to control every visual detail.
Stay tuned with Billianz Academy for more beginner-friendly tutorials and real-time projects!
