CSS is an essential language for web development, but it can also be a bit tricky to remember all of the different rules and syntax. To help, we’ve compiled a CSS Cheat Sheet as a quick reference for all of the most commonly used elements and syntax.
Selectors
- Element Selector: Selects an element based on its name (e.g. <p>)
- ID Selector: Selects an element based on its ID (e.g. #myID)
- Class Selector: Selects elements based on their class name (e.g. .myClass)
- Universal Selector: Selects all elements (e.g. *)
- Attribute Selector: Selects elements based on their attributes (e.g. [type=”text”])
- Pseudo-Class Selector: Selects elements based on their state (e.g. :hover)
Colors and Backgrounds
- Hexadecimal Color Values: Used to define colors (e.g. #FF0000)
- RGB Color Values: Used to define colors (e.g. rgb(255, 0, 0))
- Opacity: Used to define the transparency of an element (e.g. opacity: 0.5)
- Background-color: Used to set the background color of an element (e.g. background-color: #FF0000)
- Background-image: Used to add an image to an element’s background (e.g. background-image: url(myImage.jpg))
Text and Fonts
- Font-family: Used to set the font family of an element (e.g. font-family: Arial)
- Font-size: Used to set the font size of an element (e.g. font-size: 16px)
- Font-style: Used to set the font style of an element (e.g. font-style: italic)
- Font-weight: Used to set the font weight of an element (e.g. font-weight: bold)
- Line-height: Used to set the line height of an element (e.g. line-height: 1.2)
- Text-align: Used to set the alignment of text within an element (e.g. text-align: center)
- Text-decoration: Used to add decorations to text (e.g. text-decoration: underline)
Box Model
- Width: Used to set the width of an element (e.g. width: 300px)
- Height: Used to set the height of an element (e.g. height: 200px)
- Margin: Used to set the margin around an element (e.g. margin: 10px)
- Padding: Used to set the padding around an element (e.g. padding: 10px)
- Border: Used to set a border around an element (e.g. border: 1px solid #000)
Positioning
- Float: Used to float elements to the left or right (e.g. float: left)
- Position: Used to set the position of an element (e.g. position: absolute)
- Top/Right/Bottom/Left: Used to set the position of an element relative to its container (e.g. top: 10px)
We hope this CSS Cheat Sheet helps make web development a little bit easier for you. Happy coding!
👉 Follow us on Twitter!
Happy Hacking!
