DEV Community

Cover image for The Intern's Complete Guide to CSS: From Styling Basics to Modern Flexbox Layouts
Abdul Fadiga
Abdul Fadiga

Posted on

The Intern's Complete Guide to CSS: From Styling Basics to Modern Flexbox Layouts

#webdev #beginners #css #tutorial

Hey team,

Incredible work building your first structured web pages with HTML. You've learned how to create the skeleton of a website. Now, it's time to become the artist. We're going to add color, life, and professional layouts to that skeleton.

This is your comprehensive guide to CSS (Cascading Style Sheets).

Part 1: What is CSS?

CSS is a stylesheet language used to describe the presentation and visual appearance of a document written in HTML. If HTML is the noun (the content), CSS is the adjective (the description). It answers the question: "What should this look like?"

The name itself gives us clues:

  • Style Sheet: It's a file (a "sheet") that contains all the style rules for your website.
  • Cascading: This is a key concept. It refers to the process browsers use to figure out which CSS rule to apply when multiple rules target the same element. It's a system of priority based on specificity, inheritance, and source order. The most specific rule wins.

Part 2: The Importance of CSS

Learning to write CSS correctly is non-negotiable for a web developer. Here's why:

  1. Separation of Concerns: This is the most important principle. Your HTML should only contain your content and its structure. Your CSS should only handle how that content looks.
  2. Maintainability: Imagine your website has 50 pages. If you decide to change the color of all your links, you only need to change one line in your single CSS file.
  3. Consistency: A central stylesheet ensures that all headings, buttons, and paragraphs look the same across your entire site.
  4. Responsive Design: CSS is the tool we use to make websites look great on all devices.
  5. Performance: When a browser downloads your .css file for the first page, it saves (caches) it, making your site load much faster on subsequent visits.

Part 3: How to Use CSS

There are three ways to add CSS to an HTML file, but only one is the professional standard.

  1. Inline CSS (Avoid): Applying styles directly on an HTML tag using the style attribute. This is bad practice. <p style="color: red; font-size: 12px;">This is bad.</p>
  2. Internal CSS (Sometimes Useful): Placing CSS rules inside a <style> tag in the HTML <head>. This is better, but the styles are still trapped in that single HTML file.
  3. External CSS (The Best Practice) ✅: Creating a separate file with a .css extension and linking to it from your HTML file's <head>. This is the clean, maintainable, and professional method.

This is how you do it:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Page</title>
  <!-- The <link> tag connects your stylesheet -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Your content here -->
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Part 4: How to Style with Basic CSS

Let's look at some of the most common CSS properties you'll use every day. A CSS rule has a selector (who you are styling) and a declaration block (how you are styling them).

First, let's look at a simple HTML structure. This code would go in your <body>.

<body>
  <h1>This heading will be blue and in Georgia font.</h1>

  <div class="container">
    <p>This paragraph is inside the container. It will have a dark gray text color and Arial font. The div around it will have a light gray background, a border, and rounded corners.</p>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

Now, here are the example CSS rules you would place in your style.css file to style the HTML above. Notice how the tag selectors (h1, p) and the class selector (.container) match the elements.

/* The `p` is the selector. The curly braces and everything inside are the declaration block. */
p {
  color: #333333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  line-height: 1.6;
}

h1 {
  color: #007bff;
  font-family: 'Georgia', serif;
}

.container {
  background-color: #f4f4f4;
  border: 1px solid #dddddd;
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
}
Enter fullscreen mode Exit fullscreen mode

Part 5: Getting to CSS Flexbox

This is where we go from styling individual elements to creating professional layouts. Flexbox is a CSS layout model designed to arrange items in a single dimension (either a row or a column).

Follow-Along Exercise: The Flexbox Playground

Create a new, temporary HTML file named flex-practice.html and a corresponding practice.css file.

Step 0: The Setup
Put this HTML in flex-practice.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Practice</title>
  <link rel="stylesheet" href="practice.css">
</head>
<body>
  <div class="container">
    <div class="box box-1">1</div>
    <div class="box box-2">2</div>
    <div class="box box-3">3</div>
  </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

And this starting CSS in practice.css:

