Scribd
Upload
27 views

CSS Cheat Sheet

The document provides a summary of CSS selectors and properties for positioning and styling elements. It defines various types of selectors including tag names, classes, IDs, attributes, and pseudo-classes. It also outlines CSS properties for controlling the display, position, size, padding, border, text, and font of elements.

Uploaded by

Bharat Raghunathan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

CSS Cheat Sheet

The document provides a summary of CSS selectors and properties for positioning and styling elements. It defines various types of selectors including tag names, classes, IDs, attributes, and pseudo-classes. It also outlines CSS properties for controlling the display, position, size, padding, border, text, and font of elements.

Uploaded by

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

T

H EE
S
AT
E
CH

Page 1 of 2

S
S
C

CSS
C
S
heat

heet

learntoprogram .tv
tag.className

All <tag> elements with the class name


className.

#idName

The element with the id idName.

tag#idName

The <tag> element with the id idName

tag[attribute]

<tag> with attribute attribute.

tag[attribute=x]

<tag> where attribute attribute has a value of x.

Pseudo-selectors

CSS Box Model

Selectors (using <tag> and <otherTag> as an example of any tag,


such as <div>, <p>, <span>, etc.)
*

All elements

tag

All <tag> elements

tag *

All child elements of <tag>

tag otherTag

All <otherTag> elements that are within <tag>


elements.

tag, otherTag

All <tag> and <otherTag> elements.

tag > otherTag

All <otherTag> elements that are children of <tag>

tag + otherTag

All <otherTag> elements preceeded by <tag>


elements.

.className

All elements with the class name className.

tag:first-child

The first child elements of <tag> elements.

tag:first-line

The first line of <tag> elements.

tag:first-letter

The first letter of <tag> elements.

tag:hover

The <tag> element the mouse is currently


positioned over.

tag:active

The <tag> element that is currently active.

tag:focus

The <tag> element that is currently in focus.

tag:link

The <tag> element that is a link that HAS


NOT been visited.

tag:visited

The <tag> element that is a link that HAS


been visited.

tag::before

Insert content before every instance of <tag>


element.

tag::after

Insert content after every instance of <tag>


element.

Positioning
display: inline, block,
none, initial, inherit

Specifies the type of box used for the HTML


element.

float: none, left, right,


initial, inherit

Specifies if, and where, an element will float.

T
H EE
S
AT
E
CH

Page 2 of 2

S
S
C

learntoprogram .tv

clear: none, left, right,


both, initial, inherit

Specifies on which sides of an element other


floating elements are NOT allowed.

margin(-top, -right,
-bottom, -left): length,
auto, initial, inherit

Set the margin size of an element. Default to


0. Margins can be set individually (margintop: 10px) or all margins can be set at once:
margin: 5px, 10px, 15px, 20px sets margintop to 5px, margin-right to 10px, marginbottom to 15px, and margin-left to 20px.

padding(-top, -right,
-bottom, -left): length,
initial, inherit

Set the padding of an element. Default to 0.


Padding can be set individually or all at once,
as with margins.

border: border-width,
border-style, bordercolor, initial, inherit

Set the size, style, and color of an elements


border. Default size is medium, style is
none and color is the elements color.

height: length, auto,


initial, inherit

The height of an element. Does not include


padding, borders, or margins.

width: length, auto,


initial, inherit

The width of an element. Does not include


padding, borders, or margins.

min/max-width/height:
length, initial, inherit

Sets the minimum or maximum width or


height value for an element. Will override
width and height for a dynamically sized
element.

Text
text-align: left, right, center,
justify, initial, inherit

Define the horizontal alignment


of text within an element. Default
is left if text flows left to right, and
right if text flows right to left.

text-decoration: none, underline,


overline, line-through, initial,
inherit

Determine if any decoration


is applied to the text within an
element.

text-indent: length, initial, inherit

Specify the indentation for the first


line of text in a text block. Default
is 0.

text-overflow: clip, ellipsis,


string, initial, inherit

Determine how text that exceeds


the size of an element is handled.
Note that no browsers currently
support using a user-defined string
value in string.

Font
font-family: font,
initial, inherit

Set the font family using either a specific


name, like Verdana, or a generic name, like
sans-serif. Multiple fonts can be passed as
a comma separated list, and the browser will
use the first font in the list that is available.

font-size: medium,
xx-small, s-small,
small, large, x-large,
xx-large, smaller,
larger, length, initial,
inherit

Set the size of a font. length can be a


percentage, px value, or em value.

font-style: normal,
italic, oblique, initial,
inherit

Set the style for an elements text.

font-weight: normal,
bold, bolder, lighter,
(100, 200, 300, 400,
500, 600, 700, 800,
900), initial, inherit

Determine how thick the text characters


should be. For the numeric values, 400 is the
same as normal and 700 is the same as bold.

You might also like