CSS Cheatsheet

#Standards

CSS W3C standards are listed at: http://www.w3.org/TR/#tr_CSS

CSS versions are called levels.

Versions 1 and 2 were monolithic specs. Versions 3 and 4 were split up into modules that can evolve and be versioned and implemented separately, but it is still common to refer to all modules of a given level as CSS3 or CSS4.

As of early 2014:

• CSS2 is all REC http://www.w3.org/TR/CSS2/
• Many modules of CSS3 have gone past WD and have wide browser support, a few are REC.
• Some level 4 modules exist and are WD, with little browser support.

Official W3C test suite: http://www.w3.org/Style/CSS/Test/Overview.en.html

Important modules include:

• http://www.w3.org/TR/2014/CR-css-syntax-3-20140220/ CSS core syntax. CR.
• http://www.w3.org/TR/css3-selectors/. Selectors 3 REC: how to select specific elements. Also important for JavaScript DOM manipulation. Level 4 WD: http://www.w3.org/TR/selectors4/
• Backgrounds and borders: http://www.w3.org/TR/css3-background/
• http://www.w3.org/TR/css-style-attr/. Style attribute: what can go into the global HTML style="" attribute:
• http://www.w3.org/TR/css-fonts-3/

CSS is not Turing complete, unless you consider user interactions to be part of the Turing machine, which does not make for a good hacking method unless you the end user wants to be hacked: http://stackoverflow.com/questions/2497146/is-css-turing-complete

Validator:http://www.css-validator.org/#validate_by_input

#XML

#SVG

CSS can be used to style arbitrary XML documents in addition to HTML, including SVG.

Like in HTML, this can be done through external, embedded or inline styles.

The following W3C document is a tutorial on how to do it: http://www.w3.org/Style/styling-XML.en.html

#Vendor prefixes

Vendor prefixes are prefixes added before new properties, standard or not, while they are still in test phase. Once they leave test phase, they may be removed by the browser developers.

Vendor prefixes used by the main modern browsers are:

• Firefox: -moz-
• Chrome/Safari/iOS: -webkit-
• Opera: -o-
• Internet Explorer: -ms-

Most of them are quite obvious, except maybe for WebKit, which is the rendering engine for both Safari and Chrome.

Full list: http://stackoverflow.com/questions/5411026/list-of-css-vendor-prefixes

CSS2 has a non-normative section listing important vendor prefixes: http://www.w3.org/TR/CSS21/syndata.html#vendor-keyword-history

#location

The following CSS affects a document:

• Author CSS: rules written by the web designer. They can be either:
  • inline: put directly on the element it will affect. Cannot contain selectors or parenthesis.
  • internal / embedded
  • #external: put on external files, used via the link tag.
• User: a local stylesheet that the browser's user tells the browser where to find in the HD.
• User agent (most often the browser):a default internal stylesheet for the browser

#external

With link on the head.

Can be emulated with the @import at-rule.

Why link and not script src: http://stackoverflow.com/questions/7122492/why-script-src-min-js-script-but-link-rel-stylesheet-href-min-why-no

#embedded

#internal

Put on head inside a script element, or since HTML5 in body if the scoped attribute is present.

Affects a single file.

Before HTML5, must in theory be placed on the head element, and affect only current file.

Many browsers supported it in the body anyways, In both cases, the style affects the entire body. This however may make the browser re-render things it has already rendered because of a change in style.

In HTML5, style tags with scoped attribute can be placed on the body, and affect only child elements.

The type="txt/css" used to be mandatory, but became the default on HTML5 since CSS prevailed.

#scoped

Very low browser support as of 2013 but great thing: sets scope of a style block in the body to only the parent element. Example:

You cannot include an external sheet directly with this, but you can do it with

#Precedence

#Specificity

This describes how user agents should decide the value of a property when multiple values may apply.

First read this good tutorial to get the general idea.

