search

HTML+CSS

hashtag
Notes taken prior to 2018.

Warning: This file is ultra long.

hashtag
Developer Tools

http://chrispederick.com/work/web-developer/

https://developers.google.com/chrome-developer-tools/

hashtag
Force Browser to Refresh its Cache

When you change your HTML/CSS code your browser may not display the changes after refreshing the page. This is because it gets the page (or some of the page info) from its cache.

In this case you want to force the browser to refresh its cache using:

  • ctrl + reload button

  • ctrl + F5 : windows IE & windows chrome

  • ctrl + shift + r : Firefox

hashtag
HTML validator

You need to validate your pages to make sure there is no incorrect/invalid HTML.

Official HTML validator: http://validator.w3.org/

Firefox extension - HTML validator (and also corrector): http://users.skynet.be/mgueury/mozilla/index.html

hashtag
CSS validator

You also need to validate your CSS to make sure there is no incorrect/invalid CSS.

W3C CSS Validation Service: https://jigsaw.w3.org/css-validator/

hashtag
HTML Doctype

Document Type Definition (or DTD) defines what tags, attributes and values are valid for a particular type of HTML.

If you want a web page to appear correctly and consistently across web browsers you must include a doctype declaration at the beginning of this page.

The doctype declaration must be the first line in the HTML file.

If the doctype is mistyped or incorrect, the web browsers reading your page will most probably put themselves in an altered state called quirks mode.

Quirks mode is when a browser puts itself in a mode where it'll interpret the HTML as if it was written years ago (circa 2005 for instance).

Read more about Quirks Mode and Strict mode on https://www.quirksmode.org/css/quirksmode.html

Official DTD lists:

https://www.w3.org - Valid DTD list

hashtag
IE8 Compatibility View & Quirks mode

Quirks mode: In IE9 & earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5

Compatibility view: For different reasons IE8 can put itself in a Compatibility View which will make IE pretend to be in IE7.

This can happen if:

  • the user browsing your site with IE8 clicks on "compatibility view" button (Tools >> Compatibility View) https://www.sevenforums.com/tutorials/1196-internet-explorer-compatibility-view-turn-off.html

  • Microsoft puts your website on their Compatibility View List https://learn.microsoft.com/en-us/previous-versions//dd567845(v=vs.85)?redirectedfrom=MSDN

In IE8 you can see your "Browser Mode" and "Document Mode" in the top bar of the Developer Tools (F12 or "Tools" >> "Developer Tools")

Code to instruct IE8 to ignore Compatibility View and Compatibility View List

<meta http-equiv="X-UA-Compatible" content="IE=8" />

You want to put this in the <head> section of your HTML page (before the CSS and JavaScript includes?? as the first thing in the <head> element?? "non expected" code above the header tag could also jeopardise this instruction).

hashtag
IE9 Compatibility View & Quirks mode

Quirks mode: In IE9 & earlier versions, quirks mode restricted the webpage to the features supported by Microsoft Internet Explorer 5.5

Compatibility view: Similarly to its previous version, IE9 can also put itslef in a Compatibility View or Quirks Mode which will make IE pretend to be in IE8, IE7 or older.

Code to instruct IE9 to ignore Compatibility View & Quirks mode

To force to be in the latest version standard mode available

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

To force to be in IE9 standard mode whatever the directive (not sure what this implies..!)

<meta http-equiv="X-UA-Compatible" content="IE=9" >

To force to be in IE8 standard mode (if avaibable??)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >

To force to be in IE8 standard mode whatever the directive (not sure what this implies..!)

<meta http-equiv="X-UA-Compatible" content="IE=8" >

You want to put this in the <head> section of your HTML page (before the CSS and JavaScript includes?? as the first thing in the <head> element?? "non expected" code above the header tag could also jeopardise this instruction).

Read more:

  • http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge

  • http://www.mat-wright.com/2011/02/internet-explorer-9-compatibility-quick.html

hashtag
Rendering engines

Displays the HTML and/or Flash and process the JavaScript.

Some rendering engines:

  • WebKit - Safari & used by Chrome was until version 27 (June 2013) https://en.wikipedia.org/wiki/WebKit

  • Blink - since July 2013: Google Chrome (version 28+), & Opera (15+). (Blink is forked from WebKit) https://en.wikipedia.org/wiki/Blink_(browser_engine)

  • Gecko - Mozilla Firefox https://en.wikipedia.org/wiki/Gecko_(software)

  • Trident - Internet Explorer https://en.wikipedia.org/wiki/Trident_(software)

  • KHTML - Konqueror web browser https://en.wikipedia.org/wiki/KHTML

  • Presto - used by Opera until version 14 (June 2013) https://en.wikipedia.org/wiki/Presto_(browser_engine)

hashtag
Viewport

This is the display area of a web browser window.

hashtag
HTML comments

