CSS 2 VISUAL CHEAT SHEET

C

LEGEND

(pc)

★ HOW TO / 2. SELECTORS

Element

E

Child

C

Pseudo Class

Ad

Adjacent

Selector

Att

Attribute

(s) U

Universal

T

Type

D

★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

Descendant



Shorthand property

T

Notes

Designed by Antonio Lupetti • http://woorkup.com • http://www.twitter.com/woork

* Matches any element.

E Matches any E element (div, span, p,…).

Matches any F element that is a descendant of an E element.

Matches any F element that is a child of an element E.

★ HOW TO / 1. SYNTAX Include an external style sheet

E:link / E:visited

Use the following syntax to include an external style sheet on your pages:

Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

The CSS syntax is made up of three parts: a selector, a property and a value: selector {property:value}

T How to use: body {color:black}

E:active / E:hover / E:focus Matches E during certain user actions.

D (s)

C (s)

You can group selectors separating each selector with a comma.

T How to use: p, h1,h2,h3,h4,h5,h6, form {margin:0;}

Add styles to elements with particular attributes You can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute with a value of "text".

T How to use: input[type="text"] {background-color:blue}

Matches any E element with the "foo" attribute set (whatever the value).

(pc)

:after

:before

Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".

DIV.warning

A comment will be ignored by browsers.

Language specific. (In HTML, the same as DIV [class~="warning"]).

scroll | fixed | inherit

background-color

color_name | hex_number | rgb_number | transparent | inherit

background-image

Adds a style to an element that is the first child of another element.

Sets the background image for an element.

Adds a style to the first character of a text.

dynamic (pc)

:first-line

background-position

Adds a style to the first line of a text.

Sets the starting position of a background image.

:focus

url('image_url') | none | inherit

top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right | x% y% | x-pos ypos | inherit

Adds a style to an element that has keyboard input focus. :lang() (pc)

Ad (s)

Att (s)

Att (s)

background-repeat

:hover

Sets how a background image will be repeated.

Adds a style to an element when you mouse over it.

a:hover must come after a:link and a:visited in the CSS definition in order to be effective.

★ FONT

:lang

f

✽ font

Adds a style to an element with a specific lang attribute.

Sets all the font properties in one declaration.

:link Adds a style to an unvisited link.

font-family

:visited Att (s)

Adds a style to a visited link.

font-size Specifies the font size of text.

Att (s)

Absolute Size Class (s) Colours

ID (s)

font-style

★ SIZE AND COLORS Relative Size

E#myid

repeat | repeat-x | repeat-y | no-repeat | inherit

T How to use:

Specifies the font family for text.

T How to use: Matches any E element with ID equal to "myid".

Sets whether a background image is fixed or scrolls with the rest of the page.

Sets the background color of an element.

E[lang|="en"]

Comments

/* This is a comment */

background-attachment

link (pc)

E[foo~="warning"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

T How to use:

:first-letter

E[foo="warning"] Matches any E element whose "foo" attribute value is exactly equal to "warning".

Sets all the background properties in one declaration.

:first-child :first-child

E[foo] Grouping

✽ background

Adds a style to an element that is activated.

Adds content before an element.

E+F Matches any F element immediately preceded by a sibling element E.

:active

Adds content after an element.

E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined).

★ BACKGROUND

a:active must come after a:hover in the CSS definition in order to be effective.

E>F

Matches element E when E is the first child of its parent.

Basic syntax

T (s)

EF

E:first-child



U (s)

★ PSEUDO CLASSES

Specifies the font style for text.

em | ex | % cm | in | mm | pc | pt | px RGB Notation Hex notation #0033CC | RGB notation: rgb (0, 12, 12)

family-name | generic-family xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | length | % | inherit normal | italic | oblique | inherit

font-variant Specifies whether or not a text should be displayed in a small-caps font.

font-weight Specifies the weight of a font.

normal | small-caps | inherit normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

CSS 2 VISUAL CHEAT SHEET ★ BORDER

★ DIMENSION

✽ border

Sets the color of the four borders.

✽ border-style Sets the style of the four borders.

✽ border-width Sets the width of the four borders.

✽ border-top Sets all the top border properties in one declaration.

border-top-color Sets the color of the top border.

border-top-style Sets the style of the top border.

border-top-width Sets the width of the top border.

✽ border-right Sets all the right border properties in one declaration.