Next attack the official CSS2 docs (quite readable), and in particular the cascade part.

  Slightly paraphrasing the standard to make it more readable:

  - If the cascade results in a value, use it. See below for what the cascade is.

  - Otherwise, if the property is inherited and the element is not the root of the document tree,
    use the computed value of the parent element.

    Not all properties are inherited.

  - Otherwise use the property's default value.

  #cascade

  The cascade works as follows:

  - Find all declarations that apply to the element in question.

  - Sort according to importance (normal or important) and origin (author, user, or user agent). In ascending order of precedence:

    - user agent declarations
    - user normal declarations
    - author normal declarations
    - author important declarations
    - user important declarations

    Note how insanely user normal and important declarations are split across author declarations.

  - Sort rules with the same importance and origin by specificity of selector:
    more specific selectors will override more general ones.

    elements and classes are counted as normal elements and classes, respectively.

    More on specificity below.

  - Finally, sort by order specified:if two declarations have the same weight, origin and specificity, the latter specified wins.
    Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

  #specificity

  Specificity is a quadruple (a,b,c,d) where each letter is the number of:

  - a:inline (inside style) declarations of the property
  - b:matching ID selectors
  - c:matching (class + attribute + class count) selectors
  - d:matching (type + element count) selectors

  The larger quadruple has higher specificity.

  Note about the counts:

  - Combinators:+, >, ~ don't count by themselves. Selectors on both of their sides do count equally.
  - The universal selector * does not count.
  - :not itself does not count, only what is inside of it.

  Example:

  On the stylesheet:

    #id0.class0
  

#Selectors

Space: any descendant: a b:b is any descendant of a

a > b:b is a child of a

#+

#plus

#next sibling

First next sibling. 1 0 1 2 1

#~

#tilde

#any sibling

Every next sibling 2 0 1 2 1 2

#previous element selector

There is no selector for previous siblings as of CSS3. It will be possible via Selectors level 4 via the exclamation mark. . Probable rationale:such selector requires the browser to parse backwards in order to make a change, meaning that browsers may have to render an element twice.

#,

#comma

Has very low precedence. It is necessary to repeat both sides fully. Only current solution are SASS-like languages.

#star

#asterisk

#*

Any element. Generally bad idea since too general.

a *: any descendant of a

a * b:b that is a descendant of a of level 2 or more

#[]

#square brackets

#attribute selector

Family of attribute based selectors:

• [attribute]: has attribute
• [attribute="value"]: has attribute with given value
• ~=: contains value, space delimited, like class
• |=: starts with value, followed by space or hyphen
• ^=: starts with value, not necessarily followed by space or hyphen
• $=: ends with value, preceded by space or hyphen
• *=: ends with value, not necessarily preceded by space or hyphen

#pseudo element

Pseudo elements are selectors for things that are not real HTML elements, such as the first letter of the content of a paragraph.

Before CSS3, pseudo elements were specified with a single colon as in tag:element. After CSS3, they use double colon as in tag::element to differentiate them from pseudo classes more clearly. Single colon syntax is still supported.

Pseudo element styles cannot be specified inline.

#first letter

first letter

#selection

Style of the selected text.

Not in CSS3, but almost went in and has reasonable browser support. Might come back later.

Only supports a few attributes.

-moz- required on Firefox.

Select this text!

#pseudo classes

Classes that are not really classes such as a:visited, a:link for links.

#hover

Possible to select elements based on hover status of another.

Siblings: Hover me! to make me red

First child: Hover me! to make me red

#checked

For check boxes and radio button inputs.

Click the checkbox!

#focus

#last child

the last child nested last child

#nth-child

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo

One given nth child nth-child(2):

text 1 2 3 nested text 1 2 3

All nth children in an arithmetic progression given by an + b, a default to 1, and n is a fixed symbol.

There are also two special constants even and odd which are shortcuts for 2n and 2n+1.

1 2 3 4 5 6 7 8 9

#not

Selector that negates a property.

