Scribd
Upload
71 views

Learn CSS - Visual Rules Cheatsheet - Codecademy

The document discusses various CSS declarations and properties that can be used to style elements, including font-size, background-color, opacity, and more. It provides examples of CSS syntax for setting properties like color, text-align, and background-image. The cheat sheet also covers CSS concepts like rule sets, using the !important rule, and setting font properties.

Uploaded by

manojschavan6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
71 views

Learn CSS - Visual Rules Cheatsheet - Codecademy

The document discusses various CSS declarations and properties that can be used to style elements, including font-size, background-color, opacity, and more. It provides examples of CSS syntax for setting properties like color, text-align, and background-image. The cheat sheet also covers CSS concepts like rule sets, using the !important rule, and setting font properties.

Uploaded by

manojschavan6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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

You might also like