Jaytech

The Basics of Learning CSS: A Comprehensive Guide

Photo by Pankaj Patel on Unsplash

The Basics of Learning CSS: A Comprehensive Guide

Jessica Obot's photo
Jessica Obot
·

6 min read

Introduction

Back in 1996, CSS made its debut in the world of web development and quickly became a must-have tool for crafting cool and good-looking websites. Before CSS strutted onto the scene, web creators had a tough time getting their HTML elements to look the way they wanted. The styling had to be linked right into the HTML, which made it a real pain to keep things consistent and tweak the website's design.

But then came CSS, the hero of web design! It let developers break free from this messy mix by splitting the content (HTML) from its snazzy outfit (CSS). This nifty separation of content and style made web development way more flexible and efficient.

In CSS, you cook up a bunch of rules that spell out how HTML elements should show up on your web page. These rules have two parts: a selector that points to the HTML elements you want to jazz up, and a bunch of property-value pairs that decide how those elements should strut their stuff.

Pre-requisites

Before going further into this article, you must have a grounded foundation in HTML at least, a learning device, and a good internet connection, and you already know to set up your text editor (Visual Studio Code) but don't know how to, then you can read all about it here. Click here

Without wasting much time, let's jump right into this article.

Definition

CSS, short for "Cascading Style Sheets," is like the fashion designer of web development. It's the tool that teams up with HTML to make sure your web pages look stunning when people see them in their browsers.

Getting into CSS is a smart move if you're diving into web development. It hands you the power to arrange and dress up your HTML documents. Here's a beginner-friendly roadmap to kick off your CSS learning journey:

  1. Create an HTML Document: Open a text editor and save the code below as "index.html":
<!DOCTYPE html>
<html>
<head>
  <title>My CSS Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello, CSS!</h1>
  <p>This is my CSS-styled paragraph.</p>
</body>
</html>
  1. Create a CSS File: Save the code below as "styles.css" in the same directory as your "index.html" file:
/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f0f0f0;
}

h1 {
  color: #0066cc;
}

p {
  font-size: 16px;
  color: #333333;
}
  1. Link CSS to HTML: The <link> tag in the HTML file's head section links the CSS file to the HTML document, allowing the styles to be applied.

Understanding The CSS Code Above:

  • body: It selects the entire body/code of the HTML document and applies the styles inside the curly braces.

  • font-family: It sets the font to be used for the body text. The default font is "Arial" and if it's not available, it will use any available sans-serif font.

  • margin: This creates space around the content inside the body.

  • background-color: It sets the color in the background of the body to a light gray (#f0f0f0).

  • h1: This selects only the <h1> element and applies the styles inside the curly braces.

  • color: This sets only the text color of the <h1> element to a blue shade (#0066cc).

  • p: This selects only the <p> element and applies the styles inside the curly braces.

  • font-size: This sets only the font size for the <p> element to 16 pixels.

  • color: This sets the text color of the <p> element to a dark gray (#333333).

  1. Save and Open the HTML File: After inputting any coding line or making any changes, save both the "index.html" and "styles.css" files then open "index.html" in your web browser to see the styled page.

  2. Experiment with Styles: Now that you have a basic understanding of CSS, you can play around with the code sample above. Give it your preferred font, colors, margin, padding, or add borders to elements.

  3. Selectors: You can play around with different CSS selectors like class and ID selectors and you can also apply styles to specific elements using classes and IDs.

<!DOCTYPE html>
<html>
<head>
  <title>My CSS Selectors</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1 class="special-heading">Special Heading</h1>
  <p>This is a paragraph.</p>
  <p id="important-paragraph">This is an important paragraph.</p>
</body>
</html>

/* styles.css */
.special-heading {
  color: red;
}

#important-paragraph {
  font-weight: bold;
}
  1. Box Model: In the box model, you can add margins, padding, and borders to elements but at the same time, you have to understand how these properties affect the space around and inside elements.
<!DOCTYPE html>
<html>
<head>
  <title>Box Model Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="box-example">
    <p>This is a box model example.</p>
  </div>
</body>
</html>

/* styles.css */
.box-example {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid #333;
  background-color: #f0f0f0;
}

  1. Positioning and Layout: Practice different positioning and layout techniques like relative, absolute, and float and try to understand how these properties affect the positioning of elements on the page.

  2. Responsive Design: In making the website accessible in smaller screen sizes, get familiar with media queries and create a responsive layout that adjusts based on the device's screen size.

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Design Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Hello, CSS!</h1>
    <p>This is a responsive design example.</p>
  </div>
</body>
</html>

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

@media (max-width: 600px) {
  .container {
    font-size: 14px;
  }
}
  1. CSS Transitions and Animations: To make the website a bit fun, you can add simple animations and transitions to elements to create engaging user experiences.
<!DOCTYPE html>
<html>
<head>
  <title>CSS Animation Example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <button class="animate-button">Click Me</button>
</body>
</html>

/* styles.css */
.animate-button {
  background-color: #0066cc;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.animate-button:hover {
  background-color: #0099ff;
  transition: background-color 0.3s ease;
}

  1. CSS Best Practices: It is always important to review and adopt best practices to write clean, maintainable, and efficient CSS code. Keep your CSS organized by avoiding too many nested selectors and using only meaningful class and ID names.

  2. CSS Frameworks: You should have insight or knowledge about popular CSS frameworks like Bootstrap or Bulma to build responsive and visually appealing websites more efficiently.

  3. Practice and Build Projects: Building projects, no matter how it is or recreating existing website designs are good ways to practice your CSS skills.

  4. Resources and Further Learning: Watching online or physical tutorials, documentations, and also joining community forums in respect to CSS can aid in further learning and also keep you updated with the latest CSS features and best practices.

Always remember that learning CSS is a continuous process. The more you practice and experiment, the better you'll become at styling web pages. Have fun exploring the world of CSS and creating visually stunning web designs!

#HappyCoding!

CSSFrontend DevelopmentTechnical writing