CSS Color, Background, and Cursor
In this tutorial, we will explore CSS properties for setting the color, background, and cursor styles of HTML elements.
CSS Color Property
The color property specifies the color of the text. You can use color names, HEX values, RGB values, RGBA values, HSL values, and HSLA values.
Example: Setting Text Color
/* Color names */
h1 {
color: blue;
}
/* HEX value */
h2 {
color: #ff6347; /* tomato */
}
/* RGB value */
p {
color: rgb(255, 99, 71); /* tomato */
}
/* RGBA value */
span {
color: rgba(255, 99, 71, 0.5); /* tomato with 50% opacity */
}
/* HSL value */
div {
color: hsl(9, 100%, 64%); /* tomato */
}
/* HSLA value */
a {
color: hsla(9, 100%, 64%, 0.5); /* tomato with 50% opacity */
}CSS Background Property
The background property is a shorthand property for setting the background styles of an element, including color, image, position, size, repeat, origin, clip, and attachment.
Example: Setting Background Styles
/* Background color */
body {
background-color: #f0f8ff; /* AliceBlue */
}
/* Background image */
div {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
/* Background shorthand */
header {
background: url('header.jpg') no-repeat center center / cover, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}CSS Cursor Property
The cursor property specifies the type of cursor to be displayed when pointing over an element. Common values include default, pointer, move, text, and more.
Example: Setting Cursor Styles
/* Default cursor */
p {
cursor: default;
}
/* Pointer cursor (hand) */
a {
cursor: pointer;
}
/* Move cursor (cross with arrows) */
div {
cursor: move;
}
/* Text cursor (I-beam) */
input[type="text"] {
cursor: text;
}
/* Custom cursor */
button {
cursor: url('cursor.png'), auto;
}Example: Applying Color, Background, and Cursor Styles
Let's apply what we've learned to style a simple web page.
Example: Complete CSS Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff; /* AliceBlue */
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #555;
}
.highlight {
background-color: yellow;
}
a:hover {
color: red;
}
p::first-line {
font-weight: bold;
}
.custom-cursor {
cursor: url('cursor.png'), auto;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p class="highlight">This is an example of a paragraph with highlighted text.</p>
<p>Hover over this <a href="#">link</a> to see the effect.</p>
<p class="custom-cursor">Hover over this paragraph to see the custom cursor.</p>
</body>
</html>