Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Basic

CSS How To

Posted in CSS Tutorial
Updated on Sep 27, 2024
By Mari Selvan
👁️ 18 - Views
⏳ 4 mins
💬 1 Comment
CSS How To

Photo Credit to CodeToFun

Introduction

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in HTML or XML.

It defines how HTML elements should be displayed on the screen, paper, or in other media. This page will cover the fundamental ways of using CSS to style your web pages effectively.

How to Add CSS to HTML

There are three primary ways to include CSS in your HTML documents:

  1. Inline CSS:

    Adding styles directly to the HTML element using the style attribute.

    HTML
    Copied
    Copy To Clipboard
    <p style="color: blue;">This is a blue paragraph.</p>
  2. Internal CSS:

    Writing CSS within the <style> tag inside the <head> section of your HTML document.

    HTML
    Copied
    Copy To Clipboard
    <head>
      <style>
        p {
          color: red;
        }
      </style>
    </head>
  3. External CSS:

    Linking an external CSS file to your HTML document using the <link> tag.

    HTML
    Copied
    Copy To Clipboard
    <head>
      <link rel="stylesheet" href="styles.css">
    </head>

How to Style Text

Text styling is one of the most common uses of CSS. You can control the color, size, font, alignment, and decoration of text.

CSS
Copied
Copy To Clipboard
p {
  color: #333;
  font-size: 16px;
  font-family: Arial, sans-serif;
  text-align: center;
}
  • Font Properties: font-family, font-size, font-weight, etc.
  • Text Properties: color, text-align, text-decoration, etc.

How to Style Backgrounds

CSS provides powerful properties to style the background of elements, allowing you to use colors, gradients, images, and more.

CSS
Copied
Copy To Clipboard
body {
  background-color: #f0f0f0;
}

div {
  background-image: url('background.jpg');
  background-size: cover;
}
  • Background Properties: background-color, background-image, background-size, background-position.

How to Style Borders

You can use CSS to define borders around HTML elements, specifying their width, color, and style.

CSS
Copied
Copy To Clipboard
div {
  border: 2px solid #000;
  border-radius: 5px;
}
  • Border Properties: border-width, border-color, border-style, border-radius.

How to Create Layouts

CSS layouts can be created using techniques like Flexbox and Grid, enabling you to build responsive and flexible page structures.

  1. Flexbox:

    A one-dimensional layout method for arranging items in rows or columns.

    CSS
    Copied
    Copy To Clipboard
    .container {
      display: flex;
      justify-content: space-around;
    }
  2. Grid:

    A two-dimensional layout method to control the layout of elements in both rows and columns.

    CSS
    Copied
    Copy To Clipboard
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

How to Add Animations

CSS animations add interactivity and liveliness to web pages. You can create simple transitions or complex keyframe animations.

CSS
Copied
Copy To Clipboard
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div {
  animation: fadeIn 2s ease-in-out;
}
  • Animation Properties: animation-name, animation-duration, animation-timing-function.

Best Practices

  • Use External Stylesheets: Keep your CSS separate from HTML for better maintainability.
  • Minimize Inline Styles: Avoid inline styles to make the code cleaner and easier to manage.
  • Responsive Design: Use media queries to ensure your styles work across different screen sizes.

Common Pitfalls

  • Specificity Issues: Overuse of !important can lead to conflicting styles and hard-to-debug CSS.
  • Neglecting Browser Compatibility: Ensure your CSS works consistently across all major browsers by checking support for certain properties.
  • Using Too Many Units: Mixing units like px, em, and % within the same styles can cause unexpected results.

Example

Here’s a simple example demonstrating different ways to use CSS to style a web page:

HTML
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS How To Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
    }

    h1 {
      color: #333;
      text-align: center;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px auto;
      border-radius: 10px;
      transition: background-color 0.5s;
    }

    .box:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <h1>CSS How To Example</h1>
  <div class="box"></div>
</body>
</html>

Conclusion

CSS provides numerous ways to style and enhance the appearance of your web pages. By understanding how to use the basic CSS techniques covered in this guide, you can create visually appealing and responsive websites. Whether you’re styling text, backgrounds, or layouts, CSS gives you the tools to transform your HTML into engaging and interactive web experiences.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy