CSS

Sure!
Here's a quick overview of the **basics of CSS** (Cascading Style Sheets), which is
used to style HTML documents.
---
### **1. What is CSS?**
CSS controls the appearance of HTML elements on a webpage. It allows you to apply styles
like colors, fonts, layouts, and spacing to create visually appealing web pages. You can link
a CSS file to an HTML file or include CSS directly in the HTML file.
---
### **2. CSS Syntax**
CSS is written in rulesets, where each ruleset consists of a **selector** and **declaration
block**.
```css
selector {
property: value;
```
- **Selector**: The HTML element(s) you want to style.
- **Property**: The style you want to apply (e.g., color, font-size).
- **Value**: The value for that property (e.g., red, 16px).

---
### **3. Types of CSS**
- **Inline CSS**: Styles applied directly in an HTML element’s `style` attribute.
```html
<p style="color: red;">This text is red</p>
```
- **Internal CSS**: Styles placed inside the `<style>` tag in the `<head>` of an HTML
document.
```html
<style>
p{
color: red;
</style>
```
- **External CSS**: Styles written in a separate `.css` file linked to the HTML file.
```html
<link rel="stylesheet" href="styles.css">

```
---
### **4. Basic CSS Properties**
- **Color and Background**
- `color`: Sets text color.
- `background-color`: Sets background color of an element.
```css
p{
color: blue;
background-color: yellow;
```
- **Fonts**
- `font-family`: Sets the font type.
- `font-size`: Sets the size of the font.
- `font-weight`: Sets the thickness of the font (e.g., bold).
```css
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
```
- **Text Styling**
- `text-align`: Aligns text (left, center, right).
- `text-decoration`: Adds underline, overline, or strikethrough.
```css
p{
text-align: center;
text-decoration: underline;
```
- **Spacing**
- `margin`: Space outside the element.
- `padding`: Space inside the element.
```css
div {
margin: 10px;
padding: 20px;
```
---
### **5. CSS Selectors**
- **Element Selector**: Targets all elements of a particular type.
```css
p{
color: red;
```
- **Class Selector**: Targets elements with a specific class (use `.` before the class
name).
```css
.highlight {
background-color: yellow;
```
- **ID Selector**: Targets a specific element with a unique ID (use `#` before the ID name).
```css
#header {
font-size: 20px;
}
```
- **Universal Selector**: Targets all elements on the page (`*`).
```css
*{
font-family: Arial;
```
- **Descendant Selector**: Targets elements that are nested inside other elements.
```css
div p {
color: blue;
```
---
### **6. Box Model**
The **box model** is fundamental to how elements are styled and laid out. It consists of:
- **Content**: The actual content of the element (e.g., text or images).

