Cheatsheets / Learn CSS

Syntax and Selectors

Class and ID Selectors

CSS classes can be reusable and applied to many /* Selects all elements with
elements. Class selectors are denoted with a period .
class="column" */
followed by the class name. CSS ID selectors should be
unique and used to style only a single element. ID .column {
selectors are denoted with a hash sign # followed by the }
id name.

/* Selects element with id="first-item" */

#first-item {
}

Groups of CSS Selectors

Match multiple selectors to the same CSS rule, using a h1, h2 {

comma-separated list. In this example, the text for both
color: red;
h1 and h2 is set to red.
}

Selector Chaining

CSS selectors define the set of elements to which a CSS

rule set applies. For instance, to select all <p>
elements, the p selector can be used to create style
rules.
Chaining Selectors

CSS selectors can be chained so that rule sets apply only /* Select h3 elements with the section-
to elements that match all criteria. For instance, to select
heading class */
<h3> elements that also have the section-
heading class, the selector h3.section- h3.section-heading {
heading can be used. color: blue;
}

/* Select elements with the section-

heading and button class */
.section-heading.button {
cursor: pointer;
}

CSS Type Selectors

CSS type selectors are used to match all elements of a /* Selects all <p> tags */
given type or tag name. Unlike for HTML syntax, we do not
p {
include the angle brackets when using type selectors for
tag names. When using type selectors, elements are }
matched regardless of their nesting level in the HTML.

CSS class selectors

The CSS class selector matches elements based on the .calendar-cell {

contents of their class attribute. For selecting
color: #fff;
elements having calendar-cell as the value of the
class attribute, a . needs to be prepended. }

HTML attributes with multiple values

Some HTML attributes can have multiple attribute values. <div class="value1 value2 value3"></div>
Multiple attribute values are separated by a space
between each attribute.
Selector Specificity

Specificity is a ranking system that is used when there are h1#header {

multiple conflicting property values that point to the
color: blue;
same element. When determining which rule to apply, the
selector with the highest specificity wins out. The most } /* implemented */
specific selector type is the ID selector, followed by class
selectors, followed by type selectors. In this example, only
h1 {
color: blue will be implemented as it has an ID
selector whereas color: red has a type selector. color: red;
} /* Not implemented */

CSS ID selectors

The CSS ID selector matches elements based on the #job-title {

contents of their id attribute. The values of id
font-weight: bold;
attribute should be unique in the entire DOM. For
selecting the element having job-title as the value }
of the id attribute, a # needs to be prepended.

CSS descendant selector

The CSS descendant selector combinator is used to div p { }

match elements that are descended from another
matched selector. They are denoted by a single space
between each selector and the descended selector. All section ol li { }
matching elements are selected regardless of the nesting
level in the HTML.

<link> Link Element

The <link> element is used to link HTML documents <!-- How to link an external stylesheet
to external resources like CSS files. It commonly uses:
with href, rel, and type attributes -->
href attribute to specify the URL to the
external resource
rel attribute to specify the relationship of the <link
linked document to the current document
href="./path/to/stylesheet/style.css"
type attribute to define the type of content
being linked rel="stylesheet" type="text/css">
Separating HTML code from CSS code

It is common practice to separate content code in HTML

files from styling code in CSS files. This can help make the
code easier to maintain, by keeping the syntax for each
file separate, and any changes to the content or styling
can be made in their respective files.

Print Share
Cheatsheets / Learn CSS

Visual Rules

CSS declarations

In CSS, a declaration is the key-value pair of a CSS /*

property and its value. CSS declarations are used to set
CSS declaration format:
style properties and construct rules to apply to individual
or groups of elements. The property name and value are property-name: value;
separated by a colon, and the entire declaration must be */
terminated by a semi-colon.

/* CSS declarations */
text-align: center;
color: purple;
width: 100px;

Font Size

The font-size CSS property is used to set text font-size: 30px;

sizes. Font size values can be many different units or
types such as pixels.

Background Color

The background-color CSS property controls background-color: blue;

the background color of elements.
!important Rule

The CSS !important rule is used on declarations to #column-one {

override any other declarations for a property and ignore
width: 200px !important;
selector specificity. !important rules will ensure
that a specific declaration always applies to the matched }
elements. However, generally it is good to avoid using
!important as bad practice.
.post-title {
color: blue !important;
}

Opacity

The opacity CSS property can be used to control opacity: 0.5;

the transparency of an element. The value of this
property ranges from 0 (transparent) to 1 (opaque).

Font Weight

The font-weight CSS property can be used to set font-weight: bold;

the weight (boldness) of text. The provided value can be a
keyword such as bold or normal .

Text Align

The text-align CSS property can be used to set text-align: right;

the text alignment of inline contents. This property can
be set to these values: left , right , or center .
CSS Rule Sets

A CSS rule set contains one or more selectors and one or h1 {

more declarations. The selector(s), which in this example
color: blue;
is h1 , points to an HTML element. The declaration(s),
which in this example are color: blue and text-align: center;
text-align: center style the element with a }
property and value. The rule set is the main building block
of a CSS sheet.

Setting foreground text color in CSS