border-right-color Sets the color of the right border.

border-right-style Sets the style of the right border.

border-right-width Sets the width of the right border.

✽ border-bottom Sets all the bottom border properties in one declaration.

border-bottom-color Sets the color of the bottom border.

border-bottom-style Sets the style of the bottom border.

Sets the height of an element.

color_name | hex_number | rgb_number | transparent | inherit none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset length | thin | medium | thick border-top-color | border-top-style | border-top-width color_name | hex_number | rgb_number | transparent | inherit border-style

✽ border-left Sets all the left border properties in one declaration.

border-left-color Sets the color of the left border.

border-left-style Sets the style of the left border.

border-left-width Sets the width of the left border.

T The height property does not include

max-height Sets the maximum height of an element.

Sets the maximum width of an element.

bottom

Sets all the padding properties in one declaration (order: top, right, bottom, left).

Sets the bottom margin edge for a positioned box. length | % | inherit

T How to use: none | length | % | inherit

none | length | % | inherit

Sets the minimum height of an element.

min-width

length | % | inherit

length | % | inherit

Sets the bottom padding of an element.

padding-left Sets the left padding of an element.

padding-right Sets the right padding of an element.

length | % | inherit

color_name | hex_number | rgb_number | transparent | inherit

T The width property does not include

auto | length | % | inherit

padding-top Sets the right padding of an element.

Specifies the type of box an element should generate. length | % | inherit

padding, borders, or margins.

Specifies whether or not a box should float.

★ OUTLINE

Sets all the margin properties in one declaration (order: top, right, bottom, left).

T How to use:

auto | length | % | inherit

Sets all the outline properties in one declaration.

T An outline is a line that is drawn

outline-color | outline-style | outline-width | inherit

around elements (outside the borders) to make the element "stand out".

p{margin:10px 5px 15px 20px;}

overflow Specifies what happens if content overflows an element's box.

position Specifies the type of positioning for an element.

margin-bottom

auto | length | % | inherit

outline-color Sets the color of an outline.

border-width

margin-left border-left-color | borderleft-style | border-left-width

Sets the left margin of an element.

color_name | hex_number | rgb_number | transparent | inherit

margin-right

auto | length | % | inherit

outline-style Sets the style of an outline. Sets the right margin of an element.

margin-top Sets the top margin of an element.

border-width

Sets the left margin edge for a positioned box.

✽ outline

✽ margin

Sets the bottom margin of an element.

border-style

shape | auto | inherit

url | auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit none | block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inherit

auto | length | % | inherit

auto | length | % | inherit

color_name | hex_number | rgb_number | invert | inherit

none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit

Sets the width of an outline.

length | thin | medium | thick

auto | length | % | inherit

visible | hidden | scroll | auto | inherit

absolute | fixed | relative | static | inherit

right Sets the right margin edge for a positioned box.

auto | length | % | inherit

top Sets the top margin edge for a positioned box.

visibility Specifies whether or not an element is visible.

outline-width

left | right | none | inherit

left

border-width

border-style

left | right | both | none | inherit

float

★ MARGIN

color_name | hex_number | rgb_number | transparent | inherit

Specifies the type of cursor to be displayed.

display

border-style

border-bottom-color | border-bottom-style | border-bottom-width

Clips an absolutely positioned element.

length | % | inherit

width Sets the width of an element.

auto | length | % | inherit

clip length | % | inherit

cursor min-height

border-width border-right-color | border-right-style | border-right-width

clear Specifies which sides of an element where other floating elements are not allowed.

p{padding:10px 5px 15px 20px;}

padding-bottom max-width

★ POSITIONING

✽ padding auto | length | % | inherit

padding, borders, or margins.

Sets the minimum width of an element.

border-bottom-width Sets the width of the bottom border.

★ PADDING

height

Sets all the border properties in one declaration.

✽ border-color

★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

z-index Sets the stack order of an element.

auto | length | % | inherit

visible | hidden | collapse | inherit

auto | number | inherit

CSS 2 VISUAL CHEAT SHEET ★ LIST

★ ESSENTIAL REFERENCE GUIDE TO CASCADING STYLE SHEETS LEVEL 2

★ TEXT

✽ list-style

list-style-type | list-style-position | list-style-image | inherit

Sets all the properties for a list in one declaration.

T

color Sets the color of text.

