Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
25 views

CSS-visual Rules - Cheatsheet-From Code Academy

This document provides examples and explanations of common CSS properties for styling elements including font properties, color properties, background properties, opacity, image properties, and rule sets. It demonstrates how to set values for these properties in declarations.

Uploaded by

Don
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

CSS-visual Rules - Cheatsheet-From Code Academy

This document provides examples and explanations of common CSS properties for styling elements including font properties, color properties, background properties, opacity, image properties, and rule sets. It demonstrates how to set values for these properties in declarations.

Uploaded by

Don
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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 /*
style properties and construct rules to apply to CSS declaration format:
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 values can be many di�erent units or types font-size: 30px;
such as pixels.

Background Color
The background-color CSS property controls the
background color of elements. background-color: blue;

!important Rule
The CSS !important rule is used on declarations to
override any other declarations for a property and #column-one {
ignore selector speci�city. !important rules will ensure width: 200px !important;
that a speci�c 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 the
transparency of an element. The value of this property opacity: 0.5;
ranges from 0 (transparent) to 1 (opaque).

Font Weight
The font-weight CSS property can be used to set the
weight (boldness) of text. The provided value can be a font-weight: bold;
keyword such as bold or normal .
Text Align
The text-align CSS property can be used to set the
text alignment of inline contents. This property can be text-align: right;
set to these values: left , right , or center .

CSS Rule Sets


A CSS rule set contains one or more selectors and one
or more declarations. The selector(s), which in this h1 {
example is h1 , points to an HTML element. The color: blue;
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
element can be set in CSS. The value can be a valid p {
color name supported in CSS like green or blue . color : #2a2aff ;
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
URLs. These can be applied to several properties such background-image: url("../resources
as the background-image . /image.png");

Background Image
The background-image CSS property sets the
background image of an element. An image URL should background-image: url("nyan-cat.gif");
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
typeface in a rule set. Fonts must be available to the h2 {
browser to display correctly, either on the computer or font-family: Verdana;
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
property values for elements in CSS. h1 {
color: aqua;
}

li {
color: khaki;
}

You might also like