CSS Tutorial For Beginners With Examples

12 Jan 2024

CSS stands for Cascading Style Sheets. Web developers use it to control the design and layout of a website. With CSS, you can change the colors, fonts, spacing, and more. It’s what makes a plain HTML turn into a beautifully styled website.

In this article, you’ll take the journey through the basics of CSS. You’ll get simple and practical CSS examples that are perfect for beginners. You’ll learn by doing, and by the end, you’ll be able to make your web pages look just the way you want them to.

Getting Ready to Start Using CSS

Now that you understand the importance of CSS, let’s get started with the practical side. First things first, you need the right tools and some basics to set up CSS for your web page.

Tools For Working With CSS

First things first, you need the right tools start writing CSS for your website. You need a:

1. Text Editor: You don’t need fancy software to write CSS. A simple text editor like Notepad (for Windows), TextEdit (for Mac), or Visual Studio Code (a popular choice) will do the job. However, I recommend using Sublime Text or Visual Studio Code. Open your text editor and create a new file for your CSS.

2. Web Browser: You’ll also need a web browser to see your web page. Common browsers like Google Chrome, Mozilla Firefox, or Safari will work. You’ll use the browser to preview your web page as you make changes in CSS.

Linking CSS to HTML

CSS works with HTML. To connect the two, you’ll need to link your CSS file to your HTML file. Here’s how:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <!-- Your HTML content goes here -->
  </body>
</html>

In this example, styles.css is the name of your CSS file. Make sure your HTML and CSS files are in the same folder(directory).

Basic CSS Syntax and Structure

CSS uses a simple syntax. It’s composed of selectors and declarations. Selectors target HTML elements, and declarations define how those elements should look. Here’s a basic CSS rule:

selector {
  property: value;
}

Selector: Specifies which HTML element to style. For example:
- h1 selector for HTML <h1></h1>
- .my-class selector for HTML <p class="my-class"></p>
- #my-id selector for HTML <div id="my-id"></div>
Property: Describes what aspect of the element you want to style (e.g., color, font-size, background-color).
Value: Determines how you want the property to be applied (e.g., red, 16px, #FFFFFF).

CSS Selectors

CSS selectors are the search queries of your website page. They tell CSS which elements to style. Here are the most common types:

1. Element Selector

p {
  /* Styles all <p> elements */
  color: orange;
}

The p element selector will find all HTML elements with the <p></p> tags and change their color to orange.

2. Class Selector

.my-class {
  /* Styles all elements with class="my-class" */
  color: pink;
}

The .my-class selector will find all HTML elements with class="my-class" tags and change their color to pink.

3. ID Selector

#my-id {
  /* Styles the element with id="my-id" */
}

CSS Properties

Now, let’s look at some fundamental CSS properties. These are like the commands that change the appearance of your selected elements:

1. `color`

p {
  color: blue;
}

Changes the text color to blue.

2. `font-size`

h1 {
  font-size: 24px;
}

Increases the font size of <h1> elements.

3. `background-color`

body {
  background-color: #f0f0f0;
}

Sets the background color of the whole page.

These are just a few examples, but there are many more properties you can explore.

Applying Styles

To apply styles, you link the selectors and properties in your CSS file. Here’s an example:

/* Selecting an element by class and changing its color */
.my-class {
  color: red;
}

In your HTML, you’d use this class like this:

<p class="my-class">This text is red.</p>

With these selectors and properties, you can start making your webpage visually appealing. In the next section, we’ll dive into practical CSS examples to see these concepts in action.

Practical CSS Examples for Beginners

Now, it’s time to roll up your sleeves and put what you’ve learned into practice. We’ll walk through some practical CSS examples that are perfect for beginners.

Example 1: Changing Text Styles

Selecting Elements by Class

To start, let’s select elements by class. This means that any HTML element with a specific class will have the same styling. First, let’s set up our HTML like this:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p class="my-class">This text is red and bold.</p>
    <p class="my-class">This text is also red and bold.</p>
  </body>
