Showing posts with label pseudo elements. Show all posts
Showing posts with label pseudo elements. Show all posts

Monday, 31 October 2011

CSS: terms and syntax (a tutorial for beginners)

   


How often we couldn't understand when an article explains CSS because of its terminology? Words like "element", "class", "selector" and so on, can get mixed up in our brain, and we feel like we are missing something.

Don't worry, because here I explain it all, and so there won't be any confusion anymore.

CSS stylesheets
CSS stands for Cascading Style Sheet.
I believe you already know how a stylesheet is built. Anyway, it is important to remember that a stylesheet is a set of CSS rules. It could be external (we link to the stylesheet in the head of the page), it could be embedded directly in the head of a document or it could be inline (inside the HTML element we want to style).
When we link to an external stylesheet we use the following syntax:
<head>
<link rel="stylesheet" type="text/css" href="stylesheetfilename.css" />
</head>

Wednesday, 29 June 2011

CSS: pure css GUI icons

   


pure-css-icons
Imagine you don't need images anymore. We've seen something similar in CSS: create shapes in pure css last April, but what we will see here is pure madness... at least at first sight. The GUI icons set you see on the right is an image, however there's a guy who did them all using css. Sounds crazy? Well, that's what I thought the first time I saw them, but as the author - Nicolas Gallagher - states on the project page, all the idea is just an experiment.

Basically, Nicolas is using css pseudo elements (:before and :after) and semantic HTML to create a 84 icons set. Let me immediately warn you: with Internet Explorer you won't see things as they were conceived. If you open the demo page in IE8, for example, you will see the icons with some css attributes missing and the whole effect will be missed.

I suggest to visit Nicolas page and have a look at his works. Just keep in mind that pure css GUI icons are just an experiment.