CSS | SELECTORS AND PROPERTIES
|
|
ON THIS PAGE
SECTION 1 | WHAT ARE SELECTORS SECTION 2 | SIMPLE SELECTORS SECTION 3 | POPULAR METHODS TO TRY SECTION 4 | COMBINATORS AND GROUPING SECTION 5 | PSEUDO SELECTORS SECTION 6 | ATTRIBUTE SELECTORS |
ALSO IN THIS SECTION
GETTING STARTED SELECTORS AND SPECIFICITY STYLING PROPERTIES AND VALUES BOX AND LAYOUT RESPONSIVE DESIGN CSS QUICK REFERENCE |
|
|
TYPE |
DESCRIPTION |
EXAMPLE |
Color Changes |
Play with the color property to change text colors. Use the background-color property to modify the background of elements. |
p { color: blue; background-color: lightyellow; } |
Font Styling |
Use the font-family property to apply different fonts. Adjust font-size, font-weight, and font-style to see variations in text appearance. |
h1 { font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold; font-style: italic; } |
Borders |
Add borders using the border property. Experiment with border-radius to create rounded corners. |
.box { border: 2px solid red; border-radius: 10px; /* Rounded corners */ } |
Spacing and Layout |
Adjust the space inside elements with padding. Modify the space outside elements using margin. Play with the display property to understand block, inline, and inline-block layouts. |
.container { padding: 20px; /* Space inside */ margin: 10px auto; /* Space outside, centered horizontally */ display: block; } |
Hover Effects |
Use the :hover pseudo-class to create interactive effects when the mouse hovers over an element. |
button:hover { background-color: green; color: white; } |
Background Images |
Set background images using the background-image property. Experiment with background-size and background-position for positioning and scaling. |
.header { background-image: url('path/to/image.jpg'); background-size: cover; /* Cover the entire element */ background-position: center; } |
Text Effects |
Use text-shadow to add shadows to text. Play with text-transform to change text to uppercase, lowercase, or capitalize. |
.shadow-text { text-shadow: 2px 2px 4px gray; text-transform: uppercase; } |
Transitions |
Add smooth transitions to properties using the transition property, making changes appear gradually. |
.fade { opacity: 0.5; transition: opacity 0.5s ease-in-out; } .fade:hover { opacity: 1; } |
Box Shadows |
Apply shadows to elements using the box-shadow property. |
.shadow-box { box-shadow: 5px 5px 10px gray; } |
Gradients |
Create color gradients for backgrounds using the linear-gradient and radial-gradient functions. |
.gradient-bg { background: linear-gradient(to right, red, yellow); } |
Flexbox |
Even for beginners, trying out basic flexbox properties like display: flex, justify-content, and align-items can be enjoyable and offer a glimpse into modern layout techniques. |
.flex-container { display: flex; justify-content: space-between; /* Space out items */ align-items: center; /* Center items vertically */ } |
Transforms |
Rotate, scale, and move elements using the transform property. |
OOMBINATORS AND .rotate { transform: rotate(45deg); /* Rotate element 45 degrees */ } |
SUGGESTIONS
We would love to hear from you |
SUBSCRIBE
To enjoy more benefits |