body { font-family: sans-serif; }
.container {
  background-color: #f3f4f6;
  border: 2px solid #9ca3af;
  border-radius: 8px;
  padding: 16px;
  min-height: 400px;
}
.box {
  background-color: #3b82f6;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Open flex-practice.html in your browser. You'll see three blue boxes stacked on top of each other. Now for the magic.

Step 1: Activating Flexbox
Add display: flex; to the .container.

.container {
  /* ... existing styles ... */
  display: flex;
}
Enter fullscreen mode Exit fullscreen mode

Refresh your browser. The boxes are now side-by-side.

Step 2: Justifying Content (Horizontal Spacing)
Use justify-content on the .container to control alignment along the row.

.container {
  /* ... */
  display: flex;
  justify-content: center; /* Try this! And also: flex-start, flex-end, space-between, space-around */
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Aligning Items (Vertical Alignment)
Use align-items on the .container to control alignment on the cross axis.

.container {
  /* ... */
  display: flex;
  justify-content: center;
  align-items: center; /* Try this! And also: flex-start, flex-end */
}
Enter fullscreen mode Exit fullscreen mode

With justify-content: center; and align-items: center;, you have achieved perfect centering.

Step 4: Wrapping and Spacing
Add more boxes to your HTML until they don't fit. They will shrink. To fix this, we use flex-wrap and gap.

.container {
  /* ... */
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  gap: 16px;      /* Creates a 16px space between all items */
}
Enter fullscreen mode Exit fullscreen mode

You now have a responsive, wrapping, spaced-out grid. You can delete these practice files.

Final Task: Style Your "About Me" Page

It is time to apply everything you have learned.

✅ Detailed Requirements:

  1. File Setup & Global Styles:

    • [ ] In your project, create a css folder. Inside it, create a style.css file.
    • [ ] Link this style.css file correctly from the <head> of your about.html.
    • [ ] At the top of style.css, add this reset: * { box-sizing: border-box; }.
    • [ ] In a body rule, set a global font-family, color, a light background-color, and a line-height of at least 1.5.

  2. Layout and Containers:

    • [ ] Create a class named .container in your CSS. Give it a max-width of 960px and a margin of 30px auto. The auto on the left and right centers the container.
    • [ ] Apply this .container class to your <main> element in your HTML.
    • [ ] Give all <section> elements a padding of 20px.

  3. Typography and Basic Styling:

    • [ ] Style your h1 and h2 elements. Choose a different font-family for them and a bolder color.
    • [ ] Find your profile picture <img> and give it a class (e.g., .profile-picture). Use this class to style it. Give it a border-radius of 50% and a border of 5px solid white.
    • [ ] Style your links (<a>). Remove the default underline with text-decoration: none; and give them a distinct color. Add an a:hover rule to add the underline back.

  4. The Flexbox Card Layout (The Main Task):

    • [ ] Find the <ul> that contains your list of skills or hobbies. Give this <ul> a unique class, like .skills-grid.
    • [ ] In your CSS, target .skills-grid and turn it into a flex container:
      • Set display: flex;
      • Set flex-wrap: wrap;
      • Set gap: 20px;
      • Remove bullets and default padding with list-style-type: none; and padding: 0;.
    • [ ] Now, style the list items (<li>) inside the .skills-grid. These are your "cards".
      • Give them a background-color (e.g., #ffffff).
      • Add padding (e.g., 25px).
      • Add a box-shadow (e.g., box-shadow: 0 4px 8px rgba(0,0,0,0.1);).
      • Add a border-radius (e.g., 8px).
    • [ ] To make the cards responsive, add flex: 1 1 250px; to your card (li) selector. This shorthand tells items to grow and shrink from a base width of 250px, creating a responsive grid.

Commit your final about.html and your new css/style.css file to a new branch. This assignment combines all the core concepts of CSS into one practical, real-world project. Good luck!

Top comments (3)

Collapse
 
njamnsi_blaise_a894de5ef8 profile image
Njamnsi Blaise •

🤝🤌🏽

Collapse
 
isaiah_sassi_0f80fcd128fe profile image
Isaiah Sassi •

This lesson is amazing, simple and very helpful. Thank you sir

Collapse
 
bimin profile image
Dickmu bimin •

Thank you for these resources 🙏