CSS Cheat Sheet By: Monique Danao, Corey Leung December 18, 2017 Estimated reading time: 6 minutes. CSS (Cascading Style Sheets) lets designers transform the appearance and layout of any website. Even if you become fluent in this coding language, seasoned developers can find themselves seeking quick references and shortcuts to streamline their coding process. If you’re a front-end developer or an amateur coder learning the ropes, this CSS cheat sheet has tips and tricks for various hard-to-remember codes to help you beautify your site. What is CSS Cascading Style Sheets (more commonly known as CSS) is used to style HTML pages. CSS provides a way to separate the structure of a web page from its visual design, enabling web designers and developers to control the layout, appearance, and style of multiple web pages all at once. Specifically, developers can tell the browser how to render certain elements, such as font styles and sizes, page layout, colours and animations. By using CSS, web developers can create visually appealing and user-friendly websites to make the content accessible and user-friendly. Basic CSS Terms: Selector, property, value Property CSS properties are rules that we can set on elements. This includes things like background, colours, fonts, spacing and alignment. Along with the rules we need to specify the element to apply this rule to, we call this a selector. Selector A selector allows you to identify the HTML element you want to change. Let’s say you want to edit the font colour of the body text element. Here our selector is body, which targets the <body> HTML tag. The rules for this selector (or what we want to change) then appear as a list of properties in-between the {}. body { color: red; } Selectors include tags, classes and ids. Tags usually appear between <>, classes are notated starting with a period, and ids are notated with a #. See our examples below: div: Selects all <div> tags .button: Selects any element with a class of button #content: Selects the element with the id of content N.B. Classes can appear many times in an HTML document where an ID should only appear once. We can also combine selectors to specify only certain elements on our page. This allows us to specify rules for specific parts of our page. /* Selects only `<div>` elements that exist inside of an element with the `id` of `content` */ #content div {} /* Selects only `<div>` elements that exist inside of an element with the `id` of `content` AND have a class of button */ #content div.button {} Common CSS properties These are some common changes you can make to an HTML element and the subsequent code you need to do so. Background Code background-color: Sets the background colour of an element. The colour background can be set using color names or HEX, RGB, and HSL codes. background-image: Allows you to set an image background for an element. You can create a layered effect by listing the background image URL after the first—they’re organized so that the first image URL appears closest (or frontmost) to the user. background-attachment: Sets how the background image is viewed when scrolling; whether it is fixed regardless of or relative to other elements (like text). background-position: Sets the position of the background image relative to the position layer set by the background-origin. background-repeat: Sets how the background image is repeated horizontally or vertically (or not at all). Text and Font Code text-align: Sets the horizontal alignment of the content, such as center, left, right or justify. text-align-last: Sets the horizontal alignment of the last line of content. vertical-align: Sets the vertical alignment of an inline, inline-block or table-cell block. It can be used to vertically align text within a table or an image to a line of text, but does not work at the block level. font-size: Sets the font size. font-weight: Allows you to set the font weight, or boldness. Depending on the font family, it can be set using terms such as: font-weight: Bold; also 700 font-weight: Normal; also 400 or using numeric keyword values: font-weight: 100; font-family: sSets the font type. You can list multiple fonts, so if one is not available for a specific character, it will move to the next font to see if it has the character. Can be specified to serif or sans-serif font-style: sets whether the font style should be normal, oblique or italicized normal; oblique; italic; letter-spacing: Allows you to set the horizontal space between letters. A positive letter spacing value will move letters further apart, a negative value will bring them closer together. line-height: Allows you to set the height of a line box—to change the spacing between lines. It can be set as normal or with a numeric value. Here are some examples: line-height: 1.5; line-height: 150%; font-variant-caps: Allows you to set alternate glyphs for capital letters Border Code border-width: set the width of your border (can be specified to one border using the code below) border-bottom-width border-left-width border-right-width border-top-width border-style: set the line type of your border (dotted, dashed, etc). border-color: set the color of a border. The border color can be set using color names or HEX, RGB, and HSL codes. Miscellaneous Code display: Sets how the element will be laid out on the page. block: A block level element takes up a full line and forces other elements to move below it. <div>s are a common example of a block level element inline: An inline element doesn't break other content, and appears inline with other content. <span>s are a common example of an inline element list-style: Sets how the bullets will look in an <ol> (ordered list) or <ul> (unordered list) opacity: Sets how opaque an element is, or how translucent an element is. A value of 1 is fully opaque while a value of 0 is invisible. There are many properties that can be assigned, you can find a full list here. The Box Model The box model is the way that the browser decides to render elements to the screen. Each element is given a box defined by several edges, these regions are: Content edge: Where the content is displayed Padding edge: Spacing between the content and the border Border edge: The border itself Margin edge: Spacing between this element and other elements Margin Edge +-----------------------------------+ | Border Edge | | +-----------------------------+ | | | Padding Edge | | | | +-----------------------+ | | | | | Content Edge | | | | | | +-------------------+ | | | | | | | Content goes Here | | | | | | | +-------------------+ | | | | | +-----------------------+ | | | +-----------------------------+ | +-----------------------------------+ Each of these have relevant rules for setting the size of each area: margin, border, padding Content sizes are changed using the width and height rules. Each of these rules have appropriate rules for setting only one side of the box, top, right, bottom and left Before we share some examples of how each of these can be used, here are some examples of how these properties are notated: - margin-top: Sets the top margin of an element - padding-right: Sets the right padding of an element - padding-top: Sets the top padding of an element body { margin-top: 10px; /* Sets a margin of 10px only on the top edge */ padding-right: 10px; /* Sets a padding of 10px only on the right edge */ border-bottom: 1px solid black; /* Sets a black solid border of 1px wide on the bottom edge */ } We can also use a shorthand notation when writing out rules for these properties. The rules for these shorthand notations are as follows: If there is only one value: The value is applied to all sides If there are two values: The first value is applied to the top and bottom The second value is applied, to the left and right If there are three values: The first value is applied to only the top The second value is applied to the left and right The third value is applied to the bottom If there are four values: The first value is applied to the top The second value is applied to the right The third value is applied to the bottom The fourth value is applied to the left body { /* Sets a solid border of 1px on all sides */ border: 1px solid black; /* Sets a margin of 10px on the top and bottom, and 5px on the left and right */ margin: 10px 5px; /* Sets a padding of 10px on the top, and 5px on the left and right, and 2px on the bottom */ padding: 10px 5px 2px; } We can also set the width and height of an element. div { width: 100px; height: 100px; } This will set the size of our Content Box for all <div> elements to 100x100. The Flexbox You can use a flexbox code so that elements automatically adjust to the dimensions of the user’s browser, thus improving UX. This is particularly important when coding an app or website intended for mobile use. Check out this resource for further explanation on how flexboxes work and can be implemented to different containers. It’s important to understand that the element to which a flexbox is applied is called a parent container, and subsequent inner elements are children. Here are some common codes used to implement flexbox: - :first-child: a selector to denote the first element in a parent container - :last-child: a selector to denote the last element in a parent container - Flex-direction: select whether the items will be arranged in a row or column - Flex-grow: allows an element to grow in proportion to the other children. If they’re each set to 1, they’ll grow to an equal size. However, if one child is set to 2, it will grow up to twice the size of the other children (if there’s room). Save this CSS Cheat Sheet to help you code beautiful web pages quickly and correctly. More Learning Resources If you’re looking to advance your coding skills, check out our Front End Developer Course where you will learn programming languages like Javascript, CSS and HTML, to make you more digital-first in your career. If you want to prepare for a whole new career in web development, go all-in with our comprehensive 12-week Web Development Bootcamp that will transform you into an employable developer in three months.