<!-- ...some HTML code... -->

hashtag
CSS comments

/* ...some CSS code... */

hashtag
HTML special characters

These are the characters that need to be coded for HTML, such as "<", "&" and "©".

Read the official reference: https://www.w3.org/TR/html4/sgml/entities.html

Read more about HTML special characters on www.tedmontgomery.com

hashtag
HTML most common tags

<h1> to <h6> to indicate keywords (not for styling "only")

<div>

<a>

<span>

<dl> along with its children <dt> and <dd> http://reference.sitepoint.com/html/dl

<ul> and <ol> along with their children <li>

<strong> & <em> also to indicate keywords (not for styling "only")

hashtag
HTML IE conditional statement:

<!--[if IE ]> <link href="ie_stylesheet.css" rel="stylesheet" type="text/css"> <![endif]-->

In this case we use it to import a stylesheet for specific browser.

more on https://learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)?redirectedfrom=MSDN

hashtag
Styling "insertion" techniques

hashtag
1. HTML Include CSS directly in the HTML page (Internal Style Sheet)

Add the following in the <head> element of your HTML page

For all type of media, these formats are valid:

/* Is equivalent to */

For a specific media type (print for instance), these 2 formats are valid:

hashtag
2. HTML Include CSS file (External Style Sheet)

Add the following in the <head> element of your HTML page

hashtag
3. CSS Include CSS file

Thanks to this method you can group all your (non conditional) css import in one css file

Read more on including Internal and External style sheets:

  • https://www.htmldog.com/guides/css/advanced/atrules/ - atrules

  • https://www.w3.org/TR/CSS2/syndata.html#at-rules - atrules

hashtag
4. Include the style directly in the HTML (Inline styling)

This allows you to style directly a specific element. It is recommended to avoid this technique.

It is quite handy to use this technique to quickly have a rough idea of the look of an element when styling it though. The styles used can then be moved to a style sheet.

hashtag
CSS - Inheritance

Some CSS properties are inherited from a parent element. But many CSS properties don't pass down to descendant tags at all.

As a general rule, properties that affect the placement of elements on the page or the margins, background colors, and borders of elements aren't inherited.

In the case of any conflicts from inherited properties, the nearest ancestor wins.

You can force an element to inherit a property from his parent element by using inherit keyword

Read more

  • https://www.w3.org/TR/CSS2/cascade.html#inheritance

  • https://www.dnncreative.com/IntroductiontoCSSandinheritanceinDotNetNuke/tabid/265/Default.aspx

hashtag
CSS - Styles priorities

CSS properties from the style attribute (called inline styling) always have priority on properties from any style sheet.

If two styles from a same style sheet apply to a same element (ie. the first specifies "font:10px" and the second "font:20px"), the one appearing the last in the style sheet wins ("font:20px" in our example).

If two styles from two different style sheets apply to a same element, the style that appears last will be applied. Which means, the style that is in the style sheet included last will have the priority.

For this reason, you should/must add your external style sheet first and insert your internal styles after.

Properties from a style specifically applied to a tag beat out any inherited properties.

If more than one style applies to a particular element, then a web browser combines the properties of all those styles, as long as they don't conflict.

hashtag
CSS - Specifity

This is the way the "strength" or priority of a style is calculated.

An approximation to calculate it is to count:

  • 1 point for a tag selector

  • 10 points for a class selector

  • 100 points for an ID selector

  • add those points if a selector is a descendant selector (ie. ".my-class-name ul a" equals to 12 points)

Read more on https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

hashtag
CSS - !important

Including !important after a property value means that specific property always wins (wherever your stylesheet is).

When two styles both have !important applied to the same property, the more specific style's !important rule wins.

It generally best to avoid this technique as you may want to override this property someday.

hashtag
CSS Normalise vs CSS Reset

Both intend to override any browser-specific defaults.

hashtag
Reset CSS

Reset CSS is hardcore mode: removes all defaults.

Created around 2008

  • IE 6, 7 were ubiquitous

  • Chrome didn't exist

  • multiple CSS engines existed all providing different default presentations

hashtag
Normalise CSS

Normalise CSS is prettifier mode: sets many defaults.

Created around 2012

  • Chrome existed, and used webkit (what Safari used)

  • Opera was moving to webkit (what Safari used)

  • IE6 usage had dropped below 1% globally

  • Today there are two big CSS Engines providing fairly similar default presentations

  • Blink / Webkit (Blink is a fork of Webkit)

  • Quantum

hashtag
CSS Normalise vs CSS Reset: Common Usage

hashtag
Testimony in 2024

Use a normalize and throw on top my own handspun baselines:

  • Typography baseline for making sure every.single.html.element has a style https://www.npmjs.com/package/typography-baseline.css

  • Table baseline for making sure tables don't look like garbage https://www.npmjs.com/package/table-baseline.css

  • Form baseline for making sure all inputs and form elements look decent https://www.npmjs.com/package/form-baseline.css

