igbojionu

Posted on Jan 29 • Updated on Feb 3

CSS In 20MIN

#css #webdev #html

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

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.

<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:

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

h1 {
    color: #333;
}

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

HTML file:

<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:

  p {
      color: #555;
  }

Class Selector:

  .highlight {
      background-color: yellow;
  }

ID Selector:

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

Properties

Properties define the actual styles applied to the selected elements:

Font Properties:

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

Color Properties:

  h2 {
      color: #3498db;
  }

Margin and Padding:

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

Border and Border Radius:

  .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.

/* 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.

/* 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.

@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 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 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!

DEV Community