Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
65 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
Available Formats
Download as PDF, TXT or read online on Scribd
65 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
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