hashtag
Testimony in 2025

I prefer resets over normalize. I don't want default browser margins and values mucking with my designs.

hashtag
CSS Normalise

Normalize CSS by Nicolas Gallagher (Necolas)

  • https://github.com/necolas/normalize.css

  • https://www.npmjs.com/package/normalize.css

Normalize CSS by Sindre Sorhus

  • https://github.com/sindresorhus/modern-normalize

  • https://www.npmjs.com/package/modern-normalize

Normalize CSS by Jonathan Neal

  • https://github.com/csstools/normalize.css

hashtag
CSS - Reset Stylesheet

The reset stylesheet is very important. It is used to override browsers default styles of some elements to your own custom values. The aim is to reduce browsers inconsistencies.

www.cssreset.com - reset stylesheet

hashtag
HTML/CSS IDs and Classes

Allowed characters: must begin with a letter & cannot contain symbols like &, *, or !

Best practice is to never use IDs, but if you do, an ID must be applied to:

  • an element appearing only once per page.

  • link to a specific part of a page

  • use JavaScript's getElementById() function

HTML element with an ID applied to it

<div id="unique-page-results"></div>

CSS for the element of id "results"

Class can be applied to:

  • several elements in the same page

  • an element appearing several times in the same page

HTML element with a class applied to it

<div class="massive-font"></div>

CSS for the element of id "results"

Multiple classes assigned to an element

An element can have multiple class name to apply several styles "at the same time".

HTML div element

<div class="black-border grey-background"></div>

css style for each class

hashtag
CSS selectors, pseudo classes & pseudo elements

Pseudo classes (or pseudo elements) are used to select an element dynamically: in a specific state/position for instance.

:hover let's you style an element differently when the user hovers his mouse on an element

:first-child is a CSS2 selector (supported by IE8)

In this case the first child can be of any type

:last-child was added in the CSS3 specification (not supported by IE<9)

:before let you add content preceding a given element

Examples of attribute selectors

[type="text"] selects text boxes in form with class="wickedForm".

a[href^="http://"] and a[href^="https://"] selects all the links starting by "http://" or "https://", in other word: all the absolute links. "^=" means "starts with".

a[href$=".pdf"] selects all links finishing by ".pdf". "$=" means "finish by".

More about attribute selectors on

  • www.w3.org/TR/CSS2/selector.html#attribute-selectors

  • http://css-tricks.com/5591-attribute-selectors/

  • http://stackoverflow.com/questions/3338680/css-selector-by-class-prefix/

There are more pseudo classes such as: :first-line, :first-letter, :focus

Pseudo classes and pseudo elements are distinguished in CSS3 specification. Pseudo elements are selected using 2 semi-columns such as ::first-child

hashtag
CSS Colors - Text, Background, Borders...

When adding/editing colors, you have the choice between 3 formats:

  • Hexadecimal - supported by old IE browsers

  • RGBa - supported by IE9+, see http://css-tricks.com/rgba-browser-support/

  • HSL & HSLa - supported by IE9+, see http://caniuse.com/#search=hsl and http://browsersupport.net/CSS/hsl() and also http://css-tricks.com/yay-for-hsla

HSLa color pickers:

  • http://css-tricks.com/examples/HSLaExplorer

  • http://hslpicker.com

  • http://mattgroeber.com/utilities/random-color-generator

  • http://mothereffinghsl.com

HSLa: As stated by CSS Tricks "The real appeal of HSLa is that it makes more intuitive sense what changing the values will do to the color. Increasing the second value will increase the saturation of that color. Decreasing the third value will decrease the lightness of that color. That makes creating your own color variations on the fly way easier. I would wager that most of us can't create nice and consistent color variations like this using the RGBa model. The HSLa model also makes changing color values programatically much easier."

hashtag
CSS Shorthand properties

CSS Shorthand properties let you set the values of several other CSS properties simultaneously.

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

hashtag
CSS Font & Text Properties

Font shorthand property.

This shortcut declaration must separate each value by a space except for the font-size/line-height properties.

This shortcut declaration must include at least font-size and font-family.

pxToEm.com - calculate the font size to apply in px/em to a text in order to get to a particular font size in px

Some more Font/Text related properties

Serif fonts have tiny "feet", these are mostly used for long passages of text.

Sans-Serif fonts haven't got those tiny "feet", these are often used for headlines.

Monospaced fonts has each letter with the same width., these are often used for computer code.

A font present in windows OS may not be present in Mac or Linux OS. W3C doesn't have a standard list simply because they aren't the ones who determine what fonts are installed on what computers/OS.

Some of the most common fonts: Verdana, Arial, Courier New, Georgia, Comic Sans MS, ...