Using the color property, foreground text color of an p {

element can be set in CSS. The value can be a valid color
color : #2a2aff ;
name supported in CSS like green or blue . Also, 3
digit or 6 digit color code like #22f or #2a2aff }
can be used to set the color.

span {
color : green ;
}

Resource URLs

In CSS, the url() function is used to wrap resource background-image:

URLs. These can be applied to several properties such as
url("../resources/image.png");
the background-image .

Background Image

The background-image CSS property sets the background-image: url("nyan-cat.gif");

background image of an element. An image URL should
be provided in the syntax url("moon.jpg") as the
value of the property.
Font Family

The font-family CSS property is used to specify h2 {

the typeface in a rule set. Fonts must be available to the
font-family: Verdana;
browser to display correctly, either on the computer or
linked as a web font. If a font value is not available, }
browsers will display their default font. When using a
multi-word font name, it is best practice to wrap them in
#page-title {
quotes.
font-family: "Courier New";
}

Color Name Keywords

Color name keywords can be used to set color property h1 {

values for elements in CSS.
color: aqua;
}

li {
color: khaki;
}

Print Share
Cheatsheets / Learn CSS

The Box Model

The property box-sizing of CSS box model

The CSS box model is a box that wraps around an HTML .container {
element and controls the design and layout. The property
box-sizing: border-box;
box-sizing controls which aspect of the box is
determined by the height and width properties. }
The default value of this property is content-box ,
which renders the actual size of the element including the
content box; but not the paddings and borders. The value
border-box , on the other hand, renders the actual
size of an element including the content box, paddings,
and borders.

CSS box-sizing: border-box

The value border-box of the box-sizing #box-example {

property for an element corresponds directly to the
box-sizing: border-box;
element’s total rendered size, including padding and
border with the height and width properties. }
The default value of the box-sizing property is
content-box . The value border-box is
recommended when it is necessary to resize the
padding and border but not just the content. For
instance, the value border-box calculates an
element’s height as follows: height =
content height + padding + border .
CSS Margin Collapse

CSS margin collapse occurs when the top and bottom /* The vertical margins will collapse to
margins of blocks are combined into a single margin equal
30 pixels
to the largest individual block margin.
Margin collapse only occurs with vertical margins, not for instead of adding to 50 pixels. */
horizontal margins. .block-one {
margin: 20px;
}

.block-two {
margin: 30px;
}

CSS auto keyword

The value auto can be used with the property div {

margin to horizontally center an element within its
margin: auto;
container. The margin property will take the width of
the element and will split the rest of the space equally }
between the left and right margins.

Dealing with overflow

If content is too large for its container, the CSS small-block {

overflow property will determine how the browser
overflow: scroll;
handles the problem.
By default, it will be set to visible and the content }
will take up extra space. It can also be set to hidden ,
or to scroll , which will make the overflowing content
accessible via scroll bars within the original container.
Height and Width Maximums/Minimums

The CSS min-width and min-height /* Any element with class "column" will be
properties can be used to set a minimum width and
at most 200 pixels wide, despite the width
minimum height of an element’s box. CSS max-width
and max-height properties can be used to set property value of 500 pixels. */
maximum widths and heights for element boxes.

.column {
max-width: 200px;
width: 500px;
}

The visibility Property

The CSS visibility property is used to render .invisible-elements {

hidden objects invisible to the user, without removing
visibility: hidden;
them from the page. This ensures that the page structure
and organization remain unchanged. }

Print Share
Cheatsheets / Learn CSS

Display and Positioning

CSS z-index property

The CSS z-index property specifies how far back or //`element1` will overlap `element2`
how far forward an element will appear on a web page
.element1 {
when it overlaps other elements.
The z-index property uses integer values, which can position: absolute;
be positive or negative values. The element with the z-index: 1;
highest z-index value will be at the foreground, while
}
the element with the lowest z-index value will be at
the back.
.element2 {
position: absolute;
z-index: -1;
}

Fixed CSS Positioning

Positioning in CSS provides designers and developers #navbar {

options for positioning HTML elements on a web page.
position: fixed;
The CSS position can be set to static ,
relative , absolute or fixed . When the }
CSS position has a value of fixed , it is set/pinned to a
specific spot on a page. The fixed element stays the same
regardless of scrolling. The navigation bar is a great
example of an element that is often set to position:
fixed; , enabling the user to scroll through the web
page and still access the navigation bar.
CSS display property

The CSS display property determines the type of .container1 {

render block for an element. The most common values
display: block;
for this property are block , inline , and
inline-block . }
Block-level elements take up the full width of their
container with line breaks before and after, and can have
.container2 {
their height and width manually adjusted.
Inline elements take up as little space as possible, flow display: inline;
horizontally, and cannot have their width or height }
manually adjusted.
Inline-block elements can appear next to each other, and
can have their width and height manually adjusted. .container3 {
display: inline-block;
}

CSS position: absolute

The value absolute for the CSS property .element {

position enables an element to ignore sibling
position: absolute;
elements and instead be positioned relative to its closest
parent element that is positioned with relative or }
absolute . The absolute value removes an
element entirely from the document flow. By using the
positioning attributes top , left , bottom and
right , an element can be positioned anywhere as
expected.

CSS position: relative

The value relative of the CSS position .element {

property enables an element to be positioned relative to
position: relative;
where it would have originally been on a web page. The
offset properties can be used to determine the actual }
position of the element relative to its original position.
Without the offset properties, this declaration will have
no effect on its positioning, it will act as the default value
static of the position property.
CSS float property

The CSS float property determines how far left or /* The content will float to the left side
how far right an element should float within its parent
of the container. */
element. The value left floats an element to the left
side of its container and the value right floats an .left {
element to the right side of its container. For the float: left;
property float , the width of the container must }
be specified or the element will assume the full width of
its containing element.
/* The content will float to the right
side of the container. */
.right {
float: right;
}
The CSS clear property

The CSS clear property specifies how an element /*This determines that no other elements
should behave when it bumps into another element
within the same containing element are
within the same containing element.The clear is
usually used in combination with elements having the CSS allowed to float on the left side of this
float property. This determines on which sides element.*/
floating elements are allowed to float.
.element {
clear: left;
}

/*This determines that no other elements

within the same containing element are
allowed to float on the right side of this
element.*/
.element {
clear: right;
}

/*This determines that no elements within

the same containing element are allowed to
float on either side of this element.*/
.element {
clear: both;
}

/*This determines that other elements

within the same containing element are
allowed to float on both side of this
element.*/
.element {
clear: none;
}

Print Share
Cheatsheets / Learn CSS

Colors

CSS Color Alpha Values

Alpha values determine the transparency of colors in .midground {

CSS. Alpha values can be set for both RGB and HSL colors
background-color: rgba(0, 255, 0, 0.5);
by using rgba() and hsla() and providing a
fourth value representing alpha. Alpha values can range }
between 0.0 (totally transparent) and 1.0 (totally
opaque).
.foreground {
The CSS transparent value can also be used to
create a fully transparent element. background-color: hsla(34, 100%, 50%,
0.1);
}

.transparent {
color: transparent;
}

CSS Hexadecimal Colors

CSS colors can be represented in hexadecimal (or hex) .red {

notation. Hexadecimal digits can represent sixteen
color: #ff0000;
different values using 0 - 9 and a - f .
Hexadecimal colors are composed of 6 characters–each }
group of two represents a value between 0 and 255 for
red, green, or blue. For example #ff0000 is all red, no
.short-blue {
green, and no blue.
When both characters of all three colors are repeated, color: #00f;
hex colors can be abbreviated to only three values, so }
#0000ff could also be represented as #00f .
CSS HSL Colors

CSS colors can be declared with the HSL color system .light-blue {
using hsl() syntax. This syntax contains three values:
background-color: hsl(200, 70%, 50%);
hue (the color value itself), saturation (intensity), and
lightness. }
Hue values range from 0 to 360 while saturation and
lightness values are represented as percentages.

CSS rgb() Colors

CSS colors can be declared with RGB colors using .hot-pink {

rgb() syntax.
color: rgb(249, 2, 171);
rgb() should be supplied with three values
representing red, green, and blue. These values range can }
from 0 to 255.

.green {
color: rgb(0, 255, 0);
}

Color Name Keywords

Color name keywords can be used to set color property h1 {

values for elements in CSS.
color: aqua;
}

li {
color: khaki;
}

Print Share
Cheatsheets / Learn CSS

Typography

CSS font-weight Property

The CSS font-weight property declares how thick /* Sets the text as bolder. */
or thin should be the characters of a text. Numerical
p {
values can be used with this property to set the thickness
of the text. The numeric scale range of this property is font-weight: 700;
from 100 to 900 and accepts only multiples of 100. The }
default value is normal while the default numerical
value is 400 . Any value less than 400 will have text
appear lighter than the default while any numerical value
greater than the 400 will appear bolder.
In the given example, all the <p> elements will appear
in a bolder font.

CSS font-style property

The CSS font-style property determines the font .text {

style in which text will appear.
font-style: italic;
It accepts italic as a value to set the font style to
italic. }

CSS @font-face rule

The CSS @font-face rule allows external fonts or font files @font-face {
to be imported directly into stylesheets.The location of
font-family: 'Glegoo';
the font file must be specified in the CSS rule so that the
files can be loaded from that location. This rule also src: url('../fonts/Glegoo-Regular.ttf')
allows locally hosted fonts to be added using a relative file format('truetype');
path instead of a web URL.
}
CSS Fallback Fonts

The CSS font-family property can have multiple /* Here `Arial` is the fallback font for
fonts declared in order of preference. In this case the
<p> tags */
fonts following the initial font are known as the fallback
fonts. p {
If the initial value of the property font-family fails font-family: "Helvetica", "Arial";
to load to the webpage, the fallback fonts will be used.
}

The CSS line-height property

The CSS line-height property declares the p {

vertical spacing between lines of text. It accepts both
line-height: 10px;
unitless numbers as a ratio (eg. 2 ) and numbers
specified by unit as values (eg. 12px ) but it does not }
accept negative numbers. A unitless number is an
absolute value that will compute the line height as a ratio
to the font size and a unit number can be any valid CSS
unit (eg. pixels, percents, ems, rems, etc.). To set the
line-height of the <p> elements to 10px ,
the given CSS declaration can be used.

CSS Linking fonts

Linking fonts allow user to use web fonts in the document. <head>
They can be imported in an HTML document by using the
<link
<link> tag. Once the web font URL is placed within
the href attribute, the imported font can then be href="https://fonts.googleapis.com/css?
used in CSS declaration. family=Droid%20Serif" rel="stylesheet">
</head>

Print Share
Cheatsheets / Learn CSS: Responsive Design

Learn Responsive Design

Media Type in Media Queries

When writing media queries in CSS we use the only @media only screen and (min-width: 600px)
keyword to specify the type of device. Initially, CSS
{
incorporated a variety of media types such as screen ,
print and handheld . In order to ensure /* ruleset for >= 600px */
responsive design and to accommodate a variety of }
screen sizes the keyword screen is now always used
for displaying content.

