CSS (Cascading Styles Sheets) is a companion language to HTML (HyperText Markup Language) which when used together are what a browser uses to render webpages. HTML provides the framework for text, images and media with a series of tags which define the object’s role on the webpage. CSS enhances this by providing code that affects the appearance and positioning of these elements: typeface, font size, font style, colours, borders, positioning, backgrounds, width, height, alignment, etc.

CSS3 is the latest iteration of the language and provides the ability to accomplish effects which before were dependant on the use of graphic files or animation software like Flash. CSS3 achieves the same results without adding to the overhead of a website as these other methods did. That means faster loading times. And because you aren’t using embedded graphics or animated movies, your code is cleaner and more easily accessible to search engines, thus improving your site’s SEO.

CSS3 has properties and selectors for text and box shadows, rounded corners, gradients, transitions and animations, multiple backgrounds, a great selection of font families, and more.

CSS3 also introduced media queries. This is code which allows the webpage to recognise the size of the device on which it is being viewed. In that way, styles and properties can respond to different device sizes. This is the basis of Responsive Web Design. By using media queries to detect screen size, a four column desktop design can collapse to a two column tablet design to a single column mobile design, all within a single HTML file with its accompanying CSS file. Media queries can also be used to detect the resolution of screens (dpi) so that you can substitute higher resolution copies of images for Retina display devices just with a few lines of code.

 Return to Knowledge Base