</html>

Now, in your CSS file (styles.css), you can create a class selector and apply styling to it:

.my-class {
  color: red;
  font-weight: bold;
}

The CSS code above selects all <p> elements with the class “my-class” and changes their text color to red and makes the text bold.

Modifying Text Color, Font, and Size

Now, let’s add more styling. In your CSS, you can modify the text color, font, and size like this:

.my-class {
  color: blue;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

With this code, you’re changing the text color to blue, setting the font to Arial (or a sans-serif font if Arial isn’t available), and adjusting the font size to 16 pixels.

Basic Text Formatting

Basic text formatting includes properties like text-align, line-height, and text-decoration. For instance, you can center-align the text in your class like this:

.my-class {
  text-align: center;
}

This will center-align the text within the elements with the “my-class” class.

Example 2: Customizing Backgrounds and Borders

Changing Background Colors

Let’s create a new HTML element with a background color. In your HTML file:

<div class="my-element">This is a box with a background color.</div>

Now, in your CSS, set the background color:

.my-element {
  background-color: #f0f0f0;
}

This code sets the background color of the <div> element to a light gray (#f0f0f0).

Adding Simple Borders

Borders can provide separation and structure to your elements. Create a new element in your HTML:

<div class="my-element">This is a box with a border.</div>

In your CSS, add a basic border:

.my-element {
  border: 1px solid #333;
}

This CSS code adds a 1-pixel solid border with a dark gray color.

Adjusting Border Properties

You can control border properties further by specifying the border width, style, and color:

.my-element {
  border-width: 2px;
  border-style: dashed;
  border-color: #555;
}

This sets a 2-pixel wide, dashed border with a dark gray color.

With these examples and the associated HTML, you’ve learned how to style text, adjust backgrounds, and add borders. In the next section, we’ll create a simple navigation menu to further practice these concepts.

A navigation menu is essential for any website. Let’s create a basic horizontal navigation menu using HTML and CSS.

Here’s how you can structure your HTML for a simple navigation menu:

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Now, in your CSS file, you can style the navigation links:

.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}

.navigation li {
  display: inline;
}

.navigation li a {
  text-decoration: none;
  padding: 10px 15px;
  color: #333;
}

.navigation li a:hover {
  background-color: #ddd;
}

In this CSS, we set the list style to none and remove any default padding and margin for the list. We also set the background color of the navigation to a light gray. Each list item is displayed inline to create a horizontal list. The a tag within each list item has its text decoration removed, and padding added for better spacing. On hover, the background color changes to a lighter gray to indicate interactivity.

To create a complete navigation bar, you can add some more styling to make it look like a bar. For example:

.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
  overflow: hidden;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: #333;
}

.navigation li a:hover {
  background-color: #ddd;
}

/* Optional - Adding a border to the bottom of the navigation bar */
.navigation {
  border-bottom: 1px solid #ccc;
}

With these HTML and CSS codes, you’ve created a simple, stylish navigation menu for your webpage. In the next section, we’ll explore the concept of responsive design to ensure your webpage looks good on various devices.

Example 4: Building a Responsive Layout

1. Introduction to Responsive Design

In the modern era of web development, it’s crucial to create websites that look good on all devices, from large desktop screens to small mobile phones. This approach is known as responsive design. By using CSS, you can adjust the layout and styling of your webpage to ensure it remains visually appealing and functional across various screen sizes.

2. Using Media Queries

Media queries are a fundamental aspect of responsive design. They allow you to apply different styles based on the characteristics of the device on which the webpage is being viewed. Here’s an example of how you can use media queries in your CSS:

/* For screens smaller than 600 pixels */
@media only screen and (max-width: 600px) {
  /* Adjust your styles here for smaller screens */
}

