Scribd
Upload
266 views2 pages

CSS Box Model & Selectors Guide

This document provides a cheat sheet on CSS syntax and properties. It includes sections on CSS syntax, the box model, selectors, pseudo-selectors, sizing and colors, positioning, text formatting, and other CSS properties. CSS can be applied with inline styles, embedded styles, or external style sheets. The box model accounts for margins, borders, padding and content. Selectors allow targeting elements by tag name, class, ID, and other attributes. Pseudo-selectors modify elements based on states like hover or focus. Common text and formatting properties are also outlined.

Uploaded by

Victor Frankenstein
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
266 views2 pages

CSS Box Model & Selectors Guide

This document provides a cheat sheet on CSS syntax and properties. It includes sections on CSS syntax, the box model, selectors, pseudo-selectors, sizing and colors, positioning, text formatting, and other CSS properties. CSS can be applied with inline styles, embedded styles, or external style sheets. The box model accounts for margins, borders, padding and content. Selectors allow targeting elements by tag name, class, ID, and other attributes. Pseudo-selectors modify elements based on states like hover or focus. Common text and formatting properties are also outlined.

Uploaded by

Victor Frankenstein
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

CSS Cheat Sheet

Syntax
/* Comments */
@media type {
selector {
property: value;
}
}

Box Model
Note:
media type is optional

TOP
BORDER

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>
Selectors
*

All elements

tag

All tag elements

tag *

All elements within tag

tag tag2

tag2 elements within tag

tag, tag2

All tag and tag2 elements

tag > tag2

tag2 is a child of tag

tag + tag2

tag2 preceded by tag

.class

Elements with class class

tag.class

All tags with class class

#id

Element with id id

tag#id

Tag with id id

CONTENT

PADDING
MARGIN
BOTTOM
Boxes

margin

margin-top
margin-right
margin-bottom
margin-left

padding

padding-top
padding-right
padding-bottom
padding-left

border

border-top
border-right
border-bottom
border-left

border-color

border-top-color
border-right-color
border-bottom-color
border-left-color

border-style

border-top-style
border-right-style
border-bottom-style
border-left-style

border-width

border-top-width
border-right-width
border-bottom-width
border-left-width

RIGHT

HEIGHT

Inline Style
<tag style="property: value;">

LEFT

WIDTH

Pseudo-selectors

Size and colors


Relative
sizes

em | rem | ex | ch
vw | vh | vmin | vmax | %

Absolute
sizes

cm | mm | in | px | pt | pc

Ads content before element

:first-child

Adds style to first child

Colors

:first-letter

Adds style to first character

:first-line

Adds style to first line

:active

Adds style to active element

:after

Adds content after element

:before

Hex #ff00ff
RGB rgb(255,0,255)

Positioning
position

absolute | fixed | relative |


static | inherit

float

left | right | none | inherit


Sets the offset from the edge

:focus

Adds style to focused element

:hover

Adds style when mouse is over

:link

Adds style to unvisited link

top, right,
bottom, left

:visited

Adds style to visited link

clear

left | right | both | none | inherit


I fixed the document now

display

Specifies element placing in


the document flow

overflow

visible | hidden | scroll | auto |


inherit

visibility

visible | hidden | collapse |


inherit

z-index

auto | int | inherit

Text
font-family

Specifies the font family

font-size

Specifies the font size

font-style

normal | italic | oblique | inherit

font-variant

normal | small-caps | inherit

font-weight

normal | bold | bolder | lighter |


int (100- 900) | inherit

Dimensions

color

Sets the color of text

height

auto | int | % | inherit

line-height

normal | int | % | inherit

max-height

none | int | % | inherit

text-align

left | right | center | justify |


inherit

max-height

none | int | % | inherit

textdecoration

none | underline | overline |


line-through | blink | inherit

max-width

none | int | % | inherit

min-height

int | % | inherit

text-indent

int | % | inherit

min-width

int | % | inherit

texttransform

none | capitalize | uppercase |


lowercase | inherit

width

auto | int | % | inherit

vertical
-align

int | % | baseline | sub |


super | top | text-top
middle | bottom | text-bottom | inherit

background

Format:
background (color) (image)
(repeat) (position)

white
-space

normal | nowrap | pre |


pre-line | pre-wrap| inherit

cursor

Set the type of cursor

wordspacing

normal | length | inherit

quotes

Set type of quotation


marks

Other

You might also like