And Operator Media Queries

Through using the and operator when writing media @media only screen and (max-width: 480px)
queries in CSS, we can specify that multiple media
and (min-resolution: 300dpi) {
features are required. For example we could require a
certain width as well as a specific resolution for a CSS /* CSS ruleset */
ruleset to apply. The and operator when chaining }
together multiple media features allows us to be more
specific with the screens that we are targeting as we build
responsive designs.
css media query

A CSS media query can be used to adapt a website’s /* For screen sizes less than or equal to
display and layout to different screen sizes. A media query
480px (most likely a mobile device), the
begins with the @media keyword and is followed by
one or more conditions that check screen size, body element's font size will be set to
orientation, resolution, and/or other properties. If these 12px and the #photo element's width will
conditions are met, all CSS rules within the media query
be set to 100% */
will be applied to the page. Media queries are used for
responsive web design by tailoring specific stylesheets to @media only screen and (max-width: 480px)
different types of devices such as laptops, tablets, {
mobiles, and more.
body {
font-size: 12px;
}

#photo {
width: 100%;
}
}

CSS Media Features in Media Queries

Media queries in web development ensure that a website

design is responsive. It does so through creating tailored
style sheets based on the resolution of the device that it
is displayed upon. The browser will detect the screen size
and apply the CSS styles for that screen size based on
specified media features. Media queries can set rules
based on features like the screen width, the screen
resolution and device orientation. These media rules can
be separated by commas. When one of the media rules is
true then the accompanying CSS will apply.
Ranges in Media Queries

Media queries can use CSS to target screen sizes within a @media only screen and (min-width: 480px)
certain range through using multiple widths and/or
and (max-width: 600px) {
heights. This is an effective tool for responsive design that
will address a variety of screen sizes in one CSS media /* ruleset for 480px - 600px */
query. In order to set a range for width or the height, set }
the minimum screen size through using min-width
and/or min-height and then set the maximum
through using max-width or max-height .
These properties are used in combination with the and
operator.

CSS unit em

em is a CSS unit used to create relatively-sized content. .nav-container {

1 em unit represents the base font size of the current
font-size: 10px;
element.
In the example code block, <span> elements nested }
inside of elements with class nav-container will
have a font size of 15px . .nav-container span {
font-size: 1.5em; /* 10 x 1.5 = 15px */
}

Usage of Percentages in CSS

Instead of defining a fixed width using units like px , or .news-row {

cm , percentages can be used in CSS to set the height
height: 300px;
and width of child elements relative to the dimensions of
their parent. The child elements will grow or shrink width: 500px;
according to the set percentage values if the parent }
element changes in size.

.news-row .news-column {
height: 80%; /* 240px */
width: 50%; /* 250px */
}
background-size: cover;

The CSS background-size property is used to

specify the size of the background image. When given the
value cover , like background-size:cover ,
the image covers the complete background of the
container in which it is being displayed.
The proportions of the image are maintained, so if the
dimensions exceed the container’s, then some parts of
the image will be left out.

CSS unit rem

The CSS unit rem can be used to set the font size of html {
HTML elements relative to the font size of the root
font-size: 18px;
element. 1 rem represents the size of the base font
within the root element - the <html> tag. }
In the example code block, the font size for all the
<span> elements will be twice the size of the font size span {
declared for the root element.
font-size: 2rem;
}

Print Share
Cheatsheets / Intermediate CSS: CSS Grid

Learn CSS: Grid

Grid Template Columns

To specify the number of columns of the grid and the #grid-container {

widths of each column, the CSS property grid-
display: grid;
template-columns is used on the grid container.
The number of width values determines the number of width: 100px;
columns and each width value can be either in grid-template-columns: 20px 20% 60%;
pixels( px ) or percentages(%).
}

fr Relative Unit

The CSS grid relative sizing unit fr is used to split rows /*

and/or columns into proportional distances. Each fr
In this example, the second column take
unit is a fraction of the grid’s overall length and width. If a
fixed unit is used along with fr (like pixels for example), 60px of the avaiable 100px so the first
then the fr units will only be proportional to the and third columns split the remaining
distance left over. available 40px into two parts (`1fr` = 50%
or 20px)
*/

.grid {
display: grid;
width: 100px;
grid-template-columns: 1fr 60px 1fr;
}
Grid Gap

The CSS grid-gap property is a shorthand way of // The distance between rows is 20px
setting the two properties grid-row-gap and
// The distance between columns is 10px
grid-column-gap . It is used to determine the size
of the gap between each row and each column. The first
value sets the size of the gap between rows and while the #grid-container {
second value sets the size of the gap between columns.
display: grid;
grid-gap: 20px 10px;
}

CSS Block Level Grid

CSS Grid is a two-dimensional CSS layout system. To set #grid-container {

an HTML element into a block-level grid container use
display: grid;
display: grid property/value. The nested
elements inside this element are called grid items. }

CSS grid-row

The CSS grid-row property is shorthand for the /*CSS Syntax */

grid-row-start and grid-row-end
grid-row: grid-row-start / grid-row-end;
properties specifying a grid item’s size and location within
the grid row. The starting and ending row values are
separated by a / . There is a corresponding grid- /*Example*/
column property shorthand that implements the same .item {
behavior for columns.
grid-row: 1 / span 2;
}

CSS Inline Level Grid

CSS Grid is a two-dimensional CSS layout system. To set #grid-container {

