Change the text color of a paragraph to blue.
p { : blue; }
The property name is same as what it does
Center a block element horizontally.
div { margin: 0 ; width: 50%; }
Automatically calculates left/right margins
Enable flexbox layout on a container.
div { : flex; }
Changes how element is rendered in layout
Define an animation sequence.
@ bounce {\n 0% { transform: translateY(0); }\n}
Used to create CSS animations
Define a grid with 3 equal columns.
div { display: grid; : repeat(3, 1fr); }
Specifies the columns of the grid
Use a CSS variable for background color.
div { background-color: (---main-bg); }
Function to insert value of custom property
Add a smooth transition for hover effects.
button { : all 0.3s ease; }
Allows you to change property values smoothly
Apply styles only for screens smaller than 600px.
@ (max-width: 600px) {\n body { font-size: 14px; }\n}
Used to apply CSS for different media types/devices
Change button background on hover.
button: { background: red; }
Pseudo-class for when mouse is over element
Add a drop shadow to a card.
div { : 0 4px 8px rgba(0,0,0,0.1); }
Attaches one or more shadows to an element
Certificate Locked
You must complete the exercises with a score of 70% or higher to unlock your certificate.
ProTechSolution
Certificate of Completion
Proudly Presented To
Student Name
For successfully completing all exercises and challenges with an outstanding score in the CSS course.
Verify ID: LH-XXXX-XXXXXX