### Introduction to CSS
**CSS (Cascading Style Sheets)** is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall design of web pages, allowing for separation of content and style.
#### Key Concepts
1. **Selectors**: Define which HTML elements the CSS rules apply to. Examples include element selectors, class selectors, and ID selectors.
2. **Properties**: Define the specific styles to be applied, such as `color`, `font-size`, `margin`, etc.
3. **Values**: Specify the settings for properties. For example, `color: blue;` or `font-size: 16px;`.
4. **Cascade**: CSS rules can be overridden based on their specificity and order of appearance.
### Basic Example
Here’s a simple example of CSS applied to HTML:
**HTML:**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple paragraph to demonstrate CSS styling.</p>
</body>
</html>
```
**CSS (styles.css):**
```css
/* This is a comment in CSS */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
color: #333;
text-align: center;
padding: 20px;
}
p {
color: #666;
font-size: 16px;
margin: 20px;
line-height: 1.6;
}
```
### Exercises
1. **Basic Styling**:
- Create an HTML file with a heading, paragraph, and a button.
- Use CSS to style the heading with a specific color, font size, and alignment.
- Style the paragraph with a different font and color.
- Style the button with background color, text color, and padding.
2. **Layout Design**:
- Create a webpage with a header, main content area, and footer.
- Use CSS Flexbox or Grid to layout these sections.
- Ensure the header and footer have a background color, and the main content area has padding.
3. **Responsive Design**:
- Add media queries to your CSS to adjust the layout for different screen sizes.
- For screens narrower than 600px, adjust font sizes and layout to ensure readability on mobile devices.
4. **Hover Effects**:
- Apply CSS hover effects to buttons or links.
- Change the background color or text color when the user hovers over these elements.
Feel free to modify and expand these examples and exercises based on your learning needs!
0 Comments