an HTML element into a inline-level grid container use
display: inline-grid;
display: inline-grid property/value. The
nested elements inside this element are called grid items. }
The difference between the values inline-grid
and grid is that the inline-grid will make the
element inline while grid will make it a block-level
element.
 minmax() Function

The CSS Grid minmax() function accepts two /* In this example, the second column will
parameters:
vary in size between 100px and 500px
The first parameter is the minimum size of a row
or column. depending on the size of the web browser"
The second parameter is the maximum size. */
The grid must have a variable width for the minmax()
function.
If the maximum value is less than the minimum, then the .grid {
maximum value is ignored and only the minimum value is display: grid;
used.
grid-template-columns: 100px
The function can be used in the values of the grid-
template-rows , grid-template-columns minmax(100px, 500px) 100px;
and grid-template properties. }

grid-row-start & grid-row-end

The CSS grid-row-start and grid-row- /* CSS syntax:

end properties allow single grid items to take up
grid-row-start: auto|row-line;
multiple rows. The grid-row-start property
defines on which row-line the item will start. The grid-row-end: auto|row-line|span n;
grid-row-end property defines how many rows an */
item will span, or on which row-line the item will end. The
grid-row-start: 2;
keyword span can be used with either property to
automatically calculate the ending value from the starting
grid-row-end: span 2;
value or vice versa. There are complementary grid-
column-start and grid-column-end
properties that apply the same behavior to columns.

CSS grid-row-gap

The CSS grid-row-gap property determines the /*CSS Syntax */

amount of blank space between each row in a CSS grid
grid-row-gap: length; /*Any legal length
layout or in other words, sets the size of the gap (gutter)
between an element’s grid rows. The grid-column- value, like px or %. 0 is the default
gap provides the same functionality for space between value*/
grid columns.
CSS grid-area

The CSS grid-area property specifies a grid item’s .item1 {

size and location in a grid layout and is a shorthand
grid-area: 2 / 1 / span 2 / span 3;
property for the grid-row-start , grid-
column-start , grid-row-end , and grid- }
column-end in that order. Each value is separated by
a /.
In the included example, Item1 will start on row 2 and
column 1, and span 2 rows and 3 columns

Justify Items

The justify-items property is used on a grid #container {

container. It’s used to determine how the grid items are
display: grid;
spread out along a row by setting the default
justify-self property for all child boxes. justify-items: center;
The value start aligns grid items to the left side of the grid-template-columns: 1fr;
grid area.
grid-template-rows: 1fr 1fr 1fr;
The value end aligns grid items to the right side of the
grid area.
grid-gap: 10px;
The value center aligns grid items to the center of }
the grid area.
The value stretch stretches all items to fill the grid
area.

Align Self

The CSS align-self property is used to set how an

individual grid item positions itself along the column or
block axis. By default grid items inherit the value of the
align-items property on the container. So if the
align-self value is set, it would over-ride the
inherited align-items value.
The value start positions grid items on the top of the
grid area.
The value end aligns the grid on the bottom of the grid
area.
The value center positions grid items on the center
of the grid area.
The value stretch positions grid items to fill the grid
area (default).
CSS grid-template-areas

The CSS grid-template-areas property allows /* Specify two rows, where "item" spans
the naming of sections of a webpage to use as values in
the first two columns in the first two
the grid-row-start , grid-row-end ,
grid-column-start , grid-column-end , rows (in a four column grid layout)*/
and grid-area properties. They specify named grid .item {
areas within a CSS grid. grid-area: nav;
}
.grid-container {
display: grid;
grid-template-areas:
'nav nav . .'
'nav nav . .';
}

CSS grid-auto-flow

The CSS grid-auto-flow property specifies /*CSS Syntax */

whether implicity-added elements should be added as
grid-auto-flow: row|column|dense|row
rows or columns within a grid or, in other words, it
controls how auto-placed items get inserted in the grid dense|column dense;
and this property is declared on the grid container.
The value row specifies the new elements should fill
rows from left to right and create new rows when there
are too many elements (default).
The value column specifies the new elements should
fill columns from top to bottom and create new columns
when there are too many elements.
The value dense invokes an algorithm that attempts to
fill holes earlier in the grid layout if smaller elements are
added.
Justify Content

Sometimes the total size of the grid items can be smaller

than the grid container. If this is the case, the CSS
property justify-content can be used to
position the entire grid along the row or inline axis of the
grid container.
The value start aligns the grid to the left side of the
grid container.
The value end aligns the grid to the right side of the
grid container.
The value center centers the grid horizontally in the
grid container.
The value stretch stretches the grid items to
increase the size of the grid to expand horizontally across
the container.
The value space-around includes an equal amount
of space on each side of a grid element, resulting in
double the amount of space between elements as there
is before the first and after the last element.
The value space-between includes an equal
amount of space between grid items and no space at
either end.
The value space-evenly places an even amount of
space between grid items and at either end.
Align Content

Some times the total size of the grid items can be smaller
than the grid container. If this is the case, the CSS
property align-content can be used to position
the entire grid along the column axis of the grid
container.
The property is declared on the grid container.
The value start aligns the grid to the top of the grid
container.
The value end aligns the grid to the bottom of the grid
container.
The value center centers the grid vertically in the
grid container.
The value stretch stretches the grid items to
increase the size of the grid to expand vertically across
the container.
The value space-around includes an equal amount
of space on each side of a grid element, resulting in
double the amount of space between elements as there
is before the first and after the last element.
The value space-between includes an equal
amount of space between grid items and no space at
either end.
The value space-evenly places an even amount of
space between grid items and at either end.