As of CSS3, can only take *simple selectors*: http://www.w3.org/TR/css3-selectors/#negation

So for example, no: a:not(div.nothere *) to avoid targeting all elements inside a div: you have to duplicate code.

Pseudo selectors are out too.

#target

Matches only the element whose id matches the #id of the current URL.

target1 target1

target2 target2

Major application: making modals

select by

#content

#contains

As of CSS3 it is not possible to select by content: http://stackoverflow.com/questions/1520429/css-3-content-selector

:contains() appeared in some CSS3 drafts but didn't make it, maybe in CSS4...

One special case is possible however: :empty.

#empty

#only-child

#parent

There is not parent selector as of CSS3 maybe in CSS4. Probable rationale: such selector requires the browser to parse backwards in order to make a change, meaning that browsers may have to render an element twice.

Select arbitrary elements when something happens

No, it is not possible, only elements that have a direct child / sibling relationship with the selected one.

http://stackoverflow.com/questions/1824030/could-it-be-possible-to-make-css-selector-affect-other-elements-in-the-page-with

Why someone might want to do it: when I hover element A, element B disappears.

#root

#:root

In HTML, always (TODO check: iframes?) refers to the root html element.

However in SVG, it refers to the SVG root element.

#color specification

Colors are used in many places across CSS, but all of them can take the same values:

• named: red, BurlyWood, transparent. Case insensitive.
• 6 digit hex: #RRGGBB, #0088FF
• 3 digit hex: #RGB, #08F, same as #RRGGBB
• rgb function: rgb(0, 128, 256)
• rgba function for the transparency: rgb(0, 128, 256, 0.3)

#currentColor

CSS3 color: http://www.w3.org/TR/css3-color/#currentcolor

Use the current text color.

Cannot be tricked to act as an arbitrary variable: http://css-tricks.com/currentcolor/.

Used to be -moz-use-text-color before it was standardized in CSS3.

#transparency

#alpha

opacity vs rgba: http://stackoverflow.com/questions/13385492/css-opacity-vs-rgba-which-one-is-better

#opacity

Affects the element, it's border and all of it's children, including inner text.

If a parent has opacity 0.5 and the child also, the effective opacity for the child is 0.25.

#rgba

#Measure units

#Length units

http://css-tricks.com/the-lengths-of-css/

The value 0 does not need an unit.

In addition to the common length measures, some properties can also have special keyword values, like font-size's small and medium.

#px

Avoid them at all costs: use percentage or font relative units instead as those scale better across devices.

http://stackoverflow.com/questions/20298221/using-cm-in-responsive-media-queries This used to correspond to the actual hardware pixel width, but this is changing with new hardware that has higher pixel densities. See also device-pixel-ratio.

#75%, 125%: multiplies the would be font size by a percentage

Physical units

#in

#cm

#mm

Defined in terms of pixels. Never use them.

Font relative units

You should always use those.

#em

Height of current font. Historically, width of letter M, which is also equal to it's height in many fonts.

#rem

Like em but always relative to the root element :root.

#ex

Height of the x of current font == height of all lowercase letters in most fonts. 1ex == 0.5em in many fonts. Some browsers just define it to be 0.5em. So don't rely on it.

#ch

#ch: width of the character 0 of the font.

Low support as of 2014: http://www.quirksmode.org/css/units-values/.

Most useful with mono-space fonts styles, where all the widths are equal.

Good workaround: use content to set the number of chars, put it on background so that the chars are not selectable, and set the front div transparent.

#Point

#pt

1/72 inch.

How is this font-relative then?

#Pica

#pc

1/12 point.

#px

#vh

#vw

#vmin

#vmax

Units relative to the viewport.

#properties

#initial

Any property can be set to its default CSS value by the initial special value.

#inherit

Some properties are inherited by default, others not. If this property is given, it forces to inherit the value.

Example: border is not inherited by default:

Good way to DRY things out in pure CSS.

#text

#font properties

