CSS In 20MIN
Tags: css, webdev, html
Published: 2024-01-29 22:52:59


#### Introduction to CSS

CSS is used for styling web pages. It allows you to control the layout and appearance of HTML elements. and this is a continuation of this article [HTML Course](https://dev.to/igbojionu/html-course-2ipd)

Certainly! Let's break down the CSS crash course in more detail:

### Adding CSS to HTML

#### Internal CSS

In the internal approach, CSS is placed directly within the HTML file using the `<style>` tag in the `<head>` section. Styles are written inside a `<style>` block, and you can define styles for various HTML elements.

```html
<style>
    /* Font and Layout Styles */
body {
    font-family: Arial, sans-serif; /* Set the default font for the entire page */
    background-color: #f4f4f4; /* Set a background color for the page */
    margin: 20px; /* Add margin to the entire page */
}

/* Header Styles */
h1 {
    color: #333; /* Set color for h1 elements */
}

/* Paragraph Styles */
p {
    font-size: 16px; /* Set font size for paragraphs */
    line-height: 1.5; /* Set the line height for better readability */
}
</style>
```

In this example, we set the font family, background color, and margin for the entire body. The `<h1>` element is styled with a specific color, and paragraphs (`<p>`) have a defined font size and line height.

#### External CSS

The external approach involves creating a separate CSS file (e.g., `styles.css`) and linking it to the HTML file using the `<link>` tag. This keeps your HTML clean and allows for better organization and reuse of styles.

**styles.css:**

```css
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 20px;
}

h1 {
    color: #333;
}

p {
    font-size: 16px;
    line-height: 1.5;
}
```

**HTML file:**

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

### Selectors and Properties

#### Selectors

Selectors target HTML elements to apply styles. There are various types of selectors:

- **Element Selector:**

  ```css
  p {
      color: #555;
  }
  ```

- **Class Selector:**

  ```css
  .highlight {
      background-color: yellow;
  }
  ```

- **ID Selector:**

  ```css
  #main-title {
      font-size: 24px;
  }
  ```

#### Properties

Properties define the actual styles applied to the selected elements:

- **Font Properties:**

  ```css
  body {
      font-family: 'Helvetica', sans-serif;
      font-size: 16px;
  }
  ```

- **Color Properties:**

  ```css
  h2 {
      color: #3498db;
  }
  ```

- **Margin and Padding:**

  ```css
  .box {
      margin: 20px;
      padding: 10px;
  }
  ```

- **Border and Border Radius:**

  ```css
  .rounded-box {
      border: 2px solid #e74c3c;
      border-radius: 10px;
  }
  ```

### Box Model and Layout

#### Box Model

The box model describes how elements are rendered on a page. It consists of content, padding, border, and margin.

```css
/* Box Model */
.box {
    width: 200px; /* Set a fixed width for the box */
    height: 100px; /* Set a fixed height for the box */
    border: 1px solid #ddd; /* Add a 1px solid border with a light gray color */
    margin: 20px; /* Add margin around the box */
    padding: 10px; /* Add padding inside the box */
}

```

Here, we define the width and height of the box, set a border, add some margin around it, and provide padding inside.

#### Flexbox

Flexbox is a layout model that allows you to design complex layouts more efficiently.

```css
/* Flexbox Layout */
.flex-container {
    display: flex; /* Create a flex container */
    justify-content: space-between; /* Space items evenly along the main axis */
}

.flex-item {
    flex: 1; /* Each flex item takes up an equal portion of the available space */
}

```

In this example, elements with the class `.flex-container` will be displayed as a flex container, and the child elements with the class `.flex-item` will share the available space evenly.

### Responsive Design

Responsive design ensures that a website looks good on various devices and screen sizes. Media queries can be used to apply different styles based on the screen width.

```css
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .box {
        width: 100%;
    }
}
```

Here, when the screen width is 600 pixels or less, the font size of the body is reduced, and the width of the `.box` element is set to 100%.

### CSS Transitions and Animations

#### Transition

Transitions provide a smooth change between different states.

```css
/* CSS Transitions */
button {
    transition: background-color 0.3s ease; /* Apply a smooth transition on button background color changes */
}

button:hover {
    background-color: #2ecc71; /* Change background color on button hover */
}
```

In this example, when you hover over a button, the background color changes smoothly over 0.3 seconds.

#### Animation

Animations allow for more complex and dynamic effects.

```css
/* CSS Animations */
@keyframes slideIn {
    from {
        transform: translateX(-100%); /* Start off the screen to the left */
    }
    to {
        transform: translateX(0); /* Move in and end at the normal position */
}
}

.slide-in {
    animation: slideIn 1s ease; /* Apply the slideIn animation over 1 second with easing */
}
```

Here, an animation named `slideIn` is defined to slide an element in from the left. The class `.slide-in` is then applied to an element to trigger the animation.

### Conclusion

This detailed breakdown covers the basics of CSS, including styling elements, using selectors, understanding the box model, creating layouts with flexbox, handling responsiveness with media queries, and adding transitions/animations. Practice and experimentation are key to mastering CSS. Happy coding!