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
background-color: rgba(0, 255, 0, 0.5);
colors 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
.short-blue {
all red, no 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
background-color: hsl(200, 70%, 50%);
values: 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 h1 {

property values for elements in CSS.
color: aqua;
}

li {
color: khaki;
}

Print Share
Cheatsheets / Learn CSS

Display and Positioning

CSS z-index property

The CSS z-index property specifies how far back //`element1` will overlap `element2`
or how far forward an element will appear on a web
.element1 {
page when it overlaps other elements.
The z-index property uses integer values, which position: absolute;
can be positive or negative values. The element with z-index: 1;
the 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
.container2 {
have 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
position: relative;
to 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
how far right an element should float within its parent
side 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 allowed to float on the left side of this
CSS 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

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
box-sizing: border-box;
property 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
30 pixels
equal to the largest individual block margin.
Margin collapse only occurs with vertical margins, not instead of adding to 50 pixels. */
for 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
overflow: scroll;
browser 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
properties can be used to set a minimum width and
be at most 200 pixels wide, despite the
minimum height of an element’s box. CSS max-
width and max-height properties can be used width property value of 500 pixels. */
to set 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
visibility: hidden;
removing them from the page. This ensures that the
page structure and organization remain unchanged. }

Print Share
Cheatsheets / Learn CSS

Typography

CSS font-weight Property

The CSS font-weight property declares how /* Sets the text as bolder. */
thick or thin should be the characters of a text.
p {
Numerical values can be used with this property to set
the thickness of the text. The numeric scale range of font-weight: 700;
this property is 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 .text {

font 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 @font-face {

files to be imported directly into stylesheets.The
font-family: 'Glegoo';
location of the font file must be specified in the CSS
rule so that the files can be loaded from that location. src: url('../fonts/Glegoo-Regular.ttf')
This rule also allows locally hosted fonts to be added format('truetype');
using a relative file 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 font-family: "Helvetica", "Arial";
fails 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 <head>

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

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 property-name: value;
and value are 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 #column-one {

to override any other declarations for a property and
width: 200px !important;
ignore 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 font-weight: bold;

set 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 h1 {

or more declarations. The selector(s), which in this
color: blue;
example is h1 , points to an HTML element. The
declaration(s), which in this example are color: text-align: center;
blue and 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 p {

an element can be set in CSS. The value can be a valid
color : #2a2aff ;
color 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
url("../resources/image.png");
as 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
#page-title {
in quotes.
font-family: "Courier New";
}

Color Name Keywords

Color name keywords can be used to set color h1 {

property values for elements in CSS.
color: aqua;
}

li {
color: khaki;
}

Print Share
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 /* Select h3 elements with the section-
only to elements that match all criteria. For instance, to
heading class */
select <h3> elements that also have the
section-heading class, the selector h3.section-heading {
h3.section-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
p {
not 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 <div class="value1 value2 value3"></div>
values. Multiple attribute values are separated by a
space between each attribute.
Selector Specificity

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

are multiple conflicting property values that point to
color: blue;
the same element. When determining which rule to
apply, the selector with the highest specificity wins out. } /* implemented */
The most specific selector type is the ID selector,
followed by class selectors, followed by type selectors.
h1 {
In this example, only color: blue will be
implemented as it has an ID selector whereas color: red;
color: red has a type selector. } /* 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 <!-- How to link an external stylesheet
documents to external resources like CSS files. It
with href, rel, and type attributes -->
commonly uses:
href attribute to specify the URL to the
external resource <link
rel attribute to specify the relationship of
href="./path/to/stylesheet/style.css"
the linked document to the current document
type attribute to define the type of content rel="stylesheet" type="text/css">
being linked
Purpose of CSS

CSS, or Cascading Style Sheets, is a language that is

used in combination with HTML that customizes how
HTML elements will appear. CSS can define styles and
change the layout and design of a sheet.

Write CSS in Separate Files

CSS code can be written in its own files to keep it <head>

separate from the HTML code. The extension for CSS
<link href="style.css" type="text/css"
files is .css. These can be linked to an HTML file using a
<link> tag in the <head> section. rel="stylesheet">
</head>

Write CSS in HTML File

CSS code can be written in an HTML file by enclosing <head>

the code in <style> tags. Code surrounded by
<style>
<style> tags will be interpreted as CSS syntax.
h1 {
color: blue;
}
</style>
</head>

Inline Styles

CSS styles can be directly added to HTML elements by <h2 style="text-align: center;">Centered
using the style attribute in the element’s opening
text</h2>
tag. Each style declaration is ended with a semicolon.
Styles added in this manner are known as inline styles.
<p style="color: blue; font-size:
18px;">Blue, 18-point text</p>
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