Capitalize the 1st letter & lower case the rest: http://stackoverflow.com/questions/22566468/first-letter-capitalize-and-other-letters-in-lower-case-in-css

Read more:

  • http://stackoverflow.com/questions/13198119/safe-fonts-all-browser-and-os

  • http://webspaceworks.com/resources/fonts-web-typography/48/

text-shadow is a property from CSS3 that adds shadows to your text

Read more https://hacks.mozilla.org/2009/06/text-shadow/

CSS Fonts imported

@font-face allows you to host your font on the server side, the client's browser will download it when visiting your website if it does not already has it on the computer.

Read more about @font-face on

  • https://www.webfx.com/blog/web-design/font-face-guide/

  • www.FontSpring.com/blog/the-new-bulletproof-font-face-syntax

  • www.FontSpring.com/blog/further-hardening-of-the-bulletproof-syntax

  • https://github.com/sorccu/cufon - Cufon - Fast text replacement with canvas and VML (no Flash or images required: JavaScript based solution)

  • https://fonts.adobe.com/ and https://fonts.adobe.com/docs/api - adobe fonts, frmly TypeKit - javascript based solution for fancy fonts

  • www.myfonts.com/WhatTheFont/ - find out what font is used by submitting an image

CSS Align text horizontally

Stretches the lines so that each line has equal width (like in newspapers)

text-align:inherit;

Value should be inherited from the parent element

hashtag
CSS Lists

The list-style-type specified will only be displayed if the the list-style-image specified can't be found.

The above shorthand declaration is the same as:

Read more:

  • http://css-tricks.com/almanac/properties/l/list-style/

  • http://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1

  • http://stackoverflow.com/questions/10877/how-can-you-customize-the-numbers-in-an-ordered-list

hashtag
CSS Margins and Paddings

The padding sets the space between the content, border & edge of the background.

This declaration shortcut defines the padding on each side of our element "clockwise".

The margin sets the space between an element's border and another.

Like the padding declaration shortcut, we define the margin on each side of our element "clockwise".

hashtag
CSS Box Model

Vertical margin can collapse

A browser could only be using the top or bottom margin of one of two elements when vertical margins touch, even when one element is inside another, instead of adding the two margins. A browser would apply the larger margin of the two.

You can use top/bottom padding to avoid this.

hashtag
CSS display property - inline & block elements

HTML elements have a default value for their display property to either block or inline.

display: inline;

Inline elements are displayed one after another. Inline elements do not create a line break before or after them.

Width on inline elements have no effect.

Top & bottom margin & padding have no "regular" effect on inline elements. Instead of "moving" itself & elements around the inline element, that top & bottom padding/margin just causes borders and background to overlap elements above and below the inline element.

display: block;

Block elements create a line break before and after them.

default block elements' width is 100% (of their parent element)??

display: inline-block;

Leaves the element inline, but paddings, margins, borders, width and height are applied.

display: none;

https://htmldog.com/guides/css/intermediate/display/ - display property

https://htmlhelp.com/reference/html40/block.html - Block level elements

hashtag
CSS - Remove Whitespace Between Inline-Block Elements

  • https://css-tricks.com/fighting-the-space-between-inline-block-elements/

  • https://davidwalsh.name/remove-whitespace-inline-block

  • https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements

hashtag
CSS - hide/remove element from page

visibility: hidden;

This technic just hides the element but leaves a hole in the space it woul normally appear

display: none;

This technic removes the element completely from the page

hashtag
CSS Width and Heights

You might want to use the min/max properties to make sure an element does not "collapse" or become too big.

A box (the total space taken by an element) "actual" or "total" width and height is the total of the widths of the margin, borders, padding and width/height properties.

However, you can use Box-sizing to force the "element width + padding width" to be equal to the width you defined for your element.

see www.paulirish.com/2012/box-sizing-border-box-ftw and http://css-tricks.com/box-sizing

warning: min-width & max-width do not work with box-sizing: border-box is a known bug in IE8 and Firefox 16&below. see http://stackoverflow.com/questions/9508262/min-height-min-width-doesnt-respect-box-sizing-in-some-browsers and http://stackoverflow.com/questions/11608291/box-sizing-border-box-for-ie8

hashtag
CSS Position property

Unlike with float-based layout, CSS gives no way to clear the bottom of a positioned column.

position: static;

This is the default positioning of all HTML elements.

position: relative;

TBC: When you set an element's position to relative and then place it (maybe using the left and top properties), it moves relative to its current position and leaves a big hole where it would've been if you hadn't positioned it at all.

You want to set an element's position property to relative if you need to place (absolutely positioned?) elements relatively to it. These children-elements will have their position property set to absolute.

position: absolute;

Absolutely positioned elements are removed from the flow of the HTML.

Absolutely positioned elements put themselves above any other elements. Unless this element is a sub-element of a relatively/absolutely/fixed positioned element.

