background preloader

CSS Tutorial

CSS Tutorial
This website is all about CSS, a key tool in web design. In case you’re not familiar with CSS: CSS is the sister technology to HTML that is used to style your web pages. The details are in the tutorial, but for now we can say that CSS can make your web pages look great! Written with beginners in mind As with all my writing, I tried to make this web design tutorial on CSS as easy as possible to follow. Instead of a boring-nerd centric style, I’ve used more of a conversational style.

How to Design a Two Column Layout for Your Website Using CSS 2 Columns Using Float, with Optional Header and Footer by Christopher Heng, There are many ways to create a two column layout using Cascading Style Sheets (CSS). This article takes you through the steps of using one method. 36 Resources to Learn HTML5 from the Beginning HTML5 is buzzing in web design community and making an excitement, as the offered features open many possibilities in creating web pages and web apps. However, HTML5 has many new tags and specifications compare to HTML4, which is often makes some people, particularly beginners, get confused and feel intimidated. So, in this post we try to collect the best sources where you can start learning HTML5 from the very beginning.

When to base64 encode images (and when not to) Introduction Ever since Steve Souders started evangelizing web performance, it’s been pounded into our heads that extra HTTP requests add a lot of additional overhead, and that we should combine them if possible to dramatically decrease the load time of our web pages. The practical implication of this has been to combine our JavaScript and CSS files, which is relatively easy and straightforward, but the harder question has been what to do with images. Sprites How to Create Rounded Corners for Your Box Borders in CSS How to Use Border-Radius to Create Rounded or Curved Corners by Christopher Heng, If you were to create a rectangular box outline around the content on your web page using Cascading Style Sheets (CSS), the default is that your box borders will have pointed right-angled corners. To get rounded corners for the box, many webmasters in the past have resorted to using images to give the appearance of curved corners. This article shows you how to achieve the same effect using CSS.

10 Easy Image Hover Effects You Can Copy and Paste Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action. Meet the Pseudo Class Selectors Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { } They are immensely useful in a variety of situations. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website Advertisement CSS3 continues to both excite and frustrate web designers and developers. We are excited about the possibilities that CSS3 brings, and the problems it will solve, but also frustrated by the lack of support in Internet Explorer 8. This article will demonstrate a technique that uses part of CSS3 that is also unsupported by Internet Explorer 8. However, it doesn’t matter as one of the most useful places for this module is somewhere that does have a lot of support — small devices such as the iPhone, and Android devices.

6 Excellent Free HTML5 eBooks for Web Designers - Detechter HTML is a fundamental programming language and HTML5 is the latest version of HTML. It has multiple new and fresh features to make your website more attractive and alive. HTML5 is bringing modern web standards to everyone. HTML5 is packed with powerful functionality which supports true semantic capabilities to Web documents, augmenting their human-readable content with machine-readable data and metadata. In last few days, there have been release some attractive and latest technologies like HTML5, CSS3, jQuery and many more. These latest version of technologies always helps to fresh and advance web designers both.

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do By Chris Coyier On June 13, 2011 It's pretty amazing what you can do with the pseudo elements ::before and ::after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will.