User Manual


! separate
HTML/CSS/JS – Why separate?
See !list
You won't find any warez here, bud.
100% height
See fullheight
CSS3 font embedding: info at, tool at, spec at
Conditional class
Conditional class:
Grids are good
Grids are good:
See irp
Max z-index
Max z-index value:
Seriously? Embrace Obliviousness.
See wysiwyg
See force new windows
A11y project for accessiblity:
See css pseudo order
abbr cta
Call To Action --
abbr ffs
ffs - For Fuck's Sake
abbr ianal
I Am Not A Lawyer
abbr rtfm
RTFM: Read The Fucking Manual
abbr tias
abbr tias: Try It And See
abbr ymmv
YMMV: Your Mileage May Vary
Absolute positioning offsets are relative to the nearest "positioned" ancestor, or the viewport if there is no such ancestor. "Positioned elements" are elements with a value for the `position` property other than the default value of `static`.
What do you want to achieve with this? Why are you trying this solution? What's the original problem? Perhaps we can find another way to achieve what you want. See also: `xy
align bottom
Align an element to the bottom of its container: .container { position: relative; } .element { position: absolute; bottom: 0; /* older versions of IE may also need `left` or `right` set */ }
Beware of the Alot
Using CSS animations
Don't ask if anyone can help with X or if anyone has used Y before. Just because someone has used X doesn't necessarily mean they can help you, and just because someone hasn't used X doesn't necessarily mean they can't help you. Just get to the point, please.
apache unicode
See apache utf-8
apache utf-8
To set the default encoding to UTF-8 in an Apache environment, add the following to a conf file or .htaccess: AddDefaultCharset utf-8
apache utf8
See apache utf-8
Just because X is a web technology, CSS is a web technology, and thus some people in #css might use X with their websites, this doesn't mean #css is the right place to ask your questions about X. Please ask in the appropriate channels.
Read this. Then bookmark it:
Don't ask to ask, or ask if anyone can help. Just ask your question or state your problem and wait. Oh, and be sure to read the channel topic.
aspect ratio
CSS aspect ratio -- Padding hack:
bad design
Why Programmers Suck at Design:
be AMcBain
I bet you could do that with a checkbox.
be Li
I hope you'll me expressing my /ignore on you too
be amcbain
See be AMcBain
be li
I hope you'll me expressing my /ignore on you too
be mean
Er, hi. I'm not very good at this. Do you mind if I try again later?
be theskillwithin
That? No. Use flexbox instead.
BEM - Block, Element, Modifier. A philosophy for organizing CSS (
Better or worse are `opinion, and everyone has one. Asking what is better will likely lead to unproductive arguments.
CSS Block Formatting Context explained: • Spec:
See background-position-x/y
Always goes well with hotpink and neon green.
How <blink> came to be:
Bootstrap UX library - - Questions in ##bootstrap
Sorry, I am a bot, not a person. You want to speak to the person who spoke to me.
bot dot
• • •
bot help
For information on how to use me, see • Also see `factoids
bot snack
See botsnack
Hey man, don't look at me. I'm just a bot.
Rank rou, Raggy!
See box model
box model
The CSS Box Model
browser shots
Browser shots: Free: , , | Pay: (see ) | IE Renderer:
Caching tutorial:
When can I use ...?
See slideshow
See ie conditional comments
How to center anything:
centered tabs
Centered tabs:
See center
See float containment
See float containment
See collapsing margins
Content Management Systems let you edit the content easily, but might not let you easily edit the design. We can help with HTML and CSS, but we can't help you with your CMS.
HTML and CSS Code Guide
collapsing margins
Collapsing margins: • Spec: • Preventing margin collapsing:
See colors
Color scheme tools:,, Or you can just go with 'hotpink', of course.
See colors
comic sans
Comic Sans Criminal:
See compatibility
Compatibility reference: - - -
See ie conditional comments
See ie conditional comments
conditional comments
See ie conditional comments
contain floats
See float containment
contrast , Color contrast checking tools:
See counters
CSS counters:
cross-browser inline-block
See inline-block and you
Try telling us a joke that's newer than 2004.
Cascading Style Sheets. CSS2.1 spec at, CSS modules specs (including CSS3) at
css #
CSS '#' ID selector:
css *
CSS '*' universal selector:
css +
CSS '+' adjacent sibling combinator:
css ,
CSS ',' selector grouping:
css .
CSS '.' class selector:
css ::
Before CSS3 Selectors, `:` was used for both pseudo-classes and pseudo-elements. From CSS3 Selectors onward, `::` is used for pseudo-elements.
css ::after
CSS '::after' pseudo-element:
css ::before
CSS '::before' pseudo-element:
css ::first-letter
CSS '::first-letter' pseudo-element:
css ::first-line
CSS '::first-line' pseudo-element:
css ::selection
CSS '::selection' pseudo-element: (note: removed from spec, but now a de facto standard; also see
css :active
CSS ':active' pseudo-class:
css :after
See css ::after
css :before
See css ::before
css :checked
CSS ':checked' pseudo-class:
css :contains
CSS ':contains' pseudo-class: (note: removed from spec)
css :disabled
CSS ':disabled' pseudo-class:
css :empty
CSS ':empty' pseudo-class:
css :enabled
CSS ':enabled' pseudo-class:
css :first
CSS ':first' pseudo-class:
css :first-child
CSS ':first-child' pseudo-class:
css :first-letter
See css ::first-letter
css :first-of-type
CSS ':first-of-type' pseudo-class:
css :focus
CSS ':focus' pseudo-class:
css :hover
CSS ':hover' pseudo-class:
css :indeterminate
CSS ':indeterminate' pseudo-class:
css :lang
CSS ':lang' pseudo-class:
css :last-child
CSS ':last-child' pseudo-class:
css :last-of-type
CSS ':last-of-type' pseudo-class:
css :left
CSS ':left' pseudo-class:
CSS ':link' pseudo-class:
css :not
CSS ':not' pseudo-class:
css :nth-child
CSS ':nth-child' pseudo-class:
css :nth-last-child
CSS ':nth-last-child' pseudo-class:
css :nth-last-of-type
CSS ':nth-last-of-type' pseudo-class:
css :nth-of-type
CSS ':nth-of-type' pseudo-class:
css :only-child
CSS ':only-child' pseudo-class:
css :only-of-type
CSS ':only-of-type' pseudo-class:
css :right
CSS ':right' pseudo-class:
css :root
CSS ':root' pseudo-class:
css :target
CSS ':target' pseudo-class:
css :visited
CSS ':visited' pseudo-class:
css >
CSS '>' child combinator:
css @
CSS at-rules:
css @import
See css import
css @namespace
CSS '@namespace' at-rule:
css @page
CSS '@page' at-rule:
css []
CSS '[...]' attribute selectors:
css at
See css @
css azimuth
CSS 'azimuth' property:
css background
CSS 'background' property:
css background-attachment
CSS 'background-attachment' property:
css background-color
CSS 'background-color' property:
css background-image
CSS 'background-image' property:
css background-origin
CSS 'background-origin' property:
css background-position
CSS 'background-position' property:
css background-repeat
CSS 'background-repeat' property:
css background-size
CSS 'background-size' property: MDN:
css behavior
See css behavioral extensions
css behavioral extensions
Behavioral Extensions to CSS:
css bfc
CSS Block Formatting Context explained: Spec:
css border
CSS 'border' property:
css border-bottom
CSS 'border-bottom' property:
css border-bottom-color
CSS 'border-bottom-color' property:
css border-bottom-style
CSS 'border-bottom-style' property:
css border-bottom-width
CSS 'border-bottom-width' property:
css border-collapse
CSS 'border-collapse' property:
css border-color
CSS 'border-color' property:
css border-image
CSS 'border-image' property:
css border-left
CSS 'border-left' property:
css border-left-color
CSS 'border-left-color' property:
css border-left-style
CSS 'border-left-style' property:
css border-left-width
CSS 'border-left-width' property:
css border-radius
CSS border-radius:
css border-right
CSS 'border-right' property:
css border-right-color
CSS 'border-right-color' property:
css border-right-style
CSS 'border-right-style' property:
css border-right-width
CSS 'border-right-width' property:
css border-spacing
CSS 'border-spacing' property:
css border-style
CSS 'border-style' property:
css border-top
CSS 'border-top' property:
css border-top-color
CSS 'border-top-color' property:
css border-top-style
CSS 'border-top-style' property:
css border-top-width
CSS 'border-top-width' property:
css border-width
CSS 'border-width' property:
css bottom
CSS 'bottom' property:
css box
See box model
css box-shadow
CSS 'box-shadow' property:
css box-sizing
CSS 'box-sizing' property:
css calc
CSS3 calc function - Examples: :: Spec:
css caption-side
CSS 'caption-side' property:
css cascade
Cascade is the C in CSS • Spec:
css child
See css >
css clear
CSS 'clear' property:
css clip
CSS 'clip' property:
css color
CSS 'color' property:
css column
See css columns
css column-count
See css columns
css column-gap
See css columns
css column-width
See css columns
css columns
CSS 3 multi-column layout: Howto: Spec: Caniuse:
css content
CSS 'content' property:
css counter-increment
CSS 'counter-increment' property:
css counter-reset
CSS 'counter-reset' property:
css cue
CSS 'cue' property:
css cue-after
CSS 'cue-after' property:
css cue-before
CSS 'cue-before' property:
css cursor
CSS 'cursor' property:
css direction
CSS 'direction' property:; How to use Right-to-Left languages:
css display
CSS 'display' property:
css elevation
CSS 'elevation' property:
css email
See email css support
css email support
See email css support
css empty-cells
CSS 'empty-cells' property:
css filter
CSS filter (experimental): :: Spec (WD):
css fit
CSS 'fit' property:
css fit-position
CSS 'fit-position' property:
css float
CSS 'float' property:
css focus rect
CSS focus rectangle:,
css font
CSS 'font' property:
css font-family
CSS 'font-family' property:
css font-size
CSS 'font-size' property:
css font-style
CSS 'font-style' property:
css font-variant
CSS 'font-variant' property:
css font-weight
CSS 'font-weight' property:
css form styling
CSS can not always change how form widgets look. ::
css forms
Forms and CSS:,
css frameworks
A fitting quote on the subject of CSS frameworks by Ned Batchelder: "The experts have climbed the learning curve, and can do more with the raw technology, they find the framework limiting. Non-experts find the raw technology baffling, and appreciate that the framework simplifies and organizes their work." •
css height
CSS 'height' property:
css i azimuth
'azimuth' info: initial value: 'center' • applies to: all • inherited: yes • percentages: n/a • media: aural
css import
CSS '@import' directive
css initial
Set a property to its initial value.
css left
CSS 'left' property:
css letter-spacing
CSS 'letter-spacing' property:
css line-height
CSS 'line-height' property:
css list-style
CSS 'list-style' property:
css list-style-image
CSS 'list-style-image' property:
css list-style-position
CSS 'list-style-position' property:
css list-style-type
CSS 'list-style-type' property:
css margin
CSS 'margin' property:
css margin-bottom
CSS 'margin-bottom' property:
css margin-left
CSS 'margin-left' property:
css margin-right
CSS 'margin-right' property:
css margin-top
CSS 'margin-top' property:
css marquee-direction
CSS 'marquee-direction' property:
css marquee-play-count
CSS 'marquee-play-count' property:
css marquee-speed
CSS 'marquee-speed' property:
css marquee-style
CSS 'marquee-style' property:
css max-height
CSS 'max-height' property:
css max-width
CSS 'max-width' property:
css min-height
CSS 'min-height' property:
css min-width
CSS 'min-width' property:
css mobile
See css mobile profile
css mobile profile
CSS Mobile Profile:
css object-fit
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width:
css opacity
CSS 'opacity' property:
css orphans
CSS 'orphans' property:
css outline
CSS 'outline' property:
css outline-color
CSS 'outline-color' property:
css outline-style
CSS 'outline-style' property:
css outline-width
CSS 'outline-width' property:
css overflow
CSS 'overflow' property:
css overflow-style
CSS 'overflow-style' property:
css padding
CSS 'padding' property:
css padding-bottom
CSS 'padding-bottom' property:
css padding-left
CSS 'padding-left' property:
css padding-right
CSS 'padding-right' property:
css padding-top
CSS 'padding-top' property:
css page
CSS 'page' property:
css page-break-after
CSS 'page-break-after' property:
css page-break-before
CSS 'page-break-before' property:
css page-break-inside
CSS 'page-break-inside' property:
css pause
CSS 'pause' property:
css pause-after
CSS 'pause-after' property:
css pause-before
CSS 'pause-before' property:
css pitch
CSS 'pitch' property:
css pitch-range
CSS 'pitch-range' property:
css play-during
CSS 'play-during' property:
css position
CSS 'position' property:
css prefix ref
CSS vendor-prefixes references:
css pseudo order
Pseudo-classes should be in this order: a:link, a:visited, a:hover, a:active
css quotes
CSS 'quotes' property:
css resize
CSS 'resize' property:
css richness
CSS 'richness' property:
css right
CSS 'right' property:
css select
CSS Selectors: Tutorials: • Spec: • Try yours out: • Find yours: • See: `specificity
css selectors
CSS Selectors:
css shrink wrap
See css shrink-wrap
css shrink-wrap
css shrinkwrap
See css shrink-wrap
css size
CSS 'size' property:
css space
CSS ' ' descendant combinator:
css speak
CSS 'speak' property:
css speak-header
CSS 'speak-header' property:
css speak-numeral
CSS 'speak-numeral' property:
css speak-punctuation
CSS 'speak-punctuation' property:
css specificity
CSS Specificity • Tutorials: , • Spec: • Try your selectors: • Graph it:
css speech-rate
CSS 'speech-rate' property:
css sprites
See sprites
css stress
CSS 'stress' property:
css sucks
CSS doesn't suck, you're just doing it wrong: t-suck-you re-just-doing-it-wrong/
css table-layout
CSS 'table-layout' property:
css text-align
CSS 'text-align' property:
css text-decoration
CSS 'text-decoration' property:
css text-indent
CSS 'text-indent' property:
css text-shadow
CSS 'text-shadow' property:
css text-transform
CSS 'text-transform' property:
css top
CSS 'top' property:
css transform
CSS transform (experimenta): :: Spec (WD):
css unicode-bidi
CSS 'unicode-bidi' property:
css v azimuth
'azimuth' values: | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
css v background-attachment
'background-attachment' values: scroll | fixed | inherit
css v background-color
'background-color' values: <color> | transparent | inherit
css vendor
See css vendor prefixes
css vendor prefixes
CSS vendor prefixing:
css vertical-align
css visibility
CSS 'visibility' property:
css voice-family
CSS 'voice-family' property:
css volume
CSS 'volume' property:
css white-space
CSS 'white-space' property:
css widows
CSS 'widows' property:
css width
CSS 'width' property:
css word-spacing
CSS 'word-spacing' property:
css z-index
CSS 'z-index' property: Help: Spec: :: Stacking contexts:
css ~
CSS '~' general sibling combinator:
CSS3 is not a single specification like CSS1 and CSS2. CSS is now modular, with each module being able to progress independently from the others. Specs at
css3 2d transforms
CSS3 2D Transforms:
css3 3d transforms
CSS3 3D Transforms:
css3 animations
CSS3 Animations:
css3 background
See css3 backgrounds and borders
css3 backgrounds
See css3 backgrounds and borders
css3 backgrounds and borders
CSS3 Backgrounds and Borders:
css3 basic box model
CSS3 Basic Box Model:
css3 basic user interface
CSS3 Basic User Interface:
css3 box
See css3 basic box model
css3 box model
See css3 basic box model
css3 cascade
See css3 cascading and inheritance
css3 cascading
See css3 cascading and inheritance
css3 cascading and inheritance
CSS3 Cascading and Inheritance:
css3 color
CSS3 Color:
css3 conditional
CSS3 Conditional Rules:
css3 content
See css3 generated and replaced content
css3 flexbox
See css3 flexible box layout
css3 flexible box layout
CSS3 Flexible Box Layout:
css3 fonts
CSS3 Fonts:
css3 gcpm
See css3 generated content for paged media
css3 generated and replaced content
CSS3 Generated and Replaced Content:
css3 generated content for paged media
CSS3 Generated Content for Paged Media:
css3 grid
See css3 grid positioning
css3 grid layout
See css3 grid positioning
css3 grid positioning
CSS3 Grid Positioning:
See css3 hyperlink presentation
CSS3 Hyperlink Presentation:
See css3 hyperlink presentation
css3 image
See css3 image values
css3 image values
CSS3 Image Values:
css3 images
See css3 image values
css3 inheritance
See css3 cascading and inheritance
css3 layout
See css3 template layout
css3 line
See css3 line layout
css3 line layout
CSS3 Line Layout:
css3 linebox
See css3 line layout
css3 lists
CSS3 Lists:
css3 marquee
CSS3 Marquee:
css3 media queries
CSS3 Media Queries:
css3 mq
See css3 media queries
css3 multi-column layout
CSS3 Multi-column Layout:
css3 multicol
See css3 multi-column layout
css3 namespaces
CSS3 Namespaces:
css3 paged media
CSS3 Paged Media:
css3 presentation levels
CSS3 Presentation Levels:
css3 preslev
See css3 presentation levels
css3 print
See css3 print profile
css3 print profile
CSS3 Print Profile:
css3 reader
See css3 reader media type
css3 reader media type
CSS3 Reader Media Type:
css3 ruby
CSS3 Ruby:
css3 selectors
CSS3 Selectors:
css3 speech
CSS3 Speech:
css3 style attr
See css3 style attribute syntax
css3 style attribute
See css3 style attribute syntax
css3 style attribute syntax
CSS3 Style Attribute Syntax:
css3 syntax
CSS3 Syntax:
css3 template
See css3 template layout
css3 template layout
CSS3 Template Layout:
css3 text
CSS3 Text:
css3 text-overflow
CSS text-overflow
css3 transforms
CSS3 Transforms: 2D at, 3D at
css3 transitions
CSS3 Transitions:
css3 tv
See css3 tv profile
css3 tv profile
CSS3 TV Profile:
css3 ui
See css3 basic user interface
css3 units
See css3 values and units
css3 values
See css3 values and units
css3 values and units
CSS3 Values and Units:
CSS4, wut? Yup:
css4 background
CSS3 Backgrounds and Borders:
cssom view
current page
The Current Page Conundrum =
custom font
See @font-face
custom fonts
See @font-face
See deadcenter
DD Roundies
dead center
See deadcenter
dead centre
See deadcenter
Dead center: , ,
See deadcenter
Browsers specify what all elements look like by default. If you want to change it, you can override them by providing CSS rules with element selectors
design resolution
Most users have 1024x768 and higher, but a large minority have 800x600. These numbers do not include those who browse using web appliances. It is important to note that (a) the display resolution says little about the size of the browser window, and (b) users can normally resize the browser window. Consequently no particular browser window size should be assumed.
device pixel ratio
DIAF: "Die in a fire", or "drown in a flood"
Differences between HTML 4 & 5:
See rtl
Divitis is when you use tons of <div>s when you don't have to. Create the HTML for the page first, THEN style it. The fewer elements you have, the fewer problems you have.
docs - General documentation and specifications
The list of W3C doctypes can be found here: - HTML 5 is recommended (, HTML 4.01 Strict is good choice too.
doctype compat
See doctype compatibility
doctype compatibility
Doctype compatibility chart: (near the bottom)
doesn't work
"It doesn't work" doesn't help. Give a `live example (or a `testcase) and be specific about what is wrong and how it should look
doing it right
Doing it right: ,
See device pixel ratio
Drupal? Drufail!
How much is an em
See email css support
email css
See email css support
email css support
Email client CSS support table:
embed font
See @font-face
embed fonts
See @font-face
If you're looking for employees or contractors, please use #css-lance. This channel is for people working on websites to ask questions about CSS, HTML, and JavaScript
See employ
See employ
Please try to keep your questions/responses on one line - don't use the "Enter" key as punctuation!
enterprise css
Enterprise CSS:
enterprise html
Enterprise HTML:
enterprise js
Enterprise JS:
equal height
See sameheight
See sameheight
Guide to CSS Escape Sequences:
See bad design
example select
Example of select box replacements:
You are the expert, not the client paying you. Don't let clients do stupid things. They will blame you for them.
The full list of factoids can be found at . Also see `bot help
faq - Frequently Answered Questions
faq bootstrap
I'm pretty sure Boostrap has a class for that
See faq
faux columns:
See firebug
See float containment
Give a man a fire, he is warm for a day. Set a man on fire, and he'll be warm for the rest of his life.
Firebug: an extension for Firefox that makes debugging web pages a breeze •
Give a man a fish, he is fed for a day. Teach a man to fish, and he is fed for the rest of his life.
Cross-browser, valid Flash embedding: • Also see,
flash intro
See intro
Read all about flexbox: & - Game/tutorial:
Read all about flexbox: & - Play with flexbox: - Game/tutorial:
Flexbugs: A list of flexbox issues and cross-browser workarounds for them:
float center
Does not exist. Ask me about `center
float contain
Expand a float's container to wrap the float: ::
float containment
Contain floats: ::
float tutorial
See floatutorial
See floatutorial
float tutorials:,
font face
See font-face
font id
Font identification:,
font pyramids
Font pyramids: (view source and be sure to scroll all the way down ;)
font sizing
Consistent cross-browser font sizing: set the top-level (`html` or `body`) font-size to a magic number such as 76%, then use the `em` unit for font-size everywhere else.
CSS3 Font Embedding: :: Spec: :: Web Font converter:
CSS Sticky footer:
force new windows
Don't force new windows or tabs to be opened! |
form styling
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. Also see
Fighting the Flash of Unstyled Text:
See facepalm
Don't use frames:,
full height
See fullheight
fullheight ; Fullheight example:
FWIW: For what it's worth.
See Grids are good
See gaps
Remove spaces between inline/-block elements: :: Remove spaces under images:
HTML & CSS gotchas:
CSS gradients: About: :: Caniuse: :: Create your own:
See gradient
Learn the CSS Grid spec: | - Build a float-based grid:
Grids are good:
grids are good
See Grids are good
See using
See haslayout
h1 usage
Use h1 for top-level heading:
h1 useage
See h1 usage
If you have to, as a last resort: Be aware they may not work as you expect in the future, or at all.
Browser Targeting with CSS Hacks:
hashcss - The #css website - Submit a fix or a bug report at
IE hasLayout:,,
Before you ask, read our rules: :: Helpful tips: :: FAQs: ::
help set
set/!ra <name> = <value> # set a factoid. ! - edit an existing factoid. r - regexp mode, <content> must be s/// substitution. a - alias mode, <content> must be a name of an existing factoid
help vampire
Help vamipres:
help vampires
See help vampire
See haslayout
horizontal center
See center
When in doubt, choose hotpink. And if you need a second colour to go with hotpink, let it be neon green.
how to css
How to develop with CSS:
how vertical-align works
How CSS 'vertical-align' works:
HTML: HyperText Markup Language. Also see 'HTML4', 'HTML5', 'XHTML'.
html 4
See html4
html 5
See html5
html a
See html4 a
html abbr
See html4 abbr
html acronym
See html4 acronym
html address
See html4 address
html applet
See html4 applet
html area
See html4 area
html b
See html4 b
html base
See html4 base
html basefont
See html4 basefont
html bdo
See html4 bdo
html big
See html4 big
html blockquote
See html4 blockquote
html body
See html4 body
html br
See html4 br
html button
See html4 button
html caption
See html4 caption
html center
See html4 center
html cite
See html4 cite
html code
See html4 code
html col
See html4 col
html colgroup
See html4 colgroup
html dd
See html4 dd
html del
See html4 del
html dfn
See html4 dfn
html dir
See html4 dir
html div
See html4 div
html dl
See html4 dl
html dt
See html4 dt
html em
See html4 em
html email
HTML email information:
html fieldset
See html4 fieldset
html font
See html4 font
html form
See html4 form
html frame
See html4 frame
html frameset
See html4 frameset
html h1
See html4 h1
html h2
See html4 h2
html h3
See html4 h3
html h4
See html4 h4
html h5
See html4 h5
html h6
See html4 h6
html head
See html4 head
html hr
See html4 hr
html html
See html4 html
html i
See html4 i
html iframe
See html4 iframe
html img
See html4 img
html input
See html4 input
html ins
See html4 ins
html isindex
See html4 isindex
html kbd
See html4 kbd
html label
See html4 label
html legend
See html4 legend
html li
See html4 li
See html4 link
html map
See html4 map
html menu
See html4 menu
html meta
See html4 meta
html noframes
See html4 noframes
html noscript
See html4 noscript
html object
See html4
html ol
See html4 ol
html optgroup
See html4 optgroup
html option
See html4 option
html p
See html4 p
html param
See html4 param
html pre
See html4 pre
html q
See html4 q
html s
See html4 s
html samp
See html4 samp
html script
See html4 script
html select
See html4 select
html small
See html4 small
html span
See html4 span
html strike
See html4 strike
html strong
See html4 strong
html style
See html4 style
html sub
See html4 sub
html sup
See html4 sup
html table
See html4 table
html tbody
See html4 tbody
html td
See html4 td
html textarea
See html4 textarea
html tfoot
See html4 tfoot
html th
See html4 th
html thead
See html4 thead
html title
See html4 title
html tr
See html4 tr
html tt
See html4 tt
html u
See html4 u
html ul
See html4 ul
html var
See html4 var
HTML4 spec at
html4 a
HTML4 'a' element:
html4 abbr
HTML4 'abbr' element:
html4 acronym
HTML4 'acronym' element:
html4 address
HTML4 'address' element:
html4 applet
HTML4 'applet' element (deprecated):
html4 area
HTML4 'area' element:
html4 b
HTML4 'b' element:
html4 base
HTML4 'base' element:
html4 basefont
HTML4 'basefont' element (deprecated):
html4 bdo
HTML4 'bdo' element:
html4 big
HTML4 'big' element:
html4 blockquote
HTML4 'blockquote' element:
html4 body
HTML4 'body' element:
html4 br
HTML4 'br' element:
html4 button
HTML4 'button' element:
html4 caption
HTML4 'caption' element:
html4 center
HTML4 'center' element (deprecated):
html4 cite
HTML4 'cite' element:
html4 code
HTML4 'code' element:
html4 col
HTML4 'col' element:
html4 colgroup
HTML4 'colgroup' element:
html4 dd
HTML4 'dd' element:
html4 del
HTML4 'del' element:
html4 dfn
HTML4 'dfn' element:
html4 dir
HTML4 'dir' element (deprecated):
html4 div
HTML4 'div' element:
html4 dl
HTML4 'dl' element:
html4 dt
HTML4 'dt' element:
html4 em
HTML4 'em' element:
html4 fieldset
HTML4 'fieldset' element:
html4 font
HTML4 'font' element (deprecated):
html4 form
HTML4 'form' element:
html4 frame
HTML4 'frame' element:
html4 frameset
HTML4 'frameset' element:
html4 h1
HTML4 'h1' element:
html4 h2
HTML4 'h2' element:
html4 h3
HTML4 'h3' element:
html4 h4
HTML4 'h4' element:
html4 h5
HTML4 'h5' element:
html4 h6
HTML4 'h6' element:
html4 head
HTML4 'head' element:
html4 hr
HTML4 'hr' element:
html4 html
HTML4 'html' element:
html4 i
HTML4 'i' element:
html4 iframe
HTML4 'iframe' element:
html4 img
HTML4 'img' element:
html4 input
HTML4 'input' element:
html4 ins
HTML4 'ins' element:
html4 isindex
HTML4 'isindex' element (deprecated):
html4 kbd
HTML4 'kbd' element:
html4 label
HTML4 'label' element:
html4 legend
HTML4 'legend' element:
html4 li
HTML4 'li' element:
HTML4 'link' element:
html4 map
HTML4 'map' element:
html4 menu
HTML4 'menu' element (deprecated):
html4 meta
HTML4 'meta' element:
html4 noframes
HTML4 'noframes' element:
html4 noscript
HTML4 'noscript' element:
html4 object
HTML4 'object' element:
html4 ol
HTML4 'ol' element:
html4 optgroup
HTML4 'optgroup' element:
html4 option
HTML4 'option' element:
html4 p
HTML4 'p' element:
html4 param
HTML4 'param' element:
html4 pre
HTML4 'pre' element:
html4 q
HTML4 'q' element:
html4 s
HTML4 's' element (deprecated):
html4 samp
HTML4 'samp' element:
html4 script
HTML4 'script' element:
html4 select
HTML4 'select' element:
html4 small
HTML4 'small' element:
html4 span
HTML4 'span' element:
html4 strike
HTML4 'strike' element (deprecated):
html4 strong
HTML4 'strong' element:
html4 style
HTML4 'style' element:
html4 sub
HTML4 'sub' element:
html4 sup
HTML4 'sup' element:
html4 table
HTML4 'table' element:
html4 tbody
HTML4 'tbody' element:
html4 td
HTML4 'td' element:
html4 textarea
HTML4 'textarea' element:
html4 tfoot
HTML4 'tfoot' element:
html4 th
HTML4 'th' element:
html4 thead
HTML4 'thead' element:
html4 title
HTML4 'title' element:
html4 tr
HTML4 'tr' element:
html4 tt
HTML4 'tt' element:
html4 u
HTML4 'u' element (deprecated):
html4 ul
HTML4 'ul' element:
html4 var
HTML4 'var' element:
HTML5: WHATWG spec at, W3C spec at
html5 @accesskey
W3C HTML5 'accesskey' global attribute:
html5 @class
W3C HTML5 'class' global attribute:
html5 @contenteditable
W3C HTML5 'contenteditable' global attribute:
html5 @contextmenu
W3C HTML5 'contextmenu' global attribute:
html5 @dir
W3C HTML5 'dir' global attribute:
html5 @draggable
W3C HTML5 'draggable' global attribute:
html5 @hidden
W3C HTML5 'hidden' global attribute:
html5 @id
W3C HTML5 'id' global attribute:
html5 @lang
W3C HTML5 'lang' global attribute:
html5 @spellcheck
W3C HTML5 'spellcheck' global attribute:
html5 @style
W3C HTML5 'style' global attribute:
html5 @tabindex
W3C HTML5 'tabindex' global attribute:
html5 @title
W3C HTML5 'title' global attribute:
html5 a
W3C HTML5 'a' element:
html5 abbr
W3C HTML5 'abbr' element:
html5 address
W3C HTML5 'address' element:
html5 area
W3C HTML5 'area' element:
html5 article
W3C HTML5 'article' element:
html5 aside
W3C HTML5 'aside' element:
html5 audio
W3C HTML5 'audio' element:
html5 b
W3C HTML5 'b' element:
html5 base
W3C HTML5 'base' element:
html5 bdo
W3C HTML5 'bdo' element:
html5 blockquote
W3C HTML5 'blockquote' element:
html5 body
W3C HTML5 'body' element:
html5 br
W3C HTML5 'br' element:
html5 button
W3C HTML5 'button' element:
html5 canvas
W3C HTML5 'canvas' element:
html5 caption
W3C HTML5 'caption' element:
html5 cite
W3C HTML5 'cite' element:
html5 code
W3C HTML5 'code' element:
html5 col
W3C HTML5 'col' element:
html5 colgroup
W3C HTML5 'colgroup' element:
html5 command
W3C HTML5 'command' element:
html5 datalist
W3C HTML5 'datalist' element:
html5 dd
W3C HTML5 'dd' element:
html5 del
W3C HTML5 'del' element:
html5 details
W3C HTML5 'details' element:
html5 dfn
W3C HTML5 'dfn' element:
html5 div
W3C HTML5 'div' element:
html5 dl
W3C HTML5 'dl' element:
html5 dt
W3C HTML5 'dt' element:
html5 em
W3C HTML5 'em' element:
html5 embed
W3C HTML5 'embed' element:
html5 fieldset
W3C HTML5 'fieldset' element:
html5 figcaption
W3C HTML5 'figcaption' element:
html5 figure
W3C HTML5 'figure' element:
W3C HTML5 'footer' element:
html5 form
W3C HTML5 'form' element:
html5 h1
W3C HTML5 'h1' element:
html5 h2
W3C HTML5 'h2' element:
html5 h3
W3C HTML5 'h3' element:
html5 h4
W3C HTML5 'h4' element:
html5 h5
W3C HTML5 'h5' element:
html5 h6
W3C HTML5 'h6' element:
html5 head
W3C HTML5 'head' element:
html5 header
W3C HTML5 'header' element:
html5 hgroup
W3C HTML5 'hgroup' element:
html5 hr
W3C HTML5 'hr' element:
html5 html
W3C HTML5 'html' element:
html5 i
W3C HTML5 'i' element:
html5 iframe
W3C HTML5 'iframe' element:
html5 img
W3C HTML5 'img' element:
html5 input
W3C HTML5 'input' element:
html5 ins
W3C HTML5 'ins' element:
html5 kbd
W3C HTML5 'kbd' element:
html5 keygen
W3C HTML5 'keygen' element:
html5 label
W3C HTML5 'label' element:
html5 legend
W3C HTML5 'legend' element:
html5 li
W3C HTML5 'li' element:
W3C HTML5 'link' element:
Flash + HTML5, for 110
html5 map
W3C HTML5 'map' element:
html5 mark
W3C HTML5 'mark' element:
html5 menu
W3C HTML5 'menu' element:
html5 meta
W3C HTML5 'meta' element:
html5 meter
W3C HTML5 'meter' element:
html5 nav
W3C HTML5 'nav' element:
html5 noscript
W3C HTML5 'noscript' element:
html5 object
W3C HTML5 'object' element:
html5 ol
W3C HTML5 'ol' element:
html5 one
HTML5 is not one big thing:
html5 optgroup
W3C HTML5 'optgroup' element:
html5 option
W3C HTML5 'option' element:
html5 output
W3C HTML5 'output' element:
html5 p
W3C HTML5 'p' element:
html5 param
W3C HTML5 'param' element:
html5 pre
W3C HTML5 'pre' element:
html5 progress
W3C HTML5 'progress' element:
html5 q
W3C HTML5 'q' element:
html5 rp
W3C HTML5 'rp' element:
html5 rt
W3C HTML5 'rt' element:
html5 ruby
W3C HTML5 'ruby' element:
html5 samp
W3C HTML5 'samp' element:
html5 script
W3C HTML5 'script' element:
html5 section
W3C HTML5 'section' element:,
html5 select
W3C HTML5 'select' element:
html5 small
W3C HTML5 'small' element:
html5 source
W3C HTML5 'source' element:
html5 span
W3C HTML5 'span' element:
html5 strong
W3C HTML5 'strong' element:
html5 style
W3C HTML5 'style' element:
html5 sub
W3C HTML5 'sub' element:
html5 summary
W3C HTML5 'summary' element:
html5 sup
W3C HTML5 'sup' element:
html5 table
W3C HTML5 'table' element:
html5 tbody
W3C HTML5 'tbody' element:
html5 td
W3C HTML5 'td' element:
html5 textarea
W3C HTML5 'textarea' element:
html5 tfoot
W3C HTML5 'tfoot' element:
html5 th
W3C HTML5 'th' element:
html5 thead
W3C HTML5 'thead' element:
html5 time
W3C HTML5 'time' element:
html5 title
W3C HTML5 'title' element:
html5 tr
W3C HTML5 'tr' element:
html5 ul
W3C HTML5 'ul' element:
html5 var
W3C HTML5 'var' element:
html5 video
W3C HTML5 'video' element:
html5 wbr
W3C HTML5 'wbr' element:
See inline-block and you
See font id
ie conditional comments
IE conditional comments:,
ie d:t
See ie display:table
ie display:table
IE6/7 display:table polyfill:
ie fixed
IE6 'position: fixed' fix:,,
ie fixedhack
See ie fixed
ie pngfix
IE6 PNG fix:,,,,,
ie xhtml
IE9 is the first version of IE to support "real" XHTML; all earlier versions of IE treat XHTML as plain ol' HTML.
ie z
See ie z-index
ie z-index
IE z-index bug:,,
IE6 countdown by Microsoft:
Ignorance is bliss:
You cannot ignore CSS rules, you can only override them with more-specific rules. See `specificity. Use !important only as a last resort.
See gaps
Inline formatting model:
See inline-block and you
inline-block and you
Cross-browser inline-block:
Browser inspectors let you see and modify styles in the page. Chrome: :: Firefox: :: Safari: :: IE:
See zen
This is very interesting--not really--but please take it somewhere else.
Should your Web site have a Flash intro?
Channels for commonly used software are unlikely to be invite only. Instead, it is more likely they require all members of the channel to be registered with nickserv. If you already are, just identify, then join. If not, execute the following for details: /msg nickserv help register
We don't implement IRP ( ) here. If you have a specific question, please ask. We won't do your work for you.
Learn how to avoid jank and optimize your site:
JAWS: A shitty $1000 screen reader for Windows.
JBOD: Just a bunch of divs
A programmer walks into a bar and upon seeing the table layout promptly walks out.
jquery - jQuery Javascript library :: :: Help in #jquery. ##javascript might be able to help
"text-align: justify" makes text harder to read:
know xhtml
Are you using XHTML? Read this:,,
Please keep all job ads in #css-lance.
Examples with proper markup and CSS:,,
less CSS preprocessor - - ##lesscss (A work in progress, stick around to help it grow.)
CSS libraries can cut down dev time and reduce headaches. Bootstrap: Foundation: Semantic: Pure: Bourbon: Even more:
See libraries
See libraries
line box
See linebox
How vertical-align works with line boxes: Inline formatting model:
Don't duplicate link text in the title attribute:
See lorem ipsum
How to style lists to look exactly how you want --
Please provide a live page or a working demonstration of your problem to make it possible to debug. If it's local or private, copy your HTML and CSS into a `testcase in a `paste server like or Screenshots and plain text code pastes are difficult to debug.
See progress
See lorem ipsum
lorem ipsum
Lorem Ipsum placeholder text -
See rtl
material -> (Bootstrap) • (Web Components) • (React) • http://materializecss.com
Materiel: Supplies and equipment used in military or business management. You probably wanted Google's design spec. Ask me about `material
See collapsing margins
media queries
media types
CSS media types:
See media queries
meta viewport
Control the viewport on mobile devices -
See mobile fixed
See mystery meat navigation
mobile fixed
Position fixed on various mobile platforms:
See mockup in markup
mockup in markup
Make your mockup in markup:
Common compatibility problem scanner and other tools to help support new and old IE:
See media queries
multiple backgrounds
Multiple backgrounds on the same element:
mysterious gaps
See gaps
mystery meat navigation
Mystery Meat Navigation - Unrevealing icons. No textual descriptions. No idea where to go ::
See Max z-index
neon green
It's my favorite color.
Another satisfied customer! Next!
no dropdown menus
Dropdown menus? No Thanks!:
no hover
See nohover
no pms
See why no pms
Non Hover:, End Hover Abuse Now
Please do not paste any code into the channel, not even 2 lines. Use one of the live pastebins (see `paste).
Don't reset, normalize:
not divitis
It's not divitis:
not same
See same
No tables for layout:,
See notransitioning
Asking for help with NSFW content is alright if it is not distasteful, however you must explicitly note the NSFW nature of the content before and near any links to it for those who do not wish to see or work with such material.
No tables for layout: , ,
CSS 'opacity' property:
The volunteers here may express their opinion. Feel free to respectfully disagree, but they usually have more experience backing up that opinion.
See selectoracle
CSS values order: [4 values] top right bottom left, [3 values] top right+left bottom, [2 values] top+bottom right+left
Why we don’t have a parent selector
These live pastebins allow us to see what you're seeing • Screenshots can't be inspected with website debugging tools
See paste
See pastebin
CSS Design Patterns:
PEBKAC: Problem Exists Between Keyboard And Chair
Markup, styling, and behaviour perfection:
Help for PHP is in ##php. You must be registered and identified with NickServ to enter. We cannot help with PHP issues.
picking colors
Why programmers suck at picking colors:
pixel perfect
Pixel perfect? Also see ´ignorance
placeholder |
Poor planning on your part does not constitute an emergency on ours.
See why no pms
See why no pms
See ie pngfix
The master list of all HTML5 Polyfills:
I don't play table tennis.
See pixel perfect
prefix ref
See css prefix ref
The channel is charity. Private message is consulting. Please keep your questions in the channel so everyone can help. Please do not PM without asking permission.
project management
Project management:
proper font sizing
Use relative font sizing:
We are not a Google proxy. Also, as an example, just because X is a web technology, CSS is a web technology, and thus some people in #css might use X with their websites, this doesn't mean #css is the right place to ask your questions about X. Please ask in the appropriate channels.
Pure.css - A set of small, responsive CSS modules:
This is a good question: ”Hi,, how do I get the two columns aligned at the top?”
See quirks mode
W3C Quality Assurance Tools:
See quirks mode
quirks mode
Quirks Mode:
See quirks mode
Accessible and pretty radio buttons
Reasonable Person Principle: Assume people are being reasonable (
Common good CSS references to help you, in no particular order: ,
See replaced elements
replaced content
See replaced elements
replaced elements
See normalize
See schools
To get started with responsive designs:
See replaced elements
Directionality and how to use Right-to-Left languages:
Channel rules can be found at
same | |
same height
See sameheight
Same height columns: Method 1:, Method 2:, Method 3: -- The easy way, no IE6/7 support:
Syntatically Awesome Style Sheets - - Get help in #sass
See schools
Resources to help you get started:
Sorry, all of the channel psychics are at the manicurist. So you had better state your problem, and give the url to the page displaying the issue. Someone might be able to help you before they get back.
Using sectioning elements:
The users in this channel have likely never seen your site before. Please describe what the problem looks like so they can identify it. "You'll see" doesn't work as it could be anything.
See selectors
The Select Oracle explains what a CSS selector means in human language:
See css select
Learn about semantic HTML structure:
Semantic markup:,,
Search Engine Optimization :: Help in ##seo :: Guide by Google:
HTML/CSS/JS – Why separate?
See sameheight
See browser shots
shrinking gaps
Controlling gaps between inline-level elements: ,
See css shrink-wrap
Skeleton: Responsive CSS boilerplate (minimalist library):
See carousel
See slideshow
See sliding doors
sliding doors
Sliding doors:
How to get answers on IRC:
Yeah, no. Use English, please. Unless you mean the Sydney Morning Herald, in which case, please use caps.
Rank rou, Raggy!
See factoids
Son of Suckerfish drop down menus:
See css specificity
CSS Sprites:
Please provide a Short, Self Contained, Correct [validating], Example ( )
See footer
All the rounded corners, text shadows and translucent effects in the world cannot make a bad design good.
Survey-like questions such as "Does anyone use XXX?" or "Who here has done YYY?" are not very good in #css -- it is usually much better to actually describe the problem you are trying to solve.
No tables for layout:
See element
A CSS "rule" is a <selector> followed by a <declaration>. A "declaration" is a set of <property> and <value> pairs enclosed in curly braces { ... }. A "stylesheet" is made up of one or more <rules>.
It is infinitely easier to debug your problem if you provide an example page displaying it. Please use to create such a page. When creating your ‘test case’, please use the minimum amount of markup and styles required to reproduce the problem.
test case
See testcase
See testcase
a (pared-down) testcase is a page that isolates the problem with the minimum required markup, styling and scripting. See `paste for services that easily let you create such testcases for others to see.
thank you
You're welcome!
See progress
Try It And See - The best way to learn if something works! "Do I..." "Should I..." "Does this work..." are answered best by trying it. If it doesn't work, ask us why.
tl;dr: "Too long; didn't read".
We're a help channel for CSS. Even though CSS may be related to various technologies by being used on the web, your question is something you should take to a more relevant channel.
too far
Are we taking CSS too far?
topic - What is on-topic for #css
Channels with a specific focus that may help you better: ##bootstrap ##lesscss #sass #compass ##design
See transitions
Everything you ever wanted to know about CSS transitions
CSS triangle generator:
typography ,
unitless line-height
Don't use a unit for line-height:
CSS units of measurement: :: ::
In order to help, we need a URL to the `live site or a `testcase that demonstrates the problem. Please don't make us log in or create accounts. See `paste for paste sites
using - How to use #css effectively
In order to make use of UTF-8-encoded Unicode, you must meet all of the following criteria: a) the page must be saved with UTF-8 encoding; b) the 'Content-Type' HTTP header must specify the UTF-8 encoding; c) data pulled from databases must be saved UTF-8-encoded; d) any database connections must be using UTF-8.
See utf-8
Having invalid markup or CSS is fine, as long as you're aware of the potential implications. Use validation as a tool, having valid markup or CSS should never be a goal in itself.
See validators
Official validators: Markup validator at, CSS validator at
See help vampire
Help vampires:
Why “variables” in CSS are harmful:
vert center
See vertcenter
See vertcenter
See vertcenter
How to center everything, including vertically center:
vertical center
See vertcenter
CSS Vocabulary:
See w3schools
W3Schools: errors, omissions, deceit. They are *not* affiliated with the W3C. Please stop reading/pointing to them! See
It's good to be back.
See caniuse
rivvles web database:
web design
Web design considerations:
web justify
Don't use text justification on the web: Although it might work out well if you use (but if you do, set the style with JS!)
See web design
Web Font Delivery Services:;hl=en&amp;authkey=CM-noLsD#gid=2
See webfont
webkit font smoothing
Making Webkit's font smoothing on Macs behave:
what not to do , , , ,
See font id
whatwg html
WHATWG 'html' element:
why no pms
why separate
See separate
why validate
Why validate?,
See why no pms
See what not to do
WordPress Blog/CMS ( :: Help in #wordpress
See doesn't work
See wordpress
WYSIWYG (What You See Is What You Get) website editors often create HTML that is extremely difficult to style. If you can't edit your HTML by hand, it will likely be hard to achieve things that CSS makes possible.
XHR (short for XMLHttpRequest) is the ECMAScript HTTP API. It allows scripts to perform HTTP client functionality, such as submitting form data or loading data from a server. See
XHTML: HTML as an XML application. XHTML1.0 spec at, XHTML1.1 spec at Also see 'know XHTML', 'XHTML2'.
xhtml faq
xhtml future
See xhtml2
XHTML2 was abandoned due to a lack of interest. See Also see 'Know XHTML'.
The XY problem: You want to do X, but don't know how. You think you can solve it using Y, but don't know how to do that, either. You ask about Y, which is a strange thing to want to do. Just ask about X.
CSS 'z-index' only applies to "positioned elements"; that is, elements with a value for the `position` property other than the default value of `static`.
z context
z-index stacking contexts:
Hooray, I'm useful!