Within the media query, you can make specific adjustments to the layout, font sizes, and other elements to ensure optimal display on smaller screens.

3. Creating a Two-Column Layout with Flexbox

Flexbox is a powerful tool for creating responsive layouts. Here’s an example of a two-column layout for desktop screens that switches to a one-column layout on smaller screens using flexbox and media queries:

HTML Structure:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

CSS for Desktop (Two Columns):

.container {
  display: flex;
  justify-content: space-between;
}

.column {
  width: 48%; /* Adjust as needed */
}

In this CSS code, the container uses display: flex to create a two-column layout for desktop screens. The justify-content: space-between property ensures space between the two columns. The column class defines the width of each column.

CSS for Smaller Screens (One Column):

@media only screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }

  .column {
    width: 100%;
  }
}

In the media query, the flex-direction property is set to column, making the layout one column on screens smaller than 600 pixels. The columns take up the full width of the container.

By incorporating responsive design techniques like these, you can ensure your webpage adapts to different screen sizes, providing an optimal user experience on both desktop and mobile devices.

Troubleshooting Common CSS Issues

As a beginner, you might encounter some common CSS problems while working on your web projects. Don’t worry; these issues are normal and can be resolved with some troubleshooting. Here are a few common problems and tips on how to tackle them:

1. Selector and Class Mismatch

Problem: Your CSS class or selector doesn’t seem to be working.

Solution: Double-check your HTML and CSS to ensure that the class names or selectors match exactly. CSS is case-sensitive, so “myClass” and “myclass” are different.

2. Specificity Conflicts

Problem: Styles from multiple CSS rules clash, and you’re not getting the expected results.

Solution: Understand CSS specificity. If two rules target the same element, the more specific one wins. You can increase specificity by using more specific selectors or by marking styles as !important (though it’s better to use this sparingly).

3. Box Model Oddities

Problem: Elements have unexpected sizes or spacing issues.

Solution: Remember that every HTML element has a default margin and padding. Reset these with:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This sets the box-sizing model to “border-box,” ensuring that padding and borders are included in the element’s total width and height.

4. Text Overflow

Problem: Text overflows its container.

Solution: You can prevent text overflow by using the overflow property:

.container {
  overflow: hidden; /* or auto, scroll, etc. */
  white-space: nowrap; /* optional, prevents text from wrapping */
}

5. Cross-Browser Compatibility

Problem: Styles work in one browser but not in another.

Solution: Cross-browser compatibility can be challenging. Use CSS features supported by most browsers, and if you encounter issues, consider adding specific vendor prefixes (e.g., -webkit-, -moz-, -ms-) for properties like gradients and animations.

6. Debugging with Developer Tools

Problem: You can’t figure out what’s causing the issue.

Solution: Most modern browsers have built-in developer tools that allow you to inspect and debug your CSS. You can use these tools to identify which CSS rules are being applied and troubleshoot issues in real-time. Right-click on your webpage and select “Inspect” to access these tools.

7. Validate Your CSS

Problem: Your CSS isn’t working because of syntax errors.

Solution: Make sure your CSS code is well-formed and free of syntax errors. You can use online CSS validators to check your code for errors and correct them.

8. Lack of Updates

Problem: Changes you made in your CSS aren’t showing up.

Solution: Browsers cache CSS files, which can sometimes cause updates to not appear immediately. You can bypass this by doing a hard refresh (Ctrl + F5 or Shift + F5) or by clearing your browser’s cache.

9. Fallbacks for Older Browsers

Problem: Some older browsers may not support certain CSS features.

Solution: For critical styles, consider providing fallbacks for older browsers. You can do this by using conditional comments or feature detection libraries to ensure your site remains functional and visually appealing on older browsers.

These are some of the common issues beginners face with CSS. As you gain more experience, you’ll become better at diagnosing and solving problems. Don’t get discouraged if things don’t work perfectly the first time; troubleshooting is a valuable skill in web development.