CSS Cheat Sheet and Quick Reference
Written by Coursera • Updated on
Quickly reference essential CSS properties, selectors, and rules with this comprehensive CSS Cheat Sheet. Improve your web design skills with clear examples and descriptions
Cascading Style Sheets (CSS) is a cornerstone technology of the internet, alongside HTML and JavaScript, used to design and style web pages. CSS helps separate content from presentation, allowing you to control your website's layout, colors, fonts, and overall appearance with precision. This cheat sheet quickly references important CSS properties, selectors, and rules, ensuring you can easily find the information you need as you create and refine your web designs.
Syntax and Selectors
| Action | Description | Example Snippet |
|---|---|---|
| Class selectors | Select elements with a specific class attribute | .example { color: red; } |
| ID selectors | Select an element with a specific ID attribute | #example { color: blue; } |
| Group of CSS selectors | Apply the same styles to multiple selectors | h1, h2, p { margin: 0; } |
| Selector chaining | Combine selectors to target elements with multiple criteria | p.example { color: green; } |
| CSS type selectors | Select all elements of a given type | p { font-size: 16px; } |
| CSS Class selectors | Select all elements with a specific class attribute | .btn { background-color: blue; } |
| HTML attributes with multiple values | Select elements with specific attribute values | input[type="text"] { border: 1px solid black; } |
| Selector specificity | Determine which selectors take precedence based on hierarchy | #example { color: black; } .example { color: white; } |
| CSS descendant selector | Select elements that are descendants of another element | div p { color: purple; } |
| Link element | Link CSS stylesheets to HTML files | <link rel="stylesheet" href="styles.css"> |
| Write CSS in separate files | Write CSS in separate files to maintain clean HTML | styles.css — <link rel="stylesheet" href="styles.css"> |
| Write CSS in HTML file | Embed CSS directly within HTML using the <style> tag | <style> p { color: red; } </style> |
| Inline styles | Apply styles directly within HTML elements using the style attribute | <p style="color: red;">Hello</p> |
| Separating HTML code from CSS code | Maintain a clean separation by linking external CSS files to HTML | <link rel="stylesheet" href="styles.css"> |
Visual Rules
| Action | Description | Example Snippet |
|---|---|---|
| CSS declarations | Define styles using property-value pairs | p { color: red; font-size: 14px; } |
| Font size | Set the size of the font | p { font-size: 16px; } |
| Background size | Define how background images are scaled and positioned | body { background-size: cover; } |
| !important rule | Apply higher specificity to a property value, overriding other declarations | p { color: red !important; } |
| Opacity | Set the transparency level of an element | div { opacity: 0.5; } |
| Font weight | Define the thickness of text | p { font-weight: bold; } |
| Text align | Set the horizontal alignment of text | p { text-align: center; } |
| CSS rule set | Group declarations that apply to a set of selectors | h1, p { margin: 0; color: black; } |
| Setting foreground text color in CSS | Define the color of the text | p { color: blue; } |
| Resource URLs | Specify external resources like images and fonts | background-image: url('image.png'); |
| Background image | Set an image as the background of an element | body { background-image: url('background.jpg'); } |
| Font family | Define the font or list of fonts for text content | p { font-family: Arial, sans-serif; } |
| Color name keywords | Use color names for setting text or background colors | p { color: red; } |
Display and Positioning
| Action | Description | Example Snippet |
|---|---|---|
| Z-index property | Specify the stack order of elements | div { z-index: 2; } |
| Fixed CSS positioning | Position elements relative to the browser window | div { position: fixed; top: 0; } |
| CSS display property | Define how an element is displayed | div { display: block; } |
| CSS position: absolute | Position elements relative to their nearest positioned ancestor | div { position: absolute; top: 50px; } |
| CSS position: relative | Position elements relative to their normal position | div { position: relative; left: 20px; } |
| CSS float property | Float elements to the left or right within a container | img { float: left; } |
| The CSS clear property | Prevent elements from wrapping around floated elements | div { clear: both; } |
Colors
| Action | Description | Example Snippet |
|---|---|---|
| CSS color alpha values | Define colors with transparency using RGBA | p { color: rgba(255, 0, 0, 0.5); } |
| CSS hexadecimal colors | Use hexadecimal values for precise color definitions | p { color: #ff0000; } |
| CSS HSL colors | Define colors using Hue, Saturation, Lightness values | p { color: hsl(0, 100%, 50%); } |
| CSS rgb colors | Define colors using RGB values | p { color: rgb(255, 0, 0); } |
| Color name keywords | Use predefined color names | p { color: red; } |
Typography
| Action | Description | Example Snippet |
|---|---|---|
| CSS linking fonts | Link to external font libraries like Google Fonts | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
| CSS font weight property | Set the thickness of fonts | p { font-weight: 700; } |
| CSS line-height property | Set the spacing between lines of text | p { line-height: 1.5; } |
| CSS fallback fonts | Specify backup fonts in case the preferred font is unavailable | p { font-family: 'Roboto', sans-serif; } |
| CSS @font-face rule | Define custom fonts to be loaded with your web pages | @font-face { font-family: 'MyFont'; src: url('myfont.woff2'); } |
| CSS font-style property | Set the style of the text (e.g., normal, italic, oblique) | p { font-style: italic; } |
Box Properties
| Action | Description | Example Snippet |
|---|---|---|
| Box-sizing | Define how the total width and height of an element is calculated | div { box-sizing: content-box; } |
| Box-sizing: border-box | Include padding and border in the element’s total width and height | div { box-sizing: border-box; } |
| Padding | Define space inside the element between its content and border | div { padding: 20px; } |
| CSS margin collapse | Manage how margins between elements interact | p { margin: 10px; } |
| CSS auto keyword | Let the browser calculate appropriate values for specified properties | div { margin: 0 auto; } |
| Overflow | Control what happens to content that is too big for its container | div { overflow: hidden; } |
| Height and width maximums and minimums | Set the minimum and maximum width and height of elements | div { max-width: 100px; min-height: 50px; } |
| Visibility property | Control the visibility of elements | div { visibility: hidden; } |
This cheat sheet helps you quickly reference essential CSS properties, selectors, and rules, ensuring your web development process is efficient and effective. Keep this guide on hand as you continue to explore and master CSS.
Further Web Development Resources:
Popular Courses on CSS:
Updated on
Written by:
Coursera
Writer
Coursera is the global online learning platform that offers anyone, anywhere access to online course...
This content has been made available for informational purposes only. Learners are advised to conduct additional research to ensure that courses and other credentials pursued meet their personal, professional, and financial goals.