CSS grid-auto-rows

The CSS grid-auto-rows property specifies the

height of implicitly added grid rows or it sets a size for the
rows in a grid container. This property is declared on the
grid container. grid-auto-columns provides the
same functionality for columns. Implicitly-added rows or
columns occur when there are more grid items than cells
available.
Justify Self

The CSS justify-self property is used to set how // The grid items are positioned to the
an individual grid item positions itself along the row or
right (end) of the row.
inline axis. By default grid items inherit the value of the
justify-items property on the container. So if
the justify-self value is set, it would over-ride #grid-container {
the inherited justify-items value.
display: grid;
The value start positions grid items on the left side
justify-items: start;
of the grid area.
The value end positions the grid items on the right side }
of the grid area.
The value center positions grid items on the center
.grid-items {
of the grid area.
The value stretch positions grid items to fill the grid justify-self: end;
area (default). }

CSS grid-area

The CSS grid-area property allows for elements to

overlap each other by using the z-index property on
a particular element which tells the browser to render
that element on top of the other elements.

Align Items

The align-items property is used on a grid #container {

container. It’s used to determine how the grid items are
display: grid;
spread out along the column by setting the default
align-self property for all child grid items. align-items: start;
The value start aligns grid items to the top side of grid-template-columns: 1fr;
the grid area.
grid-template-rows: 1fr 1fr 1fr;
The value end aligns grid items to the bottom side of
the grid area.
grid-gap: 10px;
The value center aligns grid items to the center of }
the grid area.
The value stretch stretches all items to fill the grid
area.

Print Share
0
Cheatsheets / Learn Intermediate CSS

Layout with Flexbox

CSS Flexbox

The CSS display: flex property sets an HTML div {

element as a block level flex container which takes the full
display: flex;
width of its parent container. Any child elements that
reside within the flex container are called flex items. }
Flex items change their size and location in response to
the size and position of their parent container.

justify-content Property

The CSS justify-content flexbox property /* Items based at the center of the parent
defines how the browser distributes space between and
container: */
around content items along the main-axis of their
container. This is when the content items do not use all div {
available space on the major-axis (horizontally). display: flex;
justify-content can have the values of:
justify-content: center;
flex-start
flex-end }
center
space-between /* Items based at the upper-left side of
space-around
the parent container: */
div {
display: flex;
justify-content: flex-start;
}
 flex Property

The flex CSS property specifies how a flex item will /* Three properties declared on three
grow or shrink so as to fit within the space available in its
lines: */
flex container. This is a shorthand property that
declares the following properties in order on a single line: .first-flex-item {
flex-grow flex-grow: 2;
flex-shrink flex-shrink: 1;
flex-basis
flex-basis: 150px;
}

/* Same three properties declared on one

line: */
.first-flex-item {
flex: 2 1 150px;
}

flex-direction Property

The flex-direction CSS property specifies how div {

flex items are placed in the flex container - either
display: flex;
vertically or horizontally. This property also determines
whether those flex items appear in order or in reverse flex-direction: row-reverse;
order. }

align-content Property

The align-content property modifies the

behavior of the flex-wrap property. It determines how to
space rows from top to bottom (ie. along the cross axis).
Multiple rows of items are needed for this property to
take effect.
 flex-grow Property

The CSS flex-grow property allows flex items to .panelA {

grow as the parent container increases in size
width: 100px;
horizontally. This property accepts numerical values and
specifies how an element should grow relative to its flex-grow: 1;
sibling elements based on this value. }
The default value for this property is 0 .

/* This panelB element will stretch twice

wider than the panelA element */
.panelB {
width: 100px;
flex-grow: 2;
}

flex-shrink Property

The CSS flex-shrink property determines how an .container {

element should shrink as the parent container decreases
display: flex;
in size horizontally. This property accepts a numerical
value which specifies the ratios for the shrinkage of a flex }
item compared to its other sibling elements within its
parent container.
.item-a {
The default value for this property is 1 .
flex-shrink: 1;
/* The value 1 indicates that the item
should shrink. */
}

.item-b {
flex-shrink: 2;
/* The value 2 indicates that the item
should shrink twice than the element item-
a. */
}
Css flex-basis property

The flex-basis CSS property sets the initial base // Default Syntax
size for a flex item before any other space is distributed
flex-basis: auto;
according to other flex properties.

The CSS flex-flow property

The CSS property flex-flow provides a shorthand // In this example code block, "column" is
for the properties flex-direction and flex-
the value of the property "flex-direction"
wrap . The value of the flex-direction
property specifies the direction of the flex items and the and "wrap" is the value of the property
value of the flex-wrap property allows flex items to "flex-wrap".
move to the next line instead of shrinking to fit inside the
flex container. The flex-flow property should be
.container {
declared on the flex container.
display: flex;
flex-flow: column wrap;
}

CSS display: inline-flex property

The CSS display: inline-flex property sets .container{

an HTML element as an inline flex container which takes
display: inline-flex;
only the required space for the content. Any child
elements that reside within the flex container are called }
flex items. Flex items change their size and location in
response to the size and position of their parent
container.

Flexbox Properties align-items

When working with CSS flexbox align-items is

used to align flex items vertically within a parent
container.
Css flex-wrap property

The flex-wrap property specifies whether flex .container {

items should wrap or not. This applies to flex items only.
display: flex;
Once you tell your container to flex-wrap , wrapping
become a priority over shrinking. Flex items will only flex-wrap: wrap;
begin to wrap if their combined flex-basis value is width: 200px;
greater than the current size of their flex container. }

