CSS Styles tutorial

What is CSS?

CSS (Cascading Style Sheets) is a language used to style and layout web pages. It allows you to apply design elements like colors, fonts, spacing, and layout to HTML content.

How CSS Works

CSS is used alongside HTML to change the look and feel of a website. You can use it in three ways:

  1. Inline CSS – Inside the HTML elements using the style attribute.
  2. Internal CSS – In the <style> section inside the <head> of the HTML.
  3. External CSS – Using an external .css file that is linked to the HTML document.

Basic CSS Syntax

selector {
    property: value;
}
  • Selector: The HTML element you want to style (e.g., p, h1, div).
  • Property: The CSS attribute you want to change (e.g., color, font-size).
  • Value: The value for the property (e.g., blue, 16px).

1. Changing Text Colors and Fonts

CSS allows you to change the color, font, and size of your text.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 {
            color: blue;
            font-family: Arial, sans-serif;
            font-size: 30px;
        }
        p {
            color: gray;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to CSS!</h1>
    <p>This is a paragraph styled using CSS.</p>
</body>
</html>

Explanation:

  • The h1 selector changes the header’s color to blue and sets its font size to 30px.
  • The p selector changes the paragraph text color to gray and sets its font size to 16px.

2. Adding Background Colors

You can set background colors for different elements using the background-color property.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            background-color: lightyellow;
        }
        div {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div>This is a box with a background color.</div>
</body>
</html>

Explanation:

  • The body selector sets the entire background of the page to lightyellow.
  • The div selector creates a div element with a lightblue background and padding of 20px.

3. Box Model (Margins, Padding, Borders)

The CSS box model includes the element’s content, padding, border, and margin. These properties are crucial for layout design.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 300px;
            padding: 20px;
            border: 5px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>This div uses the CSS box model.</div>
</body>
</html>

Explanation:

  • padding creates space inside the element, between the content and the border.
  • border defines a solid black border around the element.
  • margin creates space outside the element, separating it from other elements.

4. Positioning and Layout

CSS provides different ways to position elements on the page, including static, relative, absolute, and fixed positioning.

Relative Positioning Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            position: relative;
            left: 50px;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">I am a box.</div>
</body>
</html>

Explanation:

  • The .box element is moved 50px from the left and 20px from the top of where it would normally appear.

Absolute Positioning Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: lightgray;
        }
        .box {
            position: absolute;
            top: 50px;
            right: 20px;
            width: 100px;
            height: 100px;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">I am a positioned box.</div>
    </div>
</body>
</html>

Explanation:

  • The .box element is positioned 50px from the top and 20px from the right of the .container.

5. Flexbox for Layout

Flexbox is a modern layout system that allows for flexible and responsive design.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

Explanation:

  • display: flex; creates a flex container.
  • justify-content: space-between; evenly spaces out the boxes, with equal space between them.

6. Hover Effects

CSS allows you to add hover effects to elements using the :hover pseudo-class.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        button {
            background-color: lightgreen;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
        }
        button:hover {
            background-color: darkgreen;
            color: white;
        }
    </style>
</head>
<body>
    <button>Hover over me!</button>
</body>
</html>

Explanation:

  • The button changes its background color to darkgreen and text color to white when hovered over.

Conclusion

This tutorial introduced you to the basics of CSS, covering text styling, backgrounds, the box model, positioning, layout with Flexbox, and hover effects. With these foundations, you can start styling your own web pages!

Further Learning

Scroll to Top