★ PRINT

color_name | hex_number | rgb_number | inherit

★ REFERENCE AND CREDITS

orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element.

CSS 2 Visual Cheat Sheet

direction Specifies the text direction/ writing direction.

list-style-image

ltr | rtl | inherit

Sets the page-breaking behavior after an element.

url | outside | inherit

Specifies an image as the list-item marker.

page-break-after

auto | always | avoid | left | right | inherit

Download this Visual Cheat Sheet here: • http://woorkup.com

letter-spacing Increases or decreases the space between characters in a text.

normal | length | inherit

page-break-before Sets the page-breaking behavior before an element.

list-style-position inside | outside | inherit

Specifies where to place the listitem marker.

line-height Sets the line height.

list-style-type Specifies the type of list-item marker.

text-align Specifies the horizontal alignment of text.

auto | always | avoid | left | right | inherit

Source W3School • http://w3school.com/

normal | number | length | % | inherit

page-break-inside none | circle | disc | square | armenian | decimal | decimal-leading-zero | georgian | lower-alpha | lower-greek | lower-latin | lower-roman | upper-alpha | upper-latin | upper-roman | inherit

Designed © 2009 by Antonio Lupetti • http://woorkup.com • http://www.twitter.com/woork • http://www.facebook.com/antoniolupetti

Sets the page-breaking behavior inside an element.

auto | avoid | inherit

left | right | center | justify | inherit

widows text-decoration Specifies the decoration added to text.

none | underline | overline | line-through | blink | inherit

Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element.

text-indent Specifies the indentation of the first line in a text-block.

★ TABLE

border-collapse Specifies whether or not table borders should be collapsed.

border-spacing Specifies the distance between the borders of adjacent cells.

collapse | separate | inherit

length length | inherit

length | % | inherit

★ GENERATED CONTENT

text-shadow

content

Specifies the shadow effect added to text.

text-transform Controls the capitalization of text.

Used with the :before and :after pseudo-elements, to insert generated content. none | capitalize | uppercase | lowercase | inherit

counter-increment Increments one or more counters.

vertical-align caption-side Specifies the placement of a table caption.

top | bottom | inherit

Sets the vertical alignment of an element.

length | % | baseline | sub | super | top | text-top middle | bottom | text-bottom | inherit

counter-reset Creates or resets one or more counters.

empty-cells Specifies whether or not to display borders and background on empty cells in a table.

white-space hide | show | inherit

Specifies how white-space inside an element is handled.

quotes

Sets the layout algorithm to be used for a table.

auto | fixed | inherit

Increases or decreases the space between words in a text.

none | id number | inherit

none | id number | inherit

normal | nowrap | pre | pre-line | pre-wrap| inherit

word-spacing table-layout

none | normal | content specifications | inherit

normal | length | inherit

Sets the type of quotation marks for embedded quotations.

none | string string string string | inherit

k THE WORKING BRAIN

CSS 2 Visual Cheat Sheet - V4 - GitHub

Add styles to elements with particular attributes. You can also apply styles to HTML elements with particular attributes. The style rule below will match all input ...

331KB Sizes 6 Downloads 328 Views

Recommend Documents

CSS3 Cheat Sheet - GitHub
Border Radius vendor prefix required for iOS

gitchangelog Cheat Sheet - GitHub
new: test: added a bunch of test around user usability of feature X. fix: typo in spelling my name in comment. !minor. By Delqvs cheatography.com/delqvs/. Published 14th August, 2017. Last updated 14th August, 2017. Page 1 of 1. Sponsored by ApolloPa

Machine Learning Cheat Sheet - GitHub
get lost in the middle way of the derivation process. This cheat sheet ... 3. 2.2. A brief review of probability theory . . . . 3. 2.2.1. Basic concepts . . . . . . . . . . . . . . 3 ...... pdf of standard normal π ... call it classifier) or a decis

RTOS Threading Cheat Sheet - GitHub
If the UART is enabled, it causes a data frame to start transmitting with the parameters indicated in the. UARTLCRH register. Data continues to be transmitted ...

R Markdown : : CHEAT SHEET - GitHub
Word, or RTF documents; html or pdf based slides ... stop render when errors occur (FALSE) (default = FALSE) .... colortheme. Beamer color theme to use. X css.