First understand some font parameters:

#color

The color of the font.

#line-height

Minimum vertical space lines occupy.

Unitless means percentage of current font size.

Characters are centered vertically on the line height.

Default value: around 1.2, can vary slightly with the font.

It is better to always use unit less values.

font-size larger than line-height: occupied space is given by line-height, font overflows neighbouring elements / lines:

#font-size

At line-height:1, baseline can overflow slightly to lower div, but a small margin is left at the top.

In addition to the standard length measures, the font size can also be one of the following keywords:

• Absolute size: xx-small | x-small | small | medium | large | x-large | xx-large. Each one corresponds to a size factor, medium being the default of 1.
• Relative size: larger | smaller. Move to the next / previous font size relative to the current one.

TODO check: the value is absolute, not relative to current size. The multiplier is relative to the browser's defaults?

It is probably a better idea to just stick to em everywhere, and then set the absolute value once on the root element.

#font-weight

How thick the characters are.

font-weight bold

font-weight normal

font-weight 900

#font-family

List of fonts, if first not present, fall back to next.

Fonts can either be precise font names, or generic families. Start with the more specific and then let fall back to more general ones.

font-family Courier New

Font loading

There is a module dedicated to that: http://www.w3.org/TR/css-font-loading-3/

#font-stretch

Stretch the font horizontally. Only a few keywords are possible, and if not present in the font it may happen that nothing changes.

ultra-condensed

ultra-stretched

#text-decoration

#text-transform

#text-align

Set the horizontal alignment for inner text and inline elements.

Center text vertically

http://stackoverflow.com/questions/8865458/how-to-align-text-vertical-center-in-div-with-css

line-height == height. Good implementation status. Not DRY, but can be made so with SASS.

display:table-cell + vertical-align:middle. Lower browser support, but dry. Makes the element like display:inline-block.

#wrap

#white-space

          New lines  Spaces and tabs  Text wrapping
normal    Collapse   Collapse         Wrap
pre       Preserve   Preserve         No wrap
nowrap    Collapse   Collapse         No wrap
pre-wrap  Preserve   Preserve         Wrap
pre-line  Preserve   Collapse         Wrap
      

#white-space:pre

Achieves similar effect to the pre HTML element, but:

• pre ignores the first character if it is a newline, while white-space:pre does not.
• Firefox on copy paste does not preserve newlines for white-space:pre, but does for pre. https://bugzilla.mozilla.org/show_bug.cgi?id=116083

Just because of the Firefox "bug", it is better to use pre elements instead of the CSS.

Newline before and after style="white-space:pre"

#tab-size

Specify the size of the tab character.

Default value: 8.

#white-space-collapse

#bikeshedding

TODO

#overflow-wrap

#word-wrap

word-wrap is the old name of the property, which was in older CSS3 drafts and has been widely implemented.

overflow-wrap is the current name in the CSS3 draft.

Values:

• normal: lines can only wrap at the default points like spaces.
• break-word: lines can wrap at any character. This only has to happen if there would not be enough space to fit the line in the container: browsers still prefer to break at spaces where possible.

Normal:

overflow-wrap:break-word:

word-wrap:break-word:

#hyphen

word-hyphen that adds hyphens. CSS L3 working draft as of 2014: http://www.w3.org/TR/css3-text/#hyphenation.

#word-break

Apparently for CJK: http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break

#background

#background-image

background image

In many situations such as Icons, CSS background images are used instead of img tags. Discussion: CSS background images vs img If you are going to use CSS, then you will likely to use background-size:contain; background-repeat:no-repeat; to control well the image size.

CSS sprites:put many smaller images on a single image to make less HTTP requests

quotes are optional but if you don't use them you have to escape many special chars, so just use them always: http://stackoverflow.com/questions/851724/css-background-image-what-is-the-correct-usage

It is possible to use data: URIs for the background image:

SVG background:

Center horizontally:

#background-color

#gradient

