HTML/CSS Service

CSS PSEUDO-ELEMENTS

Category: CSS, CSS 2 Tutorial, CSS Examples, CSS Tips, CSS Tutorials    |    855 views    |    Add a Comment  |   

Pseudo-elements can only be applied to the last “simple selector in a chain”, as the recommendation says. A simple selector is either the univeral selector (*) or a type selector (I tend to call them element selectors) followed by attribute, ID or pseudo-class selectors.

CSS2  has four of them:

  • :first-line allows you to style the first line of a block element
  • :first-letter allows you to style the first letter of a block element
  • :before allows you to inject and style content before an element, block or inline.
  • :after allows you to inject and style content after an element, block or inline.

Read more…

Share/Save/Bookmark

 

Top differences between CSS1 and CSS2

Category: CSS, CSS 2 Tutorial, CSS Tips    |    4,309 views    |    6 Comments  |   

CSS 1

The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996.[3] Among its capabilities are support for:
* Font properties such as typeface and emphasis
* Color of text, backgrounds, and other elements
* Text attributes such as spacing between words, letters, and lines of text
* Alignment of text, images, tables and other elements
* Margin, border, padding, and positioning for most elements
* Unique identification and generic classification of groups of attributes
The W3C maintains the CSS1 Recommendation

CSS 2

CSS level 2 was developed by the W3C and published as a Recommendation in May 1998. A superset of CSS1, CSS2 includes a number of new capabilities like absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows. The W3C maintains the CSS2 Recommendation.

CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for further review. It was returned to Candidate Recommendation status on 19 July 2007.

Share/Save/Bookmark

 

CSS Tabbed Interface

Category: CSS, CSS Tips    |    602 views    |    Add a Comment  |   

‘:TARGET’ PSEUDO-CLASS

A URL normally points to a page. But when the URL ends in “#something” it targets a specific element in that page. Browsers typically try to make sure that the targeted element is visible and if possible at the top of the screen.

With the ‘:target’ selector, you can add a specific style to the target element, so that it gets more attention.

But you can do more. You can hide or display elements based on whether they are the target or not. Below is an example. It shows a little menu with four items and each item is linked to some text. But at first no text is shown. Each item is a link to an element with a target ID (#item1, #item2…) and those elements are only visible when they are the target of the current URL.

Here is how it works. There are two important parts, the HTML source and the ‘display’ property. First the HTML document. It has some links and elements with corresponding IDs:

Read more…

Share/Save/Bookmark