Print Share
Cheatsheets / Learn CSS-in-JS

Styling Your Applications

The css Prop

In Emotion, the css prop is used to style elements. It // object styles

can be used with object styles and tagged template
<div
literals.
css={{
backgroundColor: 'rebeccapurple',
}}
>
Content to Display
</div>

// tagged template literals

<div
css={css`
background-color: rebeccapurple;
`}
>
Content to Display
</div>
React Styled Components

Styled components are React components that have const ContentWrapper = styled.div`
styles attached to them.
width: 100vw;
height: 100vh;
display: grid;
`

function App() {
return (

<ContentWrapper>Content</ContentWrapper>
)
}

Composition

Compositions can be used to group styles together and const Button = styled.button`
be used in other style blocks.
color: black;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid black;
border-radius: 3px;
`;

// A new component based on Button, but

with some override styles
const CornflowerButton = styled(Button)`
color: cornflowerblue;
border-color: cornflowerblue;
`;
Theming

In Emotion, themes are used to specify styles that are import { ThemeProvider } from
used throughout the whole application. Styles defined in
'@emotion/react'
the theme can be used as variables in other style blocks.
import styled from '@emotion/styled'

const theme = {
colors: {
primary: 'tomato'
}
}

const AlertText = styled.div`

color: ${props =>
props.theme.colors.primary};
`

render(
<ThemeProvider theme={theme}>
<AlertText>alert text</AlertText>
</ThemeProvider>
)
keyframes Helper

In Emotion, the keyframes helper can be used to import { jsx, css, keyframes } from
define animations and returns an object that can be used
'@emotion/react'
in other style blocks.

const partyText = keyframes`

0% {
background-color: red;
}
20% {
background-color :yellow;
}
40% {
background-color: green;
}
60% {
background-color: blue;
}
80% {
background-color: red;
}
`

render(
<div
css={css`
animation: ${partyText} 1s ease
infinite;
`}
>
party text!
</div>
)
Print Share
Cheatsheets / Learn CSS: Box Model and Layout

The Box Model

The property box-sizing of CSS box model

The CSS box model is a box that wraps around an HTML .container {
element and controls the design and layout. The property
box-sizing: border-box;
box-sizing controls which aspect of the box is
determined by the height and width properties. }
The default value of this property is content-box ,
which renders the actual size of the element including the
content box; but not the paddings and borders. The value
border-box , on the other hand, renders the actual
size of an element including the content box, paddings,
and borders.

CSS box-sizing: border-box

The value border-box of the box-sizing #box-example {

property for an element corresponds directly to the
box-sizing: border-box;
element’s total rendered size, including padding and
border with the height and width properties. }
The default value of the box-sizing property is
content-box . The value border-box is
recommended when it is necessary to resize the
padding and border but not just the content. For
instance, the value border-box calculates an
element’s height as follows: height =
content height + padding + border .
CSS Margin Collapse

CSS margin collapse occurs when the top and bottom /* The vertical margins will collapse to
margins of blocks are combined into a single margin equal
30 pixels
to the largest individual block margin.
Margin collapse only occurs with vertical margins, not for instead of adding to 50 pixels. */
horizontal margins. .block-one {
margin: 20px;
}

.block-two {
margin: 30px;
}

CSS auto keyword

The value auto can be used with the property div {

margin to horizontally center an element within its
margin: auto;
container. The margin property will take the width of
the element and will split the rest of the space equally }
between the left and right margins.

Dealing with overflow

If content is too large for its container, the CSS small-block {

overflow property will determine how the browser
overflow: scroll;
handles the problem.
By default, it will be set to visible and the content }
will take up extra space. It can also be set to hidden ,
or to scroll , which will make the overflowing content
accessible via scroll bars within the original container.
Height and Width Maximums/Minimums

The CSS min-width and min-height /* Any element with class "column" will be
properties can be used to set a minimum width and
at most 200 pixels wide, despite the width
minimum height of an element’s box. CSS max-width
and max-height properties can be used to set property value of 500 pixels. */
maximum widths and heights for element boxes.

.column {
max-width: 200px;
width: 500px;
}

The visibility Property

The CSS visibility property is used to render .invisible-elements {

hidden objects invisible to the user, without removing
visibility: hidden;
them from the page. This ensures that the page structure
and organization remain unchanged. }

Print Share
Cheatsheets / Learn CSS: Box Model and Layout

Display and Positioning

CSS z-index property

The CSS z-index property specifies how far back or //`element1` will overlap `element2`
how far forward an element will appear on a web page
.element1 {
when it overlaps other elements.
The z-index property uses integer values, which can position: absolute;
be positive or negative values. The element with the z-index: 1;
highest z-index value will be at the foreground, while
}
the element with the lowest z-index value will be at
the back.
.element2 {
position: absolute;
z-index: -1;
}

Fixed CSS Positioning

Positioning in CSS provides designers and developers #navbar {

options for positioning HTML elements on a web page.
position: fixed;
The CSS position can be set to static ,
relative , absolute or fixed . When the }
CSS position has a value of fixed , it is set/pinned to a
specific spot on a page. The fixed element stays the same
regardless of scrolling. The navigation bar is a great
example of an element that is often set to position:
fixed; , enabling the user to scroll through the web
page and still access the navigation bar.
CSS display property

