CSS Basics Guide
1. What is CSS?
CSS (Cascading Style Sheets) is used to style HTML documents by controlling layout, color, font,
and spacing.
2. CSS Syntax
CSS uses selectors and declarations to style HTML elements.
Example:
selector {
property: value;
3. Adding CSS to HTML
Three methods: Inline CSS, Internal CSS, External CSS.
4. CSS Selectors
- Element Selector: Targets HTML elements by name (e.g., h1 { color: green; })
- Class Selector: Targets elements with a specific class attribute (e.g., .classname { color: blue; })
- ID Selector: Targets elements with a specific id attribute (e.g., #uniqueID { color: red; })
5. CSS Properties
Common properties include color, font-size, margin, padding, and more.
6. Responsive Design
Make your site look good on all devices. Use media queries and viewport settings.
Example of a media query:
@media (max-width: 600px) {
body {
font-size: 14px;
7. Basic Example
Example of a basic CSS file applied to an HTML document.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS (style.css):
body {
background-color: #f3f4f6;
font-family: Arial, sans-serif;
color: #333;
h1 {
color: #1a73e8;
text-align: center;
p{
font-size: 16px;
line-height: 1.5;
