Cascading Style Sheets, or CSS for short, is a style sheet language written in a markup language. CSS defines the presentation, look and formatting elements of Web documents, such as the layout, colors and fonts.
CSS syntax is comprehensive, and it is not easy to always know the exact syntax, or know all the available CSS properties and corresponding values. To help CSS developers and designers, Toptal created a quick reference guide and offered it to the community as a free download. The CSS reference guide includes CSS syntax, the most important selectors, properties, sizes and units, and other useful CSS information in a short and informative format. We hope you will find the CSS cheat sheet a valuable resource.
You can also check the Toptal resource pages for additional information on common CSS mistakes, a CSS hiring guide, CSS interview questions and CSS tips and best practices.
CSS Cheat Sheet
Syntax
|
Box Model
| |||
/* Comments */
@media type {
selector {
property: value;
}
}
Note: media type is optional
|  | |||
Inline Style
<tag style="property: value;">
| ||||
Embedded Style
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>
| ||||
External Style Sheet
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
|
Boxes
| |||
margin
|
margin-top
margin-right margin-bottom margin-left | |||
Selectors
|
padding
|
padding-top
padding-right padding-bottom padding-left | ||
*
|
All elements
| |||
tag
|
All tag elements
|
border
|
border-top
border-right border-bottom border-left | |
tag *
|
All elements within tag
| |||
tag tag2
|
tag2 elements within tag
|
border-color
|
border-top-color
border-right-color border-bottom-color border-left-color | |
tag, tag2
|
All tag and tag2 elements
| |||
tag > tag2
|
tag2 is a child of tag
|
border-style
|
border-top-style
border-right-style border-bottom-style border-left-style | |
tag + tag2
|
tag2 preceded by tag
| |||
.class
|
Elements with class ‘class’
|
border-width
|
border-top-width
border-right-width border-bottom-width border-left-width | |
tag.class
|
All tags with class ‘class’
| |||
#id
|
Element with id ‘id’
|
Size and colors
| ||
tag#id
|
Tag with id ‘id’
|
Relative sizes
|
em | rem | ex | ch
vw | vh | vmin | vmax | %
| |
Pseudo-selectors
| ||||
:active
|
Adds style to active element
|
Absolute sizes
|
cm | mm | in
px | pt | pc
| |
:after
|
Adds content after element
| |||
:before
|
Ads content before element
|
Colors
|
Hex #ff00ff
| |
:first-child
|
Adds style to first child
|
RGB rgb(255,0,255)
| ||
:first-letter
|
Adds style to first character
|
Positioning
| ||
:first-line
|
Adds style to first line
|
position
|
absolute | fixed | relative | static | inherit
| |
:focus
|
Adds style to focused element
| |||
:hover
|
Adds style when mouse is over
|
float
|
left | right | none | inherit
| |
:link
|
Adds style to unvisited link
| |||
:visited
|
Adds style to visited link
|
top, right,
bottom, left |
Sets the offset from the edge
| |
Text
| ||||
font-family
|
Specifies the font family
|
clear
|
left | right | both | none | inherit
| |
font-size
|
Specifies the font size
| |||
font-style
|
normal | italic | oblique | inherit
|
display
|
Specifies element placing in the document flow
| |
font-variant
|
normal | small-caps | inherit
|
overflow
|
visible | hidden | scroll | auto | inherit
| |
font
-weight
|
normal | bold | bolder | lighter | int (100- 900) | inherit
| |||
visibility
|
visible | hidden | collapse | inherit
| |||
color
|
Sets the color of text
| |||
line-height
|
normal | int | % | inherit
|
z-index
|
auto | int | inherit
| |
text-align
|
left | right | center | justify | inherit
|
Dimensions
| ||
height
|
auto | int | % | inherit
| |||
text-
decoration
|
none | underline | overline | line-through | blink | inherit
|
max-height
|
none | int | % | inherit
| |
max-width
|
none | int | % | inherit
| |||
text-indent
|
int | % | inherit
|
min-height
|
int | % | inherit
| |
text-
transform
|
none | capitalize | uppercase | lowercase | inherit
|
min-width
|
int | % | inherit
| |
width
|
auto | int | % | inherit
| |||
vertical
-align
|
int | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit
|
Other
| ||
background
|
Format:
background (color) (image)
(repeat) (position)
| |||
white
-space
|
normal | nowrap | pre | pre-line | pre-wrap| inherit
| |||
cursor
|
Set the type of cursor
| |||
word-spacing
|
normal | length | inherit
|
quotes
|
Set type of quotation marks
| |
This article was originally posted on Toptal
No comments:
Post a Comment
your comments.....