CSS - How to make pages with style...

mail

How to make text not selectable ?

Since code is better than words, I often show some snippets, with comments about the snippet itself, not about the code : 
this is some code
myVariable = value		don't forget that value should be ...
do something with myVariable
Here the don't forget that value should be ... comment is to help you re-use this snippet but is useless in the code itself. So the snippet must be selectable for copy-paste EXCEPT these comments (try it ).

The comment is made non-selectable by the CSS property : 

user-select: none;

In the pasted text, the comment is replaced by 2 blank lines. I don't know how to workaround/fix this so far .
mail

CSS selectors

Selector Usage Notes
div, p select every <div> element and every <p> element This is actually a list of elements to select.
div p select every <p> element inside a <div> element 
<p></p>		not selected
<div>
	<p></p>	selected
	
	<p></p>	selected
</div>
div > p select every <p> element that is the direct child of a <div> element 
<p></p>			not selected
<div>
	<p></p>		selected
	
	<p></p>		selected
	<notADiv>
		<p></p>	not selected
	</notADiv>
</div>
div + p select every <p> element that is placed immediately after a <div> element 
<p></p>		not selected
<div>
	<p></p>	not selected
</div>
<p></p>		selected

<p></p>		not selected
div ~ p select every <p> element that is preceded by a <div> element and having the same parent 
<p></p>		not selected
<div>
	<p></p>	not selected
</div>
<p></p>		selected

<p></p>		selected
li:first-child select the element that is the first child of its enclosing element (i.e. parent) 
<ul>
	<li></li>	selected
	<li></li>	not selected
	<li></li>	not selected
</ul>
mail

3 columns in CSS, filled top to bottom

View the result (and feel free to view the source code )
mail

How to manually minify a CSS ?

Convert all 'newline' to Unix-style newlines :
mv style.css{,_TMP}; tr -d '\r' < style.css_TMP > style.css; rm style.css_TMP
Delete indentation :
sed -ri 's/^\s+//g' style.css
Delete indentation inside lines :
sed -ri 's/\s+([:{/])/\1/g' style.css
Remove space before and after ',;:{}()>+' :
sed -ri 's/\s?([,;:{}()>+])\s?/\1/g' style.css
Delete blank lines :
sed -i '/^$/ d' style.css
Make all this a very big long line !
mv style.css{,_TMP}; tr -d '\n' < style.css_TMP > style.css; rm style.css_TMP
Remove comments :
mv style.css{,_TMP}; perl -pe 's/\/\*.*?\*\///g' style.css_TMP > style.css; rm style.css_TMP
mail

CSS : how to add some text and an icon to an HTML element ?

To display something like this :

Noticed the text + icon on the left ?

This text is not selectable, and not found in the HTML source code
The HTML looks like this :
<p class="impatients">Noticed the text + icon on the left ?</p>
And the CSS :
.impatients:before {
	content		: 'For the impatients :';
	color		: #dd0044;
	text-decoration	: underline;
	margin-right	: 0.3em;
	text-shadow	: 0 0 0.1em #f08;
	}
.impatients:after {
	content	: url('./pictures/lightning.png');
	float	: left;
	}

Since there can be only one content property per CSS class, the trick is to add the text via the :before pseudo-class, and the icon with the :after pseudo-class. Then, the icon is "moved" to the left thanks to the float : left;.

mail

2 columns in CSS

There are several CSS methods (no HTML <table> required) to display contents on 2 columns :

The float method (demo, source)

HTML
<div class="column50percent">Left column</div>
<div class="column50percent">Right column</div>
CSS
div.column50percent	{ width:50%; display:inline; float:left; }

This method is fine until columns are shown using background-color or border : they may not have all the same height

The display: table method (demo)

HTML
<div class="column50percent">Left column</div>
<div class="column50percent">Right column</div>
CSS
div.column50percent	{ display:table-cell; width:49%; }
  • This method works fine BUT it is not supported by old browsers (such as IE6.... who cares ?)
  • It is not possible to define margin between columns.
  • A workaround would be to add invisible borders with border-right (see demo page source).

The CSS3 column-count method (demo, source)

HTML
<div class="containing">
	<div>start of columned content ...</div>
	<div>... columned content continued</div>
</div>
CSS
div.container { column-count:2; }
  • This works with any number of columns
  • This construct works well in situations where a long content (such as a newspaper article) has to be spread automatically in columns by the browser. This won't suit cases where you already have a column layout in mind (this goes in the left column, this in the right one). In such situations, other limitations may appear :
    • The browser will do its best to even the height of columns, which will need extra work if columns have different sizes
    • Aligning the top of same-height columns _may_ also prove difficult
mail

The CSS box model

CSS box model
mail

How to size text using em's ?

Good practices recommend using proportional font-sizes such as em and % to let readers increase / decrease the font size smoothly without breaking the page layout. em's are multipliers of the document's base font size, which is often defaulted to font-size:16px; by graphic user agents. So we have : 1em = 16px, which is fair but not really convenient.

Here comes a little hack : setting the default font size to 62.5% of its original value makes 1em = 10 px. To specify this in a CSS file, just do :

body { font-size:62.5%; }

When it comes to relative lengths, you can also use CSS3's rem (source).