Logic Engine 2 cheat sheet 3.cdr - GitHub
Plastics. (1) Rear Inner Bezel (black 1/8" acrylic). (1) Rear Outer Bezel (black 1/8" acrylic). (1) Rear Inner Screen (clear 1/16" non-glare acrylic). (1) Rear Outer Screen (clear 1/16" non-glare acrylic). (2) Front Inner Bezel (black 1/8" acrylic).

JavaScript Cheat Sheet by DaveChild - Cheatography.com - GitHub
Start of string. $. End of string . Any single character. (a|b) a or b. (...) ... Page 1 of 2. Sponsored by Readability-Score.com. Measure your website readability!

ES6 and Beyond Cheat Sheet - GitHub
Warning! If array or object, the reference is kept constant. If the constant is a reference to an object, you can still modify the content, but never change the variable ...

jQuery 17 Visual Cheat Sheet_v6 - GitHub
Get the HTML contents of the first element in the set of matched elements. ..... Bind two or more handlers to the matched elements, to be executed on alternate ...

git cheat sheet - Cheat-Sheets.org
git clone ssh://[email protected]/repo.git. Create a new local repository. $ git init. LOCAL CHANGES. Changed files in y our working directory. $ git status.

HTML5 Canvas Cheat Sheet [.pdf] - Cheat-Sheets.org
HTML5 Canvas Cheat Sheet v1.1. Page 2. Colors, styles and shadows. Attributes. Name. Type. Default. strokeStyle any black. fillStyle any black. shadowOffsetX.

jQuery-Visual-Cheat-Sheet-1.4.2.pdf
a. :text Selector. Selects all elements of type text. a. ❉ CORE / 1. THE jQUERY FUNCTION. jQuery(). Accepts a string containing a CSS selector.

github-git-cheat-sheet (1).pdf
git config --global user.email "[email address]". Sets the email you ... Start a new repository or obtain one from an existing URL ... github-git-cheat-sheet (1).pdf.

Cheat sheet Services
Create a Version of your current container, and test it out on your live site by using Preview or Debug mode. Navigate around your site and see if the rules and tags are acting the way you expect. Migrate by removing hard-coded tags: You're almost re

Meterpreter Cheat Sheet - SCADAhacker
Page 1 ... Displays network interfaces information meterpreter> route. View and modify networking routing table meterpreter> portfwd. Establish port forwarding.

github-git-cheat-sheet (1).pdf
Download. Connect more apps... Try one of the apps below to open or edit this item. github-git-cheat-sheet (1).pdf. github-git-cheat-sheet (1).pdf. Open. Extract.

Reschedule Cheat Sheet
desire to meet with. • You've realized that your account has a meeting scheduled more than once with the same company. • You have reached your outstanding ...

jQuery Cheat Sheet
6. Traversing. 7. Events. 8. Effects. 10. AJAX. 11. Core. 12 of 2 13 ... DOM Insertion, Inside .append() .appendTo() .html() .prepend() .prependTo() .text().

TOP 150 CHEAT SHEET
2 Ezekiel Elliott. DAL. 8. RB. 52 Lamar Miller. HOU. 10. RB ... 62 Dion Lewis. TEN. 8. RB PPR. 112 Kenny Stills .... Ezekiel Elliott. DAL. 3. 7. A.J. Green. CIN. 4. 11.

scalaz "For the Rest of Us" Cheat Sheet - GitHub
Aug 29, 2012 - Page 1 ... Then in your .scala files: 1. 1 Note that this is for scalaz 6. The imports (and ... Make your code a bit nicer to read. Name Scala scalaz.

Cheat Sheet Subnetting.pdf
There was a problem previewing this document. Retrying... Download. Connect more apps... Try one of the apps below to open or edit this item. Cheat Sheet Subnetting.pdf. Cheat Sheet Subnetting.pdf. Open. Extract. Open with. Sign In. Details. Comments

vi / vim graphical cheat sheet
F "back" fwd. G eof/ goto ln Hscreen top. J join lines. K help. L screen bottom ... version at http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html.

CSS3 Cheat Sheet - Smashing Magazine
display none | inline | block | inline- block | list-item | run-in | compact | table | inline- table | table-row-group | table-header-group | table- footer-group | table-row |.Missing:

Google+ Cheat Sheet - G Suite
3 Find or follow people. 4 Follow or create collections, which group posts around a topic. Learning Center gsuite.google.com/learning-center.