There are linear and radial gradients, repeating or not, on modern browsers.

Linear red blue:

Linear to left top red blue:

#content

#before

#after

Modifies tag content.

While it shows on the page, it is not part of the DOM, so it may not be selectable by Javascript, or found on browser page searches. TODO check.

inner

Does not work without ::before or ::after.

content is the only current application of ::before and ::after only have effect if together with content. TODO check

#box model

Describes what are margins, borders and paddings.

margin and padding can take 1, 2, 3 or 4 arguments: http://www.htmldog.com/reference/cssproperties/margin/. They are just shorthands for setting the four margins at once.

#collapse margins

If two vertical margins are adjacent, only the largest one is used: http://www.w3.org/TR/CSS2/box.html

TODO make example work. First need to better understand vertical align...

Only works for vertical margins. Does *not* work for horizontal margins nor padding + margin. (TODO what to do on those cases).

#border

Duplicate border problem

Borders side by size will both appear:ab

For tables, the border collapse property solves this. For other elements, see some workarounds here:http://stackoverflow.com/questions/5737693/simulating-border-collapse-in-lists-no-tables

-1px margin trick seems to be the only alternative to manually setting either one border or another. ab

#border-radius

#border-width

In addition to the common length specifiers, can also be one of the following keywords: small | medium | thick.

The exact thickness of those keywords is unspecified except that small <= medium <= thick.

#outline

Similar to border but: http://stackoverflow.com/questions/1158515/difference-between-outline-and-border

On inline elements that wrap, outline closes the box, border doe not:

a a a a a a a a a a a a a a a a a a o o o o o o o o o o o o o o o o o o a a a a a a a a a a a a a a a a a a b b b b b b b b b b b b b b b b b b

Outline does not take space, it simply goes over other elements.

After outline. After outline. After outline. After outline. After outline.

The outline stays outside of the border:

Outline does not support some border properties like radius and styling individual sides.

#outline-offset

Offset only: not on border.

#width

#height

Inline elements ignore width and height properties. One solution is to set display to inline-block or block.

If phrasing contents cannot break at a point and are larger than the width, they just spill out:

#max-width

If width > max-width, use max-width instead.

If the screen becomes smaller than the max-width, the div shrinks.

Great for mobile / browser websites, where you want to set the maximum size for large browsers, and shrink as needed for smaller screens.

#box-sizing

By default, the width does not include padding, border and margin which are added separately to the total width taken by the element.

CSS3 introduces the box-sizing property, which allows to determine what the width includes.

• border-box: padding and border, *not* margin.
• content-box: exclude padding, border and margin.

There seems to be no way of also including the margin.

#height 100%

Fill the parent.

Only works if the parent height fixed by CSS, not automatically calculated from the content of other elements. http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window

So for it to work on a descendant, all parents must have 100% set until an ancestor has a fixed height.

Also consider vh and vw if you want to get a percentage of the entire window.

How to do it: http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh

Parent with fixed height:

Not fixed height:

#overflow

#scroll

Determines what happens when the inner content is larger than it's parent.

Has a level 3 module just for it: http://www.w3.org/TR/css-overflow-3/

overflow appears in CSS2, -x and -y versions only in the level 3 module, possibly because of potentially weird combinations of both: http://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue

overflow-y:scroll: always show scrollbar. Only activate if inner larger.

overflow-y:auto: only show scroll if inner larger than specified.

#Visible

Initial value: visible. If inner element is larger than outer, it just falls out:

#hidden

If no scroll, the overflow can be hidden with overflow:hidden

#Scrollbar style

http://stackoverflow.com/questions/7725652/css-scrollbar-style-cross-browser

#block formatting context

#overflow:hidden magic

overflow:hidden is often used for a side-effect which has no dedicated language feature: creating a block formatting context: http://colinaarts.com/articles/the-magic-of-overflow-hidden http://stackoverflow.com/questions/6196725/how-does-the-css-block-formatting-context-work

