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:
- “CSS Color Property”
- “CSS Box Model”
- “CSS Lists and Counters”
- “CSS Tables”
Videos:
CSS Color Tutorial on YouTube
CSS Box Model Explained on YouTube
CSS Lists and Navigation Bars 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.