- **Padding**: Space between content and border.
- **Border**: A border surrounding the padding (optional).
- **Margin**: Space outside the border, separating the element from others.
```css
div {
margin: 10px;
padding: 20px;
border: 2px solid black;
```
---
### **7. Positioning**
- **Static** (default): Elements flow normally in the document.
- **Relative**: Positions element relative to its normal position.
- **Absolute**: Positions element relative to its closest positioned ancestor.
- **Fixed**: Positions element relative to the viewport (stays in place while scrolling).
- **Sticky**: Switches between relative and fixed based on scroll position.
```css
div {
position: relative;
top: 20px;
left: 30px;
```
---
### **8. Flexbox**
Flexbox is a layout model that allows for easy alignment and distribution of elements.
```css
.container {
display: flex;
justify-content: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
```
- **`justify-content`**: Aligns items horizontally (e.g., `center`, `space-between`).
- **`align-items`**: Aligns items vertically (e.g., `center`, `flex-start`).
---
### **9. Grid Layout**
CSS Grid Layout allows for two-dimensional layouts (rows and columns).
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3 equal-width columns */
gap: 10px; /* Space between items */
```
---
### **10. Responsive Design (Media Queries)**
You can make your web pages responsive (adapt to different screen sizes) using media
queries.
```css
@media (max-width: 600px) {
.container {
flex-direction: column; /* Stack elements on small screens */
```
---
### **Conclusion**
CSS is a powerful tool for styling HTML elements, and mastering its properties allows you
to create visually appealing, responsive, and well-structured web pages. Once you're
comfortable with these basic concepts, you can explore more advanced features like
animations, transitions, and advanced layout techniques (Flexbox/Grid).
Let me know if you'd like further details or examples!

CSS

Uploaded by

Copyright:

Available Formats

CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS

Uploaded by

Copyright:

Available Formats

Sure!

### **1. What is CSS?**

### **2. CSS Syntax**

- **Selector**: The HTML element(s) you want to style.

- **Property**: The style you want to apply (e.g., color, font-size).

- **Value**: The value for that property (e.g., red, 16px).

### **3. Types of CSS**

- **Inline CSS**: Styles applied directly in an HTML element’s `style` attribute.

<p style="color: red;">This text is red</p>

<link rel="stylesheet" href="styles.css">

### **4. Basic CSS Properties**

- **Color and Background**

- `color`: Sets text color.

- `background-color`: Sets background color of an element.

- `font-family`: Sets the font type.

- `font-size`: Sets the size of the font.

- `font-weight`: Sets the thickness of the font (e.g., bold).

font-family: Arial, sans-serif;

- `text-align`: Aligns text (left, center, right).

- `text-decoration`: Adds underline, overline, or strikethrough.

- `margin`: Space outside the element.

- `padding`: Space inside the element.

### **5. CSS Selectors**

- **Element Selector**: Targets all elements of a particular type.

- **Universal Selector**: Targets all elements on the page (`*`).

### **6. Box Model**

- **Content**: The actual content of the element (e.g., text or images).

- **Border**: A border surrounding the padding (optional).

border: 2px solid black;

### **7. Positioning**

- **Static** (default): Elements flow normally in the document.

- **Relative**: Positions element relative to its normal position.

- **Absolute**: Positions element relative to its closest positioned ancestor.

- **Sticky**: Switches between relative and fixed based on scroll position.

### **8. Flexbox**

justify-content: center; /* Aligns items horizontally */

align-items: center; /* Aligns items vertically */

- **`justify-content`**: Aligns items horizontally (e.g., `center`, `space-between`).

- **`align-items`**: Aligns items vertically (e.g., `center`, `flex-start`).

### **9. Grid Layout**

grid-template-columns: 1fr 1fr 1fr; /* 3 equal-width columns */

gap: 10px; /* Space between items */

### **10. Responsive Design (Media Queries)**

@media (max-width: 600px) {

flex-direction: column; /* Stack elements on small screens */

Let me know if you'd like further details or examples!

You might also like

### 1. What is CSS?

### 2. CSS Syntax

- Selector: The HTML element(s) you want to style.

- Property: The style you want to apply (e.g., color, font-size).

- Value: The value for that property (e.g., red, 16px).

### 3. Types of CSS

- Inline CSS: Styles applied directly in an HTML element’s `style` attribute.

### 4. Basic CSS Properties

- Color and Background

### 5. CSS Selectors

- Element Selector: Targets all elements of a particular type.

- Universal Selector: Targets all elements on the page (`*`).

### 6. Box Model

- Content: The actual content of the element (e.g., text or images).

- Border: A border surrounding the padding (optional).

### 7. Positioning

- Static (default): Elements flow normally in the document.

- Relative: Positions element relative to its normal position.

- Absolute: Positions element relative to its closest positioned ancestor.

- Sticky: Switches between relative and fixed based on scroll position.

### 8. Flexbox

- `justify-content`: Aligns items horizontally (e.g., `center`, `space-between`).

- `align-items`: Aligns items vertically (e.g., `center`, `flex-start`).

### 9. Grid Layout

### 10. Responsive Design (Media Queries)