**Basic CSS:**
1. Inline CSS:
```html
<p style="color: blue;">This is a blue text.</p>
```
2. Internal CSS (Inside `<head>`):
```html
<head>
<style>
p {
color: red;
}
</style>
</head>
```
3. External CSS (In a separate file, e.g., `styles.css`):
```css
/* styles.css */
p {
color: green;
}
```
```html
<head>
<link rel="stylesheet" href="styles.css">
</head>
```
**Selectors and Properties:**
1. Basic Selectors:
```css
/* Element selector */
p {
font-size: 16px;
}
/* Class selector */
.my-class {
background-color: yellow;
}
/* ID selector */
#my-id {
border: 1px solid black;
}
```
2. Combining Selectors:
```css
/* Descendant selector */
div p {
color: purple;
}
/* Child selector */
ul > li {
font-weight: bold;
}
```
3. Common Properties:
```css
/* Margin and Padding */
.element {
margin: 10px;
padding: 5px;
}
/* Border */
.element {
border: 1px solid #333;
}
/* Background */
.element {
background-color: #f0f0f0;
}
```
**Layout and Positioning:**
1. Box Model:
```css
.element {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
```
2. Display and Positioning:
```css
/* Display */
.block {
display: block;
}
.inline {
display: inline;
}
/* Positioning */
.relative {
position: relative;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
```
**Responsive Design:**
1. Media Queries:
```css
/* Desktop styles */
.element {
font-size: 18px;
}
/* Mobile styles */
@media (max-width: 768px) {
.element {
font-size: 14px;
}
}
```
**Advanced CSS:**
1. Flexbox:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
2. Grid Layout:
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 10px;
}
```
3. CSS Variables:
```css
:root {
--primary-color: #007bff;
}
.element {
color: var(--primary-color);
}
```
These are just a few concepts in CSS. As you progress, you can explore more advanced topics like animations, transforms, and more. CSS can greatly enhance the appearance and interactivity of your web pages.
0 Comments