Scribd
Upload
29 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views2 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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