Absolute positioning let you place elements on a page regardless of their HTML order.

When an element is absolutely positioned, it is positioned relative to the viewport if it is not in any other element that is absolutely, relatively or fixed positioned.

If 2 absolutely positioned elements are not positioned specifically (as in, using px for instance), the one that appear latest in the HTML will be on top of the other.

Specify an absolutely positioned element's location using left, right, top or bottom (pixels, em, or percentages)

position: fixed;

Like absolute positioning, fixed positioned elements are removed from the flow of the HTML. It floats above other parts of the page.

Like absolute positioning, fixed positioning let you place elements on a page regardless of their HTML order.

Unlike absolute positioning, fixed positioning is always relative to the browser window.

How to keep a footer at the bottom of the page

  • https://matthewjamestaylor.com/bottom-footer

  • https://css-tricks.com/snippets/css/sticky-footer

  • https://jsbin.com/gawuqejaqugu/6

hashtag
CSS z-index property

z-index only effects elements that have a position value other than static (the default)

The z-index property in CSS controls the vertical stacking order of elements that overlap.

see http://css-tricks.com/almanac/properties/z/z-index/

hashtag
CSS Float property

The float property moves an element to either the left or right. The content below the floated element (in the document) moves up & wraps around the floated element.

The float property can be applied to all types of positioning (static, absolute, relative & fixed).

Possible float values:

Floating any element makes it a block-level element (because it needs a set width).

The width property should be set on an element that is floated. This allow control on how much space is left to the content below it to move up and wrap around it.

The clear property should be set on an element so that it does not wrap around a preceding floated element.

clear:left;

drop the element if wrapping around a left-floated elements

clear:right;

drop the element if wrapping around a right-floated elements

clear:both;

drop the element if wrapping around a left-floated or right-floated elements

clear:none;

turns off clearing, wraps the element around left-floated or right-floated elements

more about float on guistuff.com - floating elements

clear fix hacks:

This is to make sure that the height of a parent element is the total of its children elements height, even if these are floating.

  • deadlink - clear fix hack (cross-browser) using overflow:hidden on parent

  • https://nicolasgallagher.com/micro-clearfix-hack/ - clear fix hack (cross-browser) using clear:both after last child

hashtag
CSS Overflow property

overflow: visible;

Browser's default value

overflow: scroll;

Add scroll bars.

overflow: auto;

Adds scroll bars only if needed.

overflow: hidden;

Hides any content that extends outside the box.

Hides any content that extends outside the box on the X axis. When this content is text, it adds 3 dots "..."

Read more:

  • https://css-tricks.com/the-css-overflow-property

  • https://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet (text-overflow x-browser support)

  • http://css-tricks.com/line-clampin/ - ellipsis on several lines

hashtag
HTML/CSS Dynamically (not a set width) Center (horizontally) a Div within a Div

inline elements can be centered with text-align ;)

read more about "centering the unknown": https://css-tricks.com/centering-in-the-unknown/

hashtag
Centering horizontally & vertically

  • https://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css

  • https://css-tricks.com/centering-css-complete-guide

hashtag
Make several div positioned one next to another be of the same height

This is normally only achievable using tables. Hence you must declare in CSS display:table-cell;

read more:

  • http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-positioned-side-by-side-with-html-css

  • http://stackoverflow.com/questions/2715360/html-css-set-div-to-height-of-sibling

  • http://stackoverflow.com/questions/22253122/make-variable-number-of-divs-positioned-side-by-side-of-equal-height-with-html-c

  • https://css-tricks.com/equal-height-blocks-in-rows (js solution)

hashtag
Make a div fill up the remaining width

my 2 cents: http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width/22719552#22719552

Browser Support

Tested on BrowserStack.com on the following web browsers: IE7 to IE11, Ff 20, Ff 28, Safari 4.0 (windows XP), Safari 5.1 (windows XP), Chrome 20, Chrome 25, Chrome 30, Chrome 33, and Opera 20

see http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width

or maybe even better http://stackoverflow.com/a/22719552/759452 and http://stackoverflow.com/questions/7189608/how-do-i-make-an-input-element-occupy-all-remaining-horizontal-space/7190310#7190310

hashtag
iframe - styling

https://stackoverflow.com/a/13959836/759452

hashtag
Link - Redirect to top of the page

<a href="#">Click me!</a>

hashtag
Links - <a> element

Ideally, you want your links to be right clickable (to be able to: open in a new window, copy link, & so on), hence you will you the <a> element. This will also help an easier crawling (SEO) of your website.

For links which are not in the text (ie. a link in a menu), you ideally want your link to take the whole space it is allocated, that is, whether your clic on the text or on the hover-styled part next to it it should open the relevant page. This is usually achieved by making the link a block.

The following code snipet can be taken as a base (note: nice border effect). see http://jsfiddle.net/eWGY3/1/