#text-overflow

Tons of examples: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

clip

ellipsis

'OOPS'

#display

Transform block elements into inline ones, vice versa and more.

Even if you transform the "inlineliness" of an element with CSS, you still *cannot* put block elements inside inline ones and have valid HTML5: valid HTML5 rules are independent from CSS.

#block

span display:block height:100px. Looks exactly like a div without display:

asdf qwer asdf qwer asdf qwer block qwer asdf qwer asdf qwer adsf qwer adsf qwer

Input display block

display:block on input has no effect apparently because it is a replaced element: http://stackoverflow.com/questions/4567988/what-is-it-in-the-css-dom-that-prevents-an-input-box-with-display-block-from-ex

#inline-block

div inline-block height:100px:

span inline-block height:100px. No difference from div:

Empty inline-block and vertical-align

Empty inline-block with fixed width: for the default vertical-align:baseline alignment is done at the bottom of the element: http://stackoverflow.com/questions/8215638/difference-between-baseline-of-empty-and-non-empty-inline-blocks

Empty inline-block with fixed width + vertical-align top:

Space between inline-block elements.

Space counts between two inline-block elements.

For this reason, two width 50% inline-block elements with a space between them will stack up and not side by side.

With space:

Without space:

CSS solutions without modifying HTML: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements/5078297#5078297

• font-width:0
• sometimes float left
• sometimes flex

#flex

Very flexible positioning.

Still W3C CR.

Amazing guide: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

#table-cell

Element behaves like a table cell:centered vertically and inline-block like.

#none

Hides the element. It does not occupy any space.

On Firefox 32 and Chrome 36, URL fragments that point to elements with display:none don't lead the page to scroll to the element. #display-none

#visibility

• visible: default
• #hidden: occupies space but is invisible. Before hidden span. Inside hidden span. After hidden span.

#float

Makes elements move horizontally as much as possible until they find:

• the parent container
• another floating element
• an element with clear

The prototypical use case of float is to put an image on a page and let text flow around it.

The height at which the element appears is the same as it would appear if it were inline.

Simple float left example:

• The floating element is removed from the normal flow. It does not affect the borders of other block elements, and overlaps with them, but it does occupy the space of their text.
• Only elements that come after the floating block are affected by it.

One way to prevent overlap is by using overflow:hidden:

With text-align:right:

float both:

float right:

Make input occupy remaining horizontal space

http://stackoverflow.com/questions/7189608/how-do-i-make-an-input-element-occupy-all-remaining-horizontal-space

Make an input occupy the remaining space: needs overflow: hidden; magic.

A direct attempt with width:100% fails because it makes the input want to take the entire line so it gets displaced down by the float:

It does not work if you make the input block directly: http://stackoverflow.com/questions/4567988/what-is-it-in-the-css-dom-that-prevents-an-input-box-with-display-block-from-ex

Occupy vertical space with float

The floating element is removed from the normal flow and does not occupy its original vertical space:

Possible solutions: http://www.quirksmode.org/css/clearing.html

overflow:auto; does the trick for some mysterious reason.

#clear

The clear property prevents elements from being displaced by float:

clear only works for block elements:

#vertical-align

Does very different things on tables and on inline elements: http://phrogz.net/CSS/vertical-align/

middle aligns in the middle of the maximum ascent and descent. Therefore, if your text only has either a maximum ascent or a maximum descent, align might look a bit off.

#Positioning

Positioning related properties.

Good tutorial: http://www.barelyfitz.com/screencast/html-training/css/positioning/

#Relative positioning

#Absolute positioning

Object is moved to a new location relative to the first non static positioned parent, above or below whatever is there depending on the Z indexes

Relative: space that would be occupied remains occupied.

Absolute: element is completely removed from normal flow, it is as if it were not there.

Place outside without knowing the dimension of the inner element:use 100 %:

#Center horizontally

Center horizontally: margin auto technique:

