CSS
1. Color & Background
- color
- Usage: Sets the text color.
- Example:
color: #ff5733;
(Sets the text color to a reddish hue)
- background-color
- Usage: Sets the background color of an element.
- Example:
background-color: rgba(255, 255, 255, 0.8);
(Sets a semi-transparent white background)
- background-image
- Usage: Sets an image as the background.
- Example:
background-image: url('image.jpg');
(Adds an image as background)
- background-size
- Usage: Defines the size of the background image.
- Example:
background-size: cover;
(Scales the image to cover the element fully)
- background-repeat
- Usage: Controls how the background image repeats.
- Example:
background-repeat: no-repeat;
(Prevents the image from repeating)
2. Text Properties
- font-family
- Usage: Specifies the font type.
- Example:
font-family: 'Arial', sans-serif;
(Sets Arial as the font with a fallback to sans-serif)
- font-size
- Usage: Sets the size of the font.
- Example:
font-size: 16px;
(Sets font size to 16 pixels)
- font-weight
- Usage: Specifies the thickness of the font.
- Example:
font-weight: bold;
(Makes the text bold)
- line-height
- Usage: Controls the space between lines.
- Example:
line-height: 1.5;
(Sets the line height to 1.5 times the font size)
- text-align
- Usage: Aligns the text within its container.
- Example:
text-align: center;
(Centers the text horizontally)
- text-decoration
- Usage: Adds decorations like underline or strikethrough.
- Example:
text-decoration: underline;
(Underlines the text)
- text-transform
- Usage: Controls the capitalization of text.
- Example:
text-transform: uppercase;
(Transforms all text to uppercase)
3. Box Model
- width & height
- Usage: Sets the dimensions of an element.
- Example:
width: 300px; height: 200px;
(Sets the element to 300px wide and 200px tall)
- padding
- Usage: Controls the inner space between content and the border.
- Example:
padding: 10px;
(Adds 10 pixels of padding on all sides)
- margin
- Usage: Sets the outer space around an element.
- Example:
margin: 20px auto;
(Adds 20 pixels margin vertically and auto margin horizontally for centering)
- border
- Usage: Defines the border around an element.
- Example:
border: 2px solid #000;
(Creates a 2-pixel solid black border)
- box-shadow
- Usage: Adds shadow effects around an element.
- Example:
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
(Creates a subtle shadow effect)
4. Positioning
- position
- Usage: Defines how an element is positioned.
- Example:
position: relative;
(Positions the element relative to its normal position)
- top, right, bottom, left
- Usage: Sets the offsets for positioned elements.
- Example:
top: 10px; left: 20px;
(Moves the element down 10px and right 20px)
- z-index
- Usage: Controls the stack order of overlapping elements.
- Example:
z-index: 10;
(Sets the stacking order, with higher values on top)
5. Display & Visibility
- display
- Usage: Specifies how an element is displayed.
- Example:
display: flex;
(Enables flexbox layout for the element)
- visibility
- Usage: Controls whether an element is visible or hidden.
- Example:
visibility: hidden;
(Hides the element but maintains its space)
- overflow
- Usage: Controls the overflow of content within an element.
- Example:
overflow: auto;
(Adds scrollbars if the content overflows)
6. Flexbox
- display: flex
- Usage: Activates flexbox layout.
- Example:
- justify-content
- Usage: Aligns flex items along the main axis.
- Example:
justify-content: space-between;
(Distributes space between items)
- align-items
- Usage: Aligns flex items along the cross axis.
- Example:
align-items: center;
(Centers items vertically)
7. Grid Layout
- display: grid
- Usage: Activates grid layout.
- Example:
- grid-template-rows
- Usage: Defines the number and size of rows.
- Example:
grid-template-rows: auto 100px;
(First row auto height, second row 100px)
- grid-gap
- Usage: Sets the spacing between grid items.
- Example:
grid-gap: 10px;
(Adds 10 pixels of space between items)
8. Transitions & Animations
- transition
- Usage: Specifies the transition effect for properties when they change.
- Example:
- animation
- Usage: Defines an animation effect.
- Example:
9. Miscellaneous
- opacity
- Usage: Sets the transparency level of an element.
- Example:
opacity: 0.5;
(Makes the element semi-transparent)
- cursor
- Usage: Specifies the type of cursor to be displayed.
- Example:
cursor: pointer;
(Displays a pointer cursor on hover)
- filter
- Usage: Applies visual effects (e.g., blur, brightness).
- Example:
filter: grayscale(100%);
(Makes the image grayscale)
Practical Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sample Web Page</title>
<link rel=”stylesheet” href=”styles.css”> <!– Link to the CSS file –>
<style>
/* CSS Styles from the practical example */
body {
background-color: #eaeaea; /* Light grey background */
font-family: ‘Arial’, sans-serif; /* Font family */
}
.header {
background-color: #4CAF50; /* Green header */
color: white; /* White text */
text-align: center; /* Centered text */
padding: 15px; /* Inner spacing */
margin-bottom: 20px; /* Space below the header */
}
.container {
display: flex; /* Use flexbox layout */
justify-content: space-between; /* Space between items */
padding: 20px; /* Inner spacing */
margin: 0 auto; /* Center container */
width: 80%; /* Width of container */
background-color: white; /* White background */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
}
.item {
flex: 1; /* Equal size for flex items */
padding: 10px; /* Inner spacing */
margin: 10px; /* Outer spacing */
background-color: #f1f1f1; /* Light grey box */
border: 2px solid #ccc; /* Border around items */
transition: background-color 0.3s; /* Transition on background color */
}
.item:hover {
background-color: #ddd; /* Change color on hover */
}
.footer {
text-align: center; /* Centered footer text */
padding: 10px; /* Inner spacing */
background-color: #333; /* Dark background */
color: white; /* White text */
}
</style>
</head>
<body>
<div class=”header”>
<h1>Welcome to My Sample Web Page</h1>
</div>
<div class=”container”>
<div class=”item”>
<h2>Item 1</h2>
<p>This is the first item in the flexbox container.</p>
</div>
<div class=”item”>
<h2>Item 2</h2>
<p>This is the second item in the flexbox container.</p>
</div>
<div class=”item”>
<h2>Item 3</h2>
<p>This is the third item in the flexbox container.</p>
</div>
</div>
<div class=”footer”>
<p>© 2024 My Sample Web Page</p>
</div>
</body>
</html>