CSS INTRODUCTION
Introduction to CSS
CSS (Cascading Style Sheets) is a stylesheet language used to control the appearance and layout of web pages. It works together with HTML to make web pages attractive and responsive.
Why Use CSS?
- Adds colors, fonts, and backgrounds.
- Controls the layout of web pages.
- Makes websites responsive for different screen sizes.
- Separates content (HTML) from presentation (CSS), making code easier to maintain.
Basic CSS Syntax
selector { property: value; }
Example
HTML:
<h1>Hello, World!</h1> <p>Welcome to CSS.</p>
CSS:
h1 { color: blue; text-align: center; } p { color: green; font-size: 18px; }
Ways to Add CSS
- Inline CSS (inside an HTML element)
<p style="color: red;">This is a paragraph.</p>
-
Internal CSS (inside the
<style>tag)
<head> <style> p { color: blue; } </style> </head>
- External CSS (recommended)
<head> <link rel="stylesheet" href="styles.css"> </head>
styles.css
body { background-color: lightgray; }
Common CSS Properties
| Property | Description |
|---|---|
color | Changes text color |
background-color | Sets background color |
font-size | Changes text size |
font-family | Changes font style |
margin | Sets outer spacing |
padding | Sets inner spacing |
border | Adds a border around elements |
width | Sets element width |
height | Sets element height |
text-align | Aligns text |
Example
<!DOCTYPE html> <html> <head> <style> body { background-color: #f2f2f2; font-family: Arial, sans-serif; } h1 { color: navy; text-align: center; } p { color: #333; font-size: 18px; } button { background-color: green; color: white; padding: 10px 20px; border: none; cursor: pointer; } button:hover { background-color: darkgreen; } </style> </head> <body> <h1>Welcome to CSS</h1> <p>CSS makes web pages beautiful and user-friendly.</p> <button>Click Me</button> </body> </html>
Advantages of CSS
- Improves website appearance.
- Reduces code duplication.
- Speeds up page loading with external stylesheets.
- Makes websites easier to maintain.
- Supports responsive web design.
Summary
CSS is an essential web technology used to style HTML elements. By learning CSS, you can create visually appealing, responsive, and professional-looking websites.
No comments