CSS CheatSheet
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 individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.
/*
CSS declaration format:
property-name: value;
*/
/* CSS declarations */
text-align: center;
color: purple;
width: 100px;
CSS Rule Sets
A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1
, points to an HTML element. The declaration(s), which in this example are color: blue
and text-align: center
style the element with property and value. The rule set is the main building block of a CSS sheet.
h1 {
color: blue;
text-align: center;
}
Font Family
The font-family
CSS property is used to specify the typeface in a ruleset. Fonts must be available to the 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 in quotes.
h2 {
font-family: Verdana;
}
#page-title {
font-family: "Courier New";
}
Font Size
The font-size
CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.
font-size: 30px;
Font Weight
The font-weight
CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold
or normal
.
font-weight: bold;
Text Align
The text-align
CSS property can be used to set the text alignment of inline contents. This property can be set to these values: left
, right
, or center
.
text-align: right;
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 color name supported in CSS like green
or blue
. Also, 3 digits or 6 digit color codes like #22f
or #2a2aff
can be used to set the color.
p {
color : #2a2aff ;
}
span {
color : green ;
}
Color Name Keywords
Color name keywords can be used to set color property values for elements in CSS.
h1 {
color: aqua;
}
li {
color: khaki;
}
Background Color
The background-color
CSS property controls the background color of elements.
background-color: blue;
Opacity
The opacity
CSS property can be used to control the transparency of an element. The value of this property ranges from 0
(transparent) to 1
(opaque).
opacity: 0.5;
Background Image
The background-image
CSS property sets the background image of an element. An image URL should be provided in the syntax url("moon.jpg")
as the value of the property.
background-image: url("nyan-cat.gif");
Resource URLs
In CSS, the url()
the function is used to wrap resource URLs. These can be applied to several properties such as the background-image
.
background-image: url("../resources/image.png");