This page provides various tips and trick that apply to CSS styling.
Tables or DIV/CSS layout
In the early days of this site, the layout of the site was built on nested tables where the width attributes were used to control the horizontal size of the page and its block components. A few years ago, I decided to replace this structural tables by <div> tags with the CSS attributes display:table, display:table-row and display:table-cell, to make a short list. I made the change but I did not know why.
Web sites written using DIV/CSS are considered to be coded cleaner while nested TABLEs on the other hand can increase page size and weight. Styled DIV tags are now considered the standard method for creating web design layouts by most web designers. DIV/CSS allows designers to change the entire look and feel of the web site by only making changes to the external CSS file.
Tables are the correct technology for tabular data. DIVs are the correct technology for page layout and defining objects on the page. DIVs are for page layout and TABLEs are for tabular data representation.
The use of DIV tags in combination with an external CSS creates smaller sized web pages which results in faster load times when compared to table based layouts. CSS move the styling code off-page and into an external file, thereby keeping page sizes as minimal as possible. DIVs offer more flexibility and you can change the layout of the complete site by just changing a few things in the CSS file(s).
The difference between :: and : in CSS
Recently, I noticed that certain developers used the syntax ::before instead of :before in their CSS files and I wandered what the difference was. In fact, the single colon syntax (e.g. ":before" or ":first-child") is the syntax used for both pseudo-classes and pseudo-selectors in all versions of CSS prior to CSS3. With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements (yes, they’re different), in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.
The :: syntax was introduced in CSS3 to help discriminate between pseudo elements and pseudo classes. Every browser that supports the double colon (::) CSS3 syntax also supports just the (:) syntax, but IE 8 only supports the single-colon, so for now, it's recommended to just use the single-colon for best browser support.
Now, let's make the difference between pseudo-classes and pseudo-elements.
Pseudo classes
Pseudo-class selectors are CSS selectors with a colon preceding them. They target whole elements. The W3C definition follows:
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
A pseudo-class always consists of a "colon" (:) followed by the name of the pseudo-class and optionally by a value between parentheses.
Pseudo-classes are allowed in all sequences of simple selectors contained in a selector. Pseudo-classes are allowed anywhere in sequences of simple selectors, after the leading type selector or universal selector (possibly omitted). Pseudo-class names are case-insensitive. Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document.Selectors Level 3 Section 6.6
A short list of pseudo-classes follows:
- :link - Perhaps the most confusion-causing link-related pseudo selector. Aren't all <a> links? Well not if they don't have an href attribute. This selects only those that do, thus is essentially the same as a[href]. This selector will become a lot more useful should any-element linking become reality;
- :visited - Selects links that have already been visited by the current browser;
- :hover - When the mouse cursor rolls over a link, that link is in it's hover state and this will select it;
- :active - Selects the link while it is being activated (being clicked on or otherwise activated). For example, for the "pressed" state of a button-style link or to make all links feel more button-like.
- :root - Represents an element that is the root of the document.
Pseudo-elements
Pseudo-elements selectors are CSS selectors with a double-colon preceding them. They do exactly what the word implies. They create a phony element and inserts it before or after the content of the element that you’ve targeted.
Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).
A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.
This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in this specification.
Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector.
Note: A future version of this specification may allow multiple pseudo-elements per selector.Selectors Level 3 Section 7.0
A short list of pseudo-elements follows:
- ::before and ::after are pseudo-elements which allow you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is;
- ::first-line describes the contents of the first formatted line of an element;
- ::first-letter represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
You can absolutely position pseudo elements relative to their parent element. Look at how I have styled the following notification. It is a paragraph of class "notebox".
p.notebox {
display:block;
width: 80%;
background: #eee;
padding: 15px 45px 15px 60px;
margin: 0 auto;
position: relative;
/*Font*/
font-size: 1.0em;
line-height: 1.2;
color: #000;
text-align: justify;
}
p.notebox::before {
content: url(/images/critical.png);
/*Positioning*/
position: absolute;
left: 5px;
top:5px;
}
p.notebox::after{
/*Reset to make sure*/
content: "";
}
<code class="css">
<span class="css__element">p</span>
<span class="css__class">.notebox</span>
{
<span class="css__property">display:</span>
<span class="css__value">block</span>
;
<span class="css__property">width:</span>
<span class="css__number">80%</span>
;
...
}
</code>
<code class="css">
<ol start="1">
<li>
<span class="css__element">p</span>
<span class="css__class">.notebox</span>
{
</li>
<li>
<span class="css__property">display:</span>
<span class="css__value">block</span>;
</li>
<li>
<span class="css__property">width:</span>
<span class="css__number">80%</span>
;
</li>
</ol>
</code>
Pseudo-elements only work on block-level elements
(when display is set to either block, inline-block, table-caption, table-cell). If set on an inline element, nothing happens, even if that inline element has a line break within it.