Only works for stuff for which you can specify widths, therefore not on phrasing content like span text-align:center can be used in that case.

#Center vertically

Center vertically and horizontally: http://stackoverflow.com/questions/7720730/how-to-align-the-absolute-position-to-center

Why margin: auto; does not work vertically: http://stackoverflow.com/questions/12415661/using-marginauto-to-vertically-align-div Spec explicitly specifies heights are 0 when auto: http://www.w3.org/TR/CSS2/visudet.html#normal-block

Unknown height: the only possibility seems to be tables or display:table-cell; + vertical-align: middle;.

Known size parent height: negative margin technique:

Phrasing content + known height: line-height == height technique:

Also possible for a checkbox, but not very nice because you cannot click anywhere to modify it:

To make the entire div clickable, put the label around the input, make the label inline-block, 100% height and width.

Since an absolutely positioned div leaves the normal page flow, its width is undetermined, and you have to set it with the width property (TODO check):

#bottom

#top

#left

#right

Specify absolute position inside it's relative element, with respect to the edges of the parent.

#z-index

When you start playing with position-relative, you elements can hover one over another, and you will need to use the z-index property to decide who is on top of whom.

If the element does not have position relative, absolute, etc., the z-index is ignored!

Even a 0px width 1px border box can be selected and for that reason is not a good watermark. Currently it does not seem possible to make the hovering element not selectable in pure CSS: stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable although many browsers support the non W3C user-select: none.

#cursor

Determines what the cursor looks like on hover. Takes a list in case on is not present.

There is also a related concept to border none: pointer locks, which make the mouse act like in a first person shooter,and never leave the screen.

#pointer-events

The only useful value in HTML: none, others only for SVG.

Experimental: was considered for inclusion in CSS3, but was postponed to CSS4.

#functions

http://dev.w3.org/csswg/css-values/#functional-notation

#attr()

On CSS 2, can only be used for the content attribute. On CSS3 gained other uses.

Literal link:

Common combo with data:

Specially to set icons:

#url() functional notation

http://www.w3.org/TR/CSS2/syndata.html#uri

https://developer.mozilla.org/en-US/docs/Web/CSS/uri

It seems that literal spaces are allowed if quoted?

#calc()

Numerical calculations with operations like + and / to DRY up the CSS.

Give use variables and it will replace SASS.

#toggle()

TODO

#Elements

Styling properties or combos specific to certain HTML elements.

#Built-in elements that cannot be styled

There are a few elements which cannot be styled easily, either because the standards don't say anything about how they should look, and / or because they are reused from the user's desktop.

#html element vs body

TODO

#links

Make div into link: http://stackoverflow.com/questions/796087/make-a-div-into-a-link

#title attribute popup

The popup cannot be styled: only replaced by an element that appears on hover: http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

#lists

No bullets via list-style-type:none:

• a
• b

#list-style-position

By default, positioning happens to the text, and bullets as absolutely positioned In particular, this means that margin-left is relative to the text, *not* the bullets by default! This can be changed by the list-style-position:inside property.

• a
• b

• a
• b

TODO why is a line break being added only with inside?

• abc abc abc abc abc abc abc abc abc abc abc

• abc abc abc abc abc abc abc abc abc abc abc

• abc abc abc abc abc abc abc abc abc abc abc

• abc abc abc abc abc abc abc abc abc abc abc

#form

#textarea

Textareas don't inherit font and background color from parent: you must set it explicitly.

The padding works as expected and separates the input text from the border:

#resize by dragging

Textarea can be resized by users by dragging by default. It is possible to prevent resizing horizontally or vertically. through the resize property.

Max / Min Width / Height are enforced on what the user can resize:

Prevent textarea from wrapping words: http://stackoverflow.com/questions/657795/how-remove-word-wrap-from-textarea

TODO: not working.

The following options do not seem possible without Javascript:

