12/26/23, 11:00 AM Learn CSS: Visual Rules Cheatsheet | Codecademy
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 sizes. font-size: 30px;
Font size values can be many different units or types
such as pixels.
Background Color
The background-color CSS property controls the background-color: blue;
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
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;
}
https://www.codecademy.com/learn/learn-css/modules/learn-css-selectors-visual-rules/cheatsheet 1/3
12/26/23, 11:00 AM Learn CSS: Visual Rules Cheatsheet | Codecademy
Opacity
The opacity CSS property can be used to control the opacity: 0.5;
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 the font-weight: bold;
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 the text-align: right;
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: blue text-align: center;
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 an p {
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 ;
}
https://www.codecademy.com/learn/learn-css/modules/learn-css-selectors-visual-rules/cheatsheet 2/3
12/26/23, 11:00 AM Learn CSS: Visual Rules Cheatsheet | Codecademy
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 the h2 {
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
https://www.codecademy.com/learn/learn-css/modules/learn-css-selectors-visual-rules/cheatsheet 3/3
