CSS Essentials for MERN Stack Beginners

Welcome back to "The MERN Handbook." In this fourth article of the series, we'll cover the basics of CSS (Cascading Style Sheets). Understanding CSS is crucial for designing visually appealing web applications. We'll cover selectors, properties, basic styling techniques, and various methods of applying CSS. Additionally, we'll showcase practical implementations with HTML to give you more clarity.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS allows you to apply styles to web pages, including layout, colors, fonts, and more. By separating content from design, CSS enhances the maintainability and flexibility of web pages.

CSS Selectors

Selectors are used to target HTML elements that you want to style. Here are some common types of selectors:

1. Element Selector: Targets all instances of a specific HTML element.

    p {
      color: blue;
    }
   

   This example changes the text color of all <p> elements to blue.

2. Class Selector: Targets elements with a specific class attribute.

    .highlight {
      background-color: yellow;
    }
   

   This example changes the background color of elements with the class highlight to yellow.

3. ID Selector: Targets a single element with a specific ID attribute.

    #header {
      font-size: 24px;
    }
   

   This example changes the font size of the element with the ID header to 24 pixels.

4. Attribute Selector: Targets elements with a specific attribute.

    [type="text"] {
      border: 1px solid black;
    }
   

   This example adds a border to all <input> elements with type="text".

5. Descendant Selector: Targets elements that are descendants of a specified element.

    div p {
      margin: 10px;
    }
   

   This example adds a margin to all <p> elements that are inside a <div> element.

6. Pseudo-Class Selector: Targets elements in a specific state.

    a:hover {
      color: red;
    }
   

   This example changes the text color of links to red when they are hovered over.

CSS Properties

Properties are used to apply styles to elements. Here are some basic properties you should know:

1. Color: Sets the color of text.

    color: green;
   

2. Background-Color: Sets the background color of an element.

    background-color: lightblue;
   

3. Font-Size: Sets the size of the text.

    font-size: 16px;
   

4. Margin: Sets the space outside an element.

    margin: 20px;
   

5. Padding: Sets the space inside an element, between the content and the border.

    padding: 10px;
   

6. Border: Sets the border around an element.

    border: 1px solid black;
   

7. Width and Height: Sets the width and height of an element.

    width: 200px;
    height: 100px;
   

Basic Styling Techniques

Here are some basic styling techniques to help you get started with CSS:

1. Centering Content: Centering an element horizontally.

    .center {
      margin: 0 auto;
      width: 50%;
    }
   

2. Styling Lists: Removing bullets from a list.

    ul {
      list-style-type: none;
    }
   

3. Styling Links: Removing the underline from links.

    a {
      text-decoration: none;
    }
   

4. Floating Elements: Floating elements to the left or right.

    .left {
      float: left;
    }
    .right {
      float: right;
    }
   

5. Using Flexbox: Creating a flexible layout.

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
   

6. Using Grid: Creating a grid layout.

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 10px;
    }
   

Methods of Applying CSS

There are three primary methods of applying CSS to HTML: inline styles, internal styles, and external styles.

1. Inline Styles: Directly applying styles to HTML elements using the style attribute.

    <p style="color: blue; font-size: 14px;">This is an inline styled paragraph.</p>
   

2. Internal Styles: Including CSS within the <style> tag in the head section of an HTML document.

    <head>
      <style>
        p {
          color: green;
          font-size: 16px;
        }
      </style>
    </head>
    <body>
      <p>This is an internally styled paragraph.</p>
    </body>
   

3. External Styles: Linking to an external CSS file using the <link> tag.

    <head>
      <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
      <p>This is an externally styled paragraph.</p>
    </body>
   

styles.css:

p {
  color: red;
  font-size: 18px;
}

Practical Implementation

Let's combine what we've learned in a practical example. We’ll create a basic card layout using different CSS methods.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Card Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <style>
    .card-title {
      font-size: 24px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2 class="card-title">Card Title</h2>
    <p class="card-content" style="color: gray; font-size: 16px;">This is a simple card with some content.</p>
  </div>
</body>
</html>

styles.css:

.card {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  background-color: #f9f9f9;
}

Conclusion

CSS is an essential part of web development, enabling you to create visually appealing and user-friendly interfaces. By understanding selectors, properties, basic styling techniques, and methods of applying CSS, you'll be well on your way to mastering CSS. In the next article, we'll dive deeper into advanced CSS techniques and how to use them effectively in your projects.