Links have pseudo-class selectors (matching states):

a:link{}

unvisited link

a:visited{}

visited link

a:hover{}

when mouse over link

a:active{}

when clicking on link

a:focus{}

when using the keyboard to tab on link

You must specify the different link-state styles in specific order (otherwise some will override others)

You might want to apply a different type of cursor when user hovers your link (notice you don't need the ":hover")

a { cursor: hand; cursor: pointer }

Shading effect on links when over or focussed

You generally want to use CSS sprite when adding background images to links

hashtag
CSS Cursors

Read more on

  • https://stackoverflow.com/questions/2076468/cross-browser-cursorpointer

  • https://quirksmode.org/css/user-interface/cursor.html

  • https://caniuse.com/?search=cursor

  • https://www.cursor.cc/ online custom cursor editor

hashtag
CSS Element Opacity

Opacity: can be used as some kind of filter

see http://css-tricks.com/snippets/css/cross-browser-opacity/

The opacity is not inherited the same way on different browsers and different browser versions.

When applied on images, different effect can be achieved depending on the:

  • image being transparent (png, gif) or not (jpg) https://stackoverflow.com/questions/9147883/only-png-supports-transparency-is-that-true

  • image being colored or greyscaled (black & white)

  • background color of the element "around" the image (it must match the size of the image)

Opacity on colored image (transparent or not) without background for surrounding element: this render the image more or less transparent. see http://jsfiddle.net/KDtAX/2249/

Opacity on greyscale (B&W) image (transparent or not) without background for surrounding element: this render the image in grey if your image is black & simply in lighter grey if your image is already grey. see http://jsfiddle.net/KDtAX/2250/

Opacity on non-transparent (jpg) colored image with red background for surrounding element: this renders the image with some kind of colored filter. see http://jsfiddle.net/KDtAX/2248/

Colour opacity when hovering on image contained in link.

You can use this jQuery code to solve this inheritance discrepancy issues (in IE8 for instance)

more on https://www.quirksmode.org/css/opacity.html

hashtag
CSS Background color opacity

RGBa property solution:

background-color: rgba(95,156,140,.75);

The .75 defines the opacity of the background color. Compatible with IE9+, Firefox 3+, Safari 3+, Chrome.

css3pie, a JS library, provides this feature for IE older browsers. You will then write your CSS such as:

  • http://css-tricks.com/rgba-browser-support/

  • http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on

Opacity property solution:

Have an additional absolutely positioned child element (in a relatively or absolutely positioned parent) that is only there to contain the colored background. Then you can use the opacity property to make this element transparent. Since this element has no children, the opacity will not affect any other element.

  • http://stackoverflow.com/a/21984546/759452

  • http://stackoverflow.com/questions/3222961/how-to-make-a-transparent-background-without-background-image/21984546#21984546

hashtag
CSS Background properties

Background images are not used to be only in the background. This is because there are things you can only do with background images that you can't do with the usual <img> element.

You can use CSS sprites technique if you use many background images on your website.

A background image never extends outside its element.

Any element's background appears on top of its parent elements' background.

An element's background image cannot be placed relatively (according) to its right or bottom edges. A solution can be to create the background image with the empty space needed (at the bottom or right) and then place the image on the right or/and bottom edge of the element.

background shorthand property:

Mind the issue with GIF background image in Chrome https://stackoverflow.com/questions/7921092/chrome-does-not-render-gif-background-image

You usually also define the background color:

Background related properties

Background properties: https://developer.mozilla.org/en-US/docs/Web/CSS/background

Perfect full page background image: http://css-tricks.com/perfect-full-page-background-image/

Full width background image + below plain background color:

Multiple backgrounds: http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css

CSS2 Multiple background images: https://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/

CSS3 Multiple background images

https://www.css3.info/preview/multiple-backgrounds/

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

hashtag
CSS Border

border shorthand property:

border: 1px solid black;

Basic Border

The above can also be written:

Simple nice border for picture or other

Creates a border with a nice outer shadow on each side (IE8 cannot display the shadow though).

You can usually add "-top", "-bottom", "-left", "-right" in the border related properties, see:

You can turn off the display of a single border using the none keyword

border-left: none;

hashtag
CSS Rounded Border cross-browser work around

Supported in IE8 and a lot of other poor browsers as well as all the modern ones.

You need to create both roundedCorner_right.png and roundedCorner_left.png

hashtag
CSS3 Rounded Border

Supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera

border-radius shorthand property:

If you want to give different "roundings" to each corner

see http://stackoverflow.com/questions/1083755/webkit-border-radius-sometimes-take-effect

Read more on

  • https://www.css3.info/preview/rounded-border/

  • https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

hashtag
CSS3 Shadow boxing

Support IE9+, Firefox 4, Chrome, and Opera. CSS3PIE adds support for IE8.

Box-shadow with IE8 & below support (css3pie)

box-shadow: 1px 1px 10px #888;

Outer shadow on all sides

box-shadow: inset 1px 1px 10px #888;

Inner shadow on all sides

box-shadow: inset 0 20px 20px -20px #000000;

Top inner shadow - see https://stackoverflow.com/q/4756316

box-shadow: inset 0 -15px 15px -15px #000000;

Bottom inner shadow

box-shadow: inset 15px 0 15px -15px #000000;

Left inner shadow

box-shadow: inset -15px 0 15px -15px #000000;

Right inner shadow

Lateral rounded shadows example: https://jsfiddle.net/hz8WD/

Horizontal rounded shadows example: https://jsfiddle.net/hz8WD/1/

Read more on

  • https://hacks.mozilla.org/2009/06/moz-box-shadow/ - moz-box-shadow

  • https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - box-shadow

  • https://www.css3.info/preview/box-shadow/

  • https://css-tricks.com/snippets/css/css-box-shadow

  • https://stackoverflow.com/questions/6671375/css-box-shadow-top-and-bottom-only

  • https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only

hashtag
HTML/CSS Tables

text-align can be applied to table, th and td elements

text-align is an inherited property

tip: since text-align is inherited, if you apply a style to table, it'll be applied to all cells of the table

vertical-align can be applied to th and td elements

vertical-align is not an inherited property

"vertical-align: baseline;" is almost the same as "vertical-align: top;". see mozilla: vertical-align

vertical align (center vertically) a single line of text

Read more on how to align vertically:

  • https://phrogz.net/CSS/vertical-align/index.html

  • https://css-tricks.com/vertically-center-multi-lined-text

  • https://css-tricks.com/centering-css-complete-guide

hashtag
rowspan & colspan

  • https://htmldog.com/guides/html/intermediate/tables

hashtag
borders

Applying borders to a table element outlines just the table, not the cells themselves.

Clean "single" borders solution

Apply borders to the td element to outline all the cells.

By default, browsers usually separate tables cells by 2px. Use table element's cellspacing attribute to reduce it to 0.

Another issue arise: borders applied to cells double up, use table element's border-collapse property to fix this.

HTML of solution

CSS of solution

see also (cf. CSS reset): table{ border-spacing: 0; }

and also (so layout does not break): table{ table-layout: fixed; }

  • Cross browser table row styling https://creativepro.com/view-source-javascript-designers/

  • http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

Example of nice table design:

Setting all th and td's to "width: auto", then only specify the width for the columns you want (using th only). You can then let the browser calculate the width for the rest of the columns.

TODO: To be improved (check it is x-browser)

see also:

  • http://stackoverflow.com/questions/6140993/table-column-width-and-overflow-settings-are-not-working

  • http://stackoverflow.com/questions/4457506/css-how-to-set-the-table-column-width-constant-regardless-of-the-amount-of-text/4457905#4457905

  • http://stackoverflow.com/questions/1258416/word-wrap-in-a-html-table

hashtag
HTML/CSS Forms

hashtag
Form's action attribute

action is the only required attibute for the <form> tag. It specifies where to send the form-data when a form is submitted.

hashtag
Form tags

hashtag
<label> tag defines a label for an input element.

If the user clicks on the text within the label element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

select label for=”email“ in CSS:

label [for=email] { .. }

  • https://htmldog.com/guides/htmladvanced/forms/

  • https://alexking.org/blog/2005/07/18/css-checkbox-label-positioning (label positioning)

  • https://bytes.com/topic/html-css/answers/99329-nicely-wrapped-checkboxes-labels (wrap label on multiple lines)

hashtag
button vs input type="submit" vs input type="button"

button: has open & close tag, hence can have other tags inside

type="submit": no closing tag, submits the form

type="button": no closing tag, no default behavior

button: default to type="submit" so submits the form when clicked on

button type="button": allows you to prevent the default form submit behavior

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

  • https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use

hashtag
<input type="text"> expanding on focus

Given size when not focused - then bigger size when focussed.

https://jsfiddle.net/sDTfS/

hashtag
<input> tag is used to select user information

An input field can be a text field, a checkbox, a password field, a radio button, a button, and more.

input tag's optional attributes:

  • type specifies the type of input element

  • type="checkbox" let a user select several choices. The value setting defines what will be submitted if checked. Read more on how to align checkboxes and their label consistently across browsers https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

  • type="radio button" let a user select only one of a limited number of choices. The value setting defines what will be submitted if checked. etc...

  • maxlength specifies the maximum length (in characters) of an input field (for type="text" or type="password")

  • readonly elements are not editable, but DO get sent on submit, & can be focused (ie. when "tabbing" through a form).

  • disabled elements are NOT editable, are NOT sent on submit, & CANNOT be focused

Warning: radiobuttons & checkboxes do NOT support the "readonly" attribute!

Read more:

  • readonly & disabled https://www.w3.org/TR/html4/interact/forms.html#h-17.12

  • readonly vs disabled on https://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-te

  • Radio button : read-only https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly

  • Radio buttons & checkboxes : read-only https://bugzilla.mozilla.org/show_bug.cgi?id=88512

  • Checkboxes : read-only https://stackoverflow.com/questions/155291/can-html-checkboxes-be-set-to-readonly

  • Radio button : read-only https://www.sitepoint.com/forums/showthread.php?963049-Read-only-Radio-Buttons

hashtag
<textarea>

You might want to set the max-width & max-height (line height?) for this element. Otherwise the user might be able to expend it infinitely & mess up your design.

  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

  • https://reference.sitepoint.com/html/textarea

  • https://w3.org/TR/REC-html40/interact/forms.html#h-17.7

placeholder (IE10+): https://stackoverflow.com/q/4004087 and https://stackoverflow.com/q/2610497 and https://css-tricks.com/snippets/css/style-placeholder-text

hashtag
<input> element rounded border styling:

  • use border-radius property: "supported in IE9+, Firefox, Chrome, Safari, and Opera" https://www.w3schools.com/cssref/css3_pr_border-radius.php

  • input element rounded corners compatible with IE8+. see http://stackoverflow.com/questions/2654745/rounded-corners-of-input-elements-in-ie and https://code.google.com/p/curvycorners/

<input> element width filling 100% of remaining space:

  • wrap the input field in an element of display:block; & overflow: hidden;

see http://stackoverflow.com/questions/7189608/how-do-i-make-an-input-element-occupy-all-remaining-horizontal-space/7190310#7190310 and http://stackoverflow.com/questions/4873832/make-a-div-fill-up-the-remaining-width

hashtag
<input type="checkbox"> element styling:

http://stackoverflow.com/questions/16352864/how-to-display-image-in-place-of-checkbox/16353624#16353624 and http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css . note that "prettyCheckable.js" is not "compatible" with this technique "how to align checkboxes and their label consistently across browsers"arrow-up-right use the "data-label" option instead.

hashtag
<select> element styling

http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript and my solution http://stackoverflow.com/a/21623118/759452

hashtag
<select> element styling using js plugin

http://github.com/harvesthq/chosen and http://harvesthq.github.io/chosen - better select box (drop down)

hack for chrome autofill bg issue http://stackoverflow.com/a/14205994/759452

hashtag
Read more about forms

www.htmldog.com/guides/htmlbeginner/forms

hashtag
"Honeypot" Anti spam bot protection technique

  1. First you add the fields in the form

  1. Then hide the fields using CSS

  1. Finally check if one the fields got filled when validating form (via javascript or JSP for instance)

Anti spam bot protection technique for HTML forms: http://ustrem.org/en/articles/html-form-anti-spam-en/

hashtag
CSS - Printing a page

hashtag
Guidelines

Use percentages on main elements's width so that the page can be printed in different formats (portrait, horizontal, A3, and so on).

Remove margins & paddings as much as possible (try to use % if you use these, for vertical values you can only use px though).

Use page breaks when needed (warning: mind the limitations linked to page breaks, ie. not applicable on element located in floating elements)

Use when needed page-break-inside:avoid;

Print in B&W if needed (eco-friendly).

Remove background images (eco-friendly).

Display links' url in plain text if needed.

Use different unit of measurement than px:

  • point (pt)

  • centimetre (cm)

Page margin can be set using @page , this may not be cross browser though. see http://stackoverflow.com/questions/1542320/margin-while-printing-html-page

hashtag
Tech links

  • page-break-before https://www.w3schools.com/cssref/pr_print_pagebb.php

  • page-break-after https://www.w3schools.com/cssref/pr_print_pageba.php

  • page-break-inside https://www.w3schools.com/cssref/pr_print_pagebi.php

hashtag
Print styling - how to

Find the stylesheets applied when in print view (ie. in Chrome)

Then comment out all the other stylesheets

Finally, on the stylesheets normally applied for print view, change the attribute media to media="all"

Reload the page and do the styling changes required

hashtag
CSS3 Disable selection on elements

CSS only (works in Chrome 13.0.782.218 and Firefox 3.6.6, this does not work on IE8 and below)

This is the cross browser solution (so that it works on IE8 for instance)

Read more

  • https://stackoverflow.com - how to make html element unselectable

  • https://developer.mozilla.org -moz-user-select

hashtag
CSS3 Transition

Does not work on IE (even IE9).

Works on Firefox 4, Chrome, Opera, and Safari

Read more on

  • https://net.tutsplus.com - CSS3 Transitions

PreviousReact 13: Testing: RTLNextNode.js: Environment Variables

Last updated