• Resize by dragging the bottom border / edge instead of bottom corner. jQuery UI resizable({'s'}) with some styling does the trick.
• Make the textarea always be as high as the content in it. stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize jQuery possibility: https://github.com/jackmoore/autosize
• Resize elements other than textareas by dragging. jQuery UI resizable is perfect for it.

Great article including a bunch of useful things you may want to do with textareas: http://css-tricks.com/textarea-tricks/

Style the textare

#grabber

#handle

Not standard possible: http://stackoverflow.com/questions/13126917/can-i-style-the-resize-grabber-of-textarea

#fieldset

HTML + CSS editable dropdown select: https://mdn.mozillademos.org/files/4563/editable_select.html

#checkb

#radio

It is not currently easy to style those elements.

It is not easy either to explain why they have a given size. Example, the following show a height of 14px on the inspector, but their spans are 20px hight.

#tables

Padding 1px:

Format column 2 only with nth-child:

Shrink to fit column content with one column taking the rest of the space

Make cells fit to their content on a width:100% table, except for one large cell. http://stackoverflow.com/questions/4582631/are-shrink-to-fit-table-cells-possible

No formatting, BAD:

width:1px; whitespace:nowrap on all but last column:

td width

width is ignored on td: http://stackoverflow.com/questions/6658947/css-table-td-width-fixed-not-flexible TODO check?

To work around it either:

• use min-width
• use table-layout: fixed

It seems that width is taken as min-width

table-layout

http://stackoverflow.com/questions/6658947/css-table-td-width-fixed-not-flexible

2 possible values:

• auto (default): automatically decide widths with a complicated algorithm
• fixed width of rows and columns is determined by that of the first row or column

#at-rules

#@

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule

##media

##Media query

Determine (query) properties of the current device and set custom CSS rules for it.

Cannot be used on inline style: http://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline

Media type

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Most devices are not implemented on Firefox, so don't rely much on this feature yet.

Important devices include (active will be red):

• all: any device. Default.
• print: display must split into pages. Non-trivial. Try telling your browser to print this with Ctrl + P to a PDF. Firefox 30 shows it in red only in the PDF as expected.
• screen: most desktops and laptops

#all

Default media type so can be omitted.

#print media

Tips on how to get it right. Very difficult.

Also show link destination on PDFs:

          @media print {
            a[href]:after {
              content: " (" attr(href) ") ";
            }
          }
        

#Media Features

#max-width

It is possible to make complex queries with the and and comma , operators.

#max-width media query

#min-width media query

width, min-width, max-width: current window width

#device-width-max

device-width, min and max. Device capability. Less useful than width, since a browser can be resized to, say, half screen size, and this won't change. Strongly discouraged by https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width

#device-pixel-ratio

TODO

#min-resolution

TODO

#orientation

See: orientation.html

Impossible detections

• http://stackoverflow.com/questions/11387805/touchscreen-media-queries
• stackoverflow.com/questions/13803838/detecting-if-a-device-is-able-to-change-orientation-in-javascript

#Combos and related techniques

#Triangles

Works because orthogonal borders split linearly angles, thus 45 degrees for equal width borders.

#Modals

Modals are dialogs that block the window that actions originated them, like JavaScript alert: http://en.wikipedia.org/wiki/Modal_window

It is possible to make modals without JavaScript with only CSS through the target property.

#Lightbox

Lightbox is a modal for displaying images. It was originally the name of a plugin, which became so popular that the term has since been used to describe the type of effect in general. http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29

#Color palette from image

http://lifehacker.com/5153828/create-a-color-palette-from-a-single-image

Get dominant colors from a picture, so you can design using those colors for uniformity.

#Mobile

Getting sizes right on mobile may be a pain at first because of different pixel densities. See also:

• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• CSS's device-pixel-width media query
• HTML's viewport meta tag

#Design

Mobile finger minimal target size recommendation: Apple 44px, Microsoft 36px, Nokia 28px.

Where to put media share buttons: http://coschedule.com/blog/social-media-buttons/