The CSS display property determines the type of .container1 {

render block for an element. The most common values
display: block;
for this property are block , inline , and
inline-block . }
Block-level elements take up the full width of their
container with line breaks before and after, and can have
.container2 {
their height and width manually adjusted.
Inline elements take up as little space as possible, flow display: inline;
horizontally, and cannot have their width or height }
manually adjusted.
Inline-block elements can appear next to each other, and
can have their width and height manually adjusted. .container3 {
display: inline-block;
}

CSS position: absolute

The value absolute for the CSS property .element {

position enables an element to ignore sibling
position: absolute;
elements and instead be positioned relative to its closest
parent element that is positioned with relative or }
absolute . The absolute value removes an
element entirely from the document flow. By using the
positioning attributes top , left , bottom and
right , an element can be positioned anywhere as
expected.

CSS position: relative

The value relative of the CSS position .element {

property enables an element to be positioned relative to
position: relative;
where it would have originally been on a web page. The
offset properties can be used to determine the actual }
position of the element relative to its original position.
Without the offset properties, this declaration will have
no effect on its positioning, it will act as the default value
static of the position property.
CSS float property

The CSS float property determines how far left or /* The content will float to the left side
how far right an element should float within its parent
of the container. */
element. The value left floats an element to the left
side of its container and the value right floats an .left {
element to the right side of its container. For the float: left;
property float , the width of the container must }
be specified or the element will assume the full width of
its containing element.
/* The content will float to the right
side of the container. */
.right {
float: right;
}
The CSS clear property

The CSS clear property specifies how an element /*This determines that no other elements
should behave when it bumps into another element
within the same containing element are
within the same containing element.The clear is
usually used in combination with elements having the CSS allowed to float on the left side of this
float property. This determines on which sides element.*/
floating elements are allowed to float.
.element {
clear: left;
}

/*This determines that no other elements

within the same containing element are
allowed to float on the right side of this
element.*/
.element {
clear: right;
}

/*This determines that no elements within

the same containing element are allowed to
float on either side of this element.*/
.element {
clear: both;
}

/*This determines that other elements

within the same containing element are
allowed to float on both side of this
element.*/
.element {
clear: none;
}

Print Share
Cheatsheets / Learn CSS: Transitions and Animations

CSS Transitions

css-transitions-animatable-properties

CSS transitions enable us to control the timing of visual

state changes. Color, background color, font size, width,
and height are all states that can be transitioned.

css-transitions-four-components

CSS Transitions have 4 components:

A property that will transition.
The duration which describes how long the
transition takes.
The delay to pause before the transition will take
place.
The timing function that describes the transition’s
acceleration.

transition-duration-default-value

If a value is not given for transition-duration ,

by default, the value is 0s. This mean no animation will
occur.
css-transition-timing-function

The transition-timing-function property

is used to describe how a transition will advance over its
duration. Values such as ease-in, ease-out, ease-in-out,
and linear allows a transition to change speed during its
course.

css-transition-delay

The transition-delay describes when the

transition effect will start. The unit specified by this value
is defined in seconds s or milliseconds ms .

transition-properties-comma

Two (or more) CSS properties can be triggered in a single

transition by separating them with a comma.

transition-property-all

all is a value for transition-property that

causes every changing property to transition.

css-transition-shorthand-syntax

The transition CSS property is the shorthand

syntax for transition-property, transition-duration,
transition-timing-function, and transition-delay.
Print Share
Cheatsheets / Learn Navigation Design

Learn Links and Buttons

Signifiers

In the field of user interface design, signifiers are

indicators that offer clues about how to interact with new
objects or situations.

The User Agent Stylesheet

The user agent stylesheet is a set of default styles

included in the browser for use on all web pages.

Links and Button Behavior

Links and buttons should exhibit the same behavior

across different browsers to consistently maintain the
same experience for all users.

Link States

In a browser, links have four main states:

Normal (not clicked)
Hover
Active (clicked)
Visited
Link Styles

Links should be styled in a different way from their

surrounding text.
By default, links appear blue and underlined in contrast to
the surrounding black text.

Anchor Text

Anchor text is the text inside of a link and is descriptive of

the linked resource.
It improves:
Usability
Accessibility
Search engine optimization

The ‘title’ Attribute

The title attribute can be provided to any HTML

element.
This attribute is used for additional context or advisory
text for clickable elements.

Tooltips

A tooltip is a descriptive box which contains the text of an

element’s title attribute and appears near the user’s
cursor.
The :hover CSS Pseudo-Class

The CSS pseudo-class :hover is used to style an

element when the mouse cursor hovers over it.

The CSS cursor Property

The CSS cursor property is used to change the

appearance of the mouse cursor when hovering over an
element.

Skeuomorphism

Skeuomorphism is the concept of replicating or imitating

real-life counterparts with UI elements.

Flat Design

Flat design uses simplicity and lack of clutter for its UI

elements.

Button Skeuomorphic Styling

A <button> element can incorporate skeuomorphic

styling for a realistic 3D appearance.
When pressing the button, a texture change may occur to
make the button appear to flatten and pop back up when
released.
Button Flat Styling

A <button> element can incorporate flat styling for a

simple 2D effect.
When pressing the button, a color change may occur as a
signifier that the button has been pressed.

Button Hover State

A button can have a hover state that changes the

appearance of a cursor when it is directly over the
button.

Mobile Device Hover State

The hover state of buttons and links do not apply to

mobile devices due to the lack of a cursor.

Print Share