CSS is the magic behind the visual appeal of websites. To help you navigate the intricacies of styling, we’ve crafted a comprehensive CSS cheat sheet. From basic properties to pseudo-classes and units, this guide covers essential aspects of CSS that will empower you to create stunning and responsive designs. Sure, here is a basic CSS cheat sheet with some common CSS properties and their syntax:
Basic Properties:
Discover the core CSS properties that dictate layout, colors, fonts, and spacing. Learn how to control backgrounds, borders, margins, and paddings to craft the foundation of your designs.
- font-family: sets the font of an element
- font-size: sets the size of the font
- color: sets the color of the text
- background-color: sets the background color of an element
- border: sets the border of an element
- margin: sets the margin of an element
- padding: sets the padding of an element
- text-align: sets the alignment of text within an element
- display: sets how an element should be displayed
- width: sets the width of an element
- height: sets the height of an element
- float: sets the horizontal alignment of an element
Pseudo-classes and Pseudo-elements
Delve into the world of pseudo-classes and pseudo-elements, which offer precise control over specific elements and states. From :hover to ::before, these tools enhance interactivity and visual effects.
- :hover: applies styles to an element when the mouse hovers over it
- :active: applies styles to an element when it is clicked
- :visited: applies styles to a visited link
- :nth-child(n): selects the nth child element of its parent
- ::before: creates a pseudo-element before the content of an element
- ::after: creates a pseudo-element after the content of an element
CSS Units
Explore the variety of CSS units available for sizing elements. From pixels to percentages and ems to rems, each unit has its purpose in creating responsive and adaptable designs.
- px: pixels
- %: percentage
- em: relative to the font size of the element
- rem: relative to the font size of the root element
- vw: 1% of the viewport width
- vh: 1% of the viewport height
Example Usage
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333333;
background-color: #ffffff;
}
h1 {
font-size: 24px;
margin-top: 20px;
}
p {
font-size: 18px;
line-height: 1.5em;
padding: 10px;
border: 1px solid #cccccc;
}
a {
color: #0066cc;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}