Scribd
Upload
5 views

CSS

Uploaded by

imaneluigi07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

CSS

Uploaded by

imaneluigi07
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

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!

You might also like