Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
48 views

CSS Cheat Sheet

- CSS is used to style and lay out web pages through selectors and declarations that specify properties and values. There are three ways to insert CSS: external, internal, and inline stylesheets. - The box model describes the sizing and positioning of elements using properties like width, height, padding, borders, and margins. Pseudo-selectors like :hover apply styles during certain states. - Common properties include color, font, text, background, position, and visibility. Formatting can be applied to elements, classes, IDs, and inline. Units, media types, and comments are also part of CSS syntax.

Uploaded by

slm4life
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

CSS Cheat Sheet

- CSS is used to style and lay out web pages through selectors and declarations that specify properties and values. There are three ways to insert CSS: external, internal, and inline stylesheets. - The box model describes the sizing and positioning of elements using properties like width, height, padding, borders, and margins. Pseudo-selectors like :hover apply styles during certain states. - Common properties include color, font, text, background, position, and visibility. Formatting can be applied to elements, classes, IDs, and inline. Units, media types, and comments are also part of CSS syntax.

Uploaded by

slm4life
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

CSS CHEAT SHEET

Shorthand*
background border border-bottom border-left border-right border-top font list-style margin padding S nta selector {property: value; E ternal St le Sheet <link rel="stylesheet" type="text/css" href="style.css" /> Internal St le <style type="text/css"> selector {property: value; </style> Inline St le <tag style="property: value"> border-w idth Width of the border

SYNTAX

BOX MODEL
height; w idth; margin-top; margin-right; margin-bottom; margin-left; padding-top; padding-right; paddingbottom; padding-left;

Comments
/* Comment */

BORDER GENERAL
border-style border-color
dashed; dotted; double; groove; inset; outset; ridge; solid; none

Pseudo Selectors
:hover :active :focus :link :visited :first-line :first-letter

Class ID div span color cursor display overflow

String preceded by a period String preceded by a hash mark Formats structure or block of text Inline formatting Foreground color Appearance of the cursor
block; inline; list-item; none

Color of the border

POSITION
clear float left top position z-index Any floating elements around the element?
both, left, right, none

Floats to a specified side


left, right, none

How content overflow ing its box is handled


visible, hidden, scroll, auto

The left position of an element


auto, length values (pt, in, cm, px)

Media T pes
all braille embossed handheld print projection screen speech tty tv

visibility

visible, hidden

The top position of an element


auto, length values (pt, in, cm, px)

FONT
font-style font-variant font-w eight font-size font-family
Italic, normal normal, small-caps bold, normal, lighter, bolder, integer (100-900)

static, relative, absolute

Element above or below overlapping elements?


auto, integer (higher numbers on top)

BACKGROUND
background-color background-image background-repeat background-attachment background-position Background color Background image
repeat, no-repeat, repeat-x, repeat-y

Size of the font Specific font(s) to be used

Units
Length % em pt letter-spacing line-height text-align

TEXT
Space betw een letters Vertical distance betw een baselines Horizontal alignment

Background image scroll w ith the element?


scroll, fixed (x y), top, center, bottom, left, right

You might also like