Web Development (Session 06)

Shape Image One

COLORS, SPACING,
BORDERS, LIST
& TABLES

Introduction

In this section, we will explore various CSS properties that help in enhancing the visual presentation of your web pages. This includes colors, spacing, borders, lists, and tables.

Colors

CSS allows you to set colors for text, backgrounds, borders, and other elements.

1. Text Color:

p {

    color: blue;

}

2. Background Color:

body {

    background-color: lightgrey;

}

3. Border Color:

div {

    border: 2px solid red;

}

4. Color Notations:
  • Hexadecimal: #ff0000 for red.
  • RGB: rgb(255, 0, 0) for red.
  • RGBA: rgba(255, 0, 0, 0.5) for red with 50% opacity.
  • HSL: hsl(0, 100%, 50%) for red.

div {

    background-color: #ff0000; /* Hex */

    background-color: rgb(255, 0, 0); /* RGB */

    background-color: rgba(255, 0, 0, 0.5); /* RGBA */

    background-color: hsl(0, 100%, 50%); /* HSL */

}

Spacing

Spacing in CSS is controlled using margin, padding, and line-height properties.

1. Margin:

Creates space outside of an element.

div {

    margin: 20px;

}

2. Padding:

Selects elements with a specific class attribute.

.intro {

    font-size: 20px;

}

3. Line Height:

Controls the spacing between lines of text.

p {

    line-height: 1.5;

}

4. Margin and Padding Shorthand:

You can set all four sides at once using shorthand properties.

div {

    margin: 10px 20px 30px 40px; /* top right bottom left */

    padding: 10px 20px; /* top/bottom right/left */

}

Borders

Borders can be added to any HTML element to enhance its appearance.

1. Basic Border:

div {

    border: 1px solid black;

}

2. Border Width, Style, and Color:

div {

    border-width: 2px;

    border-style: dashed;

    border-color: blue;

}

3. Border Radius:

Creates rounded corners.

div {

    border: 2px solid black;

    border-radius: 10px;

}

4. Box Shadow:

Adds shadow effects to elements.

div {

    box-shadow: 5px 5px 10px grey;

}

Lists

CSS provides various properties to style ordered and unordered lists.

1. Unordered List (Bullets):

ul {

    list-style-type: circle;

}

2. Ordered List (Numbers):

ol {

    list-style-type: upper-roman;

}

3. Custom List Styles:

ul.custom-list {

    list-style-image: url(‘bullet.png’);

}

4. Nested Lists:

<ul>

    <li>Item 1</li>

    <li>Item 2

        <ul>

            <li>Subitem 1</li>

            <li>Subitem 2</li>

        </ul>

    </li>

    <li>Item 3</li>

</ul>

Tables

Tables are used to display data in a tabular format.

1. Basic Table Structure:

<table>

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>Data 1</td>

        <td>Data 2</td>

    </tr>

</table>

2. Table Borders:

table, th, td {

    border: 1px solid black;

    border-collapse: collapse;

}

4. Table Styling:

table {

    width: 100%;

    border-collapse: collapse;

}

th {

    background-color: #f2f2f2;

}

tr:nth-child(even) {

    background-color: #f9f9f9;

}

Additional Resources

Articles:
Videos:

CSS Color Tutorial on YouTube

CSS Tables on YouTube 

Conclusion

Understanding how to use colors, spacing, borders, lists, and tables in CSS is essential for creating visually appealing and organized web pages. Practice using these properties to enhance your web design skills.

Optimized by Optimole
WhatsApp whatsapp
Messenger messenger
Instagram instagram
Call Us phone
chat