CSS Cheatsheet


    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:

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

    Important modules include:

    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




    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:

    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


    The following CSS affects a document:


    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



    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.


    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:

    Red in scope.
    Outside scope.

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



    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.
      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 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.
      On the stylesheet:


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

    a > b:b is a child of a



    #next sibling

    First next sibling. 1 0 1 2 1



    #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.



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




    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:

    #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


    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 can be used for any element, not just anchors:
    hover me to make me red!

    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


    For check boxes and radio button inputs.


    #last child

    the last child nested last child



    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


    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.


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

    target1 target1

    target2 target2

    Major application: making modals

    select by



    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.




    italic1 italic2


    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.


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



    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:


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

    Use the current text color.

    Before Inside After

    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.



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


    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.


    green 0.0
    green 0.5
    green 1.0

    #Measure units

    #Length units


    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.


    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




    Defined in terms of pixels. Never use them.

    Font relative units

    You should always use those.


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


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


    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: 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.



    1/72 inch.

    How is this font-relative then?



    1/12 point.






    Units relative to the viewport.



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


    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:

    outside span inside span
    outside span inside span

    Good way to DRY things out in pure CSS.


    #font properties

    First understand some font parameters:



    The color of the font.


    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:50px; line-height:25px;
    out font-size:50px; line-height:0.5;
    out font-size:50px; line-height:2;


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

    font-size:50px; line-height:1; Ahpx
    50px A | 1em | x 1ex | 50%

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

    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.


    How thick the characters are.

    font-weight bold

    font-weight normal

    font-weight 900


    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/


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






    none none
    capitalize capitalize
    uppercase uppercase
    There is no lowercase analogous to capitalize.


    Set the horizontal alignment for inner text and inline elements.

    right in span
    right in div
    right in div inline-block
    right in div
    Center text vertically


    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.




              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
    a b c d e f g h i j k l m n o p q 2
    a b c d e f g h i j k l m n o p q 2
    a b c d e f g h i j k l m n o p q 2
    a b c d e f g h i j k l m n o p q 2
    a b c d e f g h i j k l m n o p q 2

    Achieves similar effect to the pre HTML element, but:

    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"

    a b


    Specify the size of the tab character.

    Default value: 8.






    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.









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


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



    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:



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

    Linear red blue:

    Linear to left top red blue:




    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.


    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...

    200x80 margin 0 0 40
    200x80 margin 20 0 0

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


    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


    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.


    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:

    border:25px solid black; outline:25px solid blue;

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


    Offset only: not on border.

    border:10px solid black; outline:10px solid blue; outline-offset:10px;



    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:

    0123456789 0123456789 0123456789 0123456789 0123456789 0123 0123 0123 0123


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

    width:400; max-width:200px

    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.



    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.

    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:




    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.



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



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


    #Scrollbar style


    #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


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









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

    block span0 block span1
    inline div0
    inline div1

    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.


    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


    div inline-block height:100px:

    asdf qwer
    asdf qwer asdf qwer asdf qwer adsf qwer adsf qwer
    asdf qwer asdf qwer asdf qwer
    inline-block asdf qwer asdf qwer asdf qwer
    qwer asdf qwer asdf qwer adsf qwer adsf qwer

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

    asdf qwer asdf qwer asdf qwer
    inline-block asdf qwer asdf qwer asdf qwer
    qwer asdf qwer asdf qwer adsf qwer adsf qwer
    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

    asdf qwer asdf qwer asdf qwer adsf qwer adsf qwer

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

    qwer asdf qwer asdf qwer adsf qwer adsf qwer
    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


    Very flexible positioning.

    Still W3C CR.

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


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



    Hides the element. It does not occupy any space.

    Before display none span. After display none span.

    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



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

    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.

    a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
    float right div
    AFTER a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

    Simple float left example:

    before float left after
    float left blue
    after red

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

    float left blue
    after red

    With text-align:right:

    float right

    float both:

    float both

    float right:

    float right

    Make input occupy remaining horizontal space


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

    float left

    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:

    float left

    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:

    float right div
    a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
    float right div
    AFTER a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a

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

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

    float right div


    The clear property prevents elements from being displaced by float:

    clear before
    float left
    clear before
    float left

    clear only works for block elements:

    clear left span float left span after


    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 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:

    centered div

    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.

    centered span

    #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;.

    Centered vertically.

    Known size parent height: negative margin technique:

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

    Centered vertically.

    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):

    no fixed width

    with fixed width





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


    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.


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

    url('flower-small.jpg'). Firefox says that the image must be smaller than 128×128px. Some sources state that Windows limits it to 32x32, so use 32x32.

    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.


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

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

    title tool tips don't show
    cursor: styles don't show
    anchor neither
    onclick events are not fired




    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



    It seems that literal spaces are allowed if quoted?


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

    Give use variables and it will replace SASS.




    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



    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


    No bullets via list-style-type:none:


    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.


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




    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:

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

    Style the textare

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


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




    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.


    Padding 1px:

    0 1
    0 1
    2 3

    Format column 2 only with nth-child:

    1 2 3
    1 2 3
    1 2 3

    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:

    small small very very very very very very very very large

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

    small small very very very very very very very very large

    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:

    It seems that width is taken as min-width

    200px 100px
    100px 200px



    2 possible values:





    ##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


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

    Important devices include (active will be red):


    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


    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

    This div changes color with your browser width. Go and resize it!

    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






    See: orientation.html

    Impossible detections

    #Combos and related techniques


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


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


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


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


    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/