Introduction To CSS3

A while ago we have posted a blog about HTML5. Today, we would like to discuss a topic on CSS3 and what it can bring to the design industry with its new features, even if, it has been quite some time already since it had been officially released. If you haven’t already read our article on HTML5, we suggest you do because CSS3 now enhanced with the latest mark-up web language.

In 1998, CSS2 was released but since that time, a lot has now changed with the internet. 2011 was the only time it had made any revisions to CSS2 which became CSS2.1. However, design experts knew it was just a matter of time when CSS3 would be released because its features were entirely necessary and have been missed out all these years. Many individuals actually did not know that CSS3 was just developed just 1 year after the previous version. Meaning, W3C has been really working to improve since 1999.

Introduction To CSS3

Introduction To CSS3

As it seems to be like a big difference between CSS2 and now CSS3, most browsers nowadays were surprisingly quick to adopt its new member of the W3C family. The majority of CSS3 features which is now available are being supported by most modern browsers.  As of HTML5. The Syndicate still believes or considers CSS3 to continually grow and develop and most likely end up a final version just like HTML5.  The web industry is rapidly changing so coding needs to move just as quick.

The Differences

The separation of the modules is probably the largest difference between CSS2 and CSS3. During the previous version of CSS3, all was a single large specification defining its different features whereas CSS3 has been separated into different documents which are known as modules.

All modules have new capabilities without doing any damage to the previous compatibility of its stable release. When we speak of modules, we can mention  more than 50. But let’s mention the 4 which have been published formally as recommendations. The 4 are the following:

  • Media Queries -2012
  • Namespaces – 2011
  • Selectors Level 3 – 2011
  • Color – 2011

We would have to say that the most important new feature to CSS would be the Media Queries.  What Media Queries do is allow certain settings to be added to a different stylesheet. This allows websites to become fluid and to adjust and fit to all kinds of screen sizes and tailor to all resolutions without having to make any revisions to the content.

Few other important information in CSS3 are borders, which you are not able to make rounded without any hacks. CSS3 has actually brought the rounder borders. This is a big help for web designers and web developers. But keep in mind, a lot of the features no longer work on older Internet Explorer versions. The coding only needed to be applied to the style sheet (class specific) is for example below:

1 -moz-border-radius: 6px;
2 -webkit-border-radius: 6px;
3 border: 3px solid #897048;

As you can tell, it’s a lot easier than it used to be. Also available in CSS3, are gradients, which are another aweome addition that we have wanted to develop for a while, also border images and box-text shadows. In order to apply a text shadow to content without hacks, CSS3 simply requires somewhat similar to the following code:

1 text-shadow: 3px 3px 3px #ddccb5;

CSS3 has also mabe creating columns so much more, easier, since now you have 4 code lines you may use at any time. These are:

  • column-rule
  • column-count
  • column-gap
  • column-width

That’s not all, we also have the capability to insert multiple backgrounds right from the CSS which is a big time saver. Unlike before when we needed to use all sorts of hacks. It is a simple code to remember and to write. We are sure you will end up using it at some point.

1 .multiplebackgrounds {
2 height: 150px;
3 width: 250px;
4 padding: 40px;
5 background: url(bottom.png) top right no-repeat,
6 url(top.png) top left repeat-y,
7 url(middle.png) bottom repeat-z;
8 }

Vendor prefixes

When CSS3 was just released, there were vendor prefixes which were being used often, as it helped each web browser to interpret the codes. In most cases you still need to use them just incase the browser being tested doesn’t read the code. For major browsers you will find below their vendor prefixes.

  • -moz- : Firefox
  • -webkit- : Chrome and Safari
  • -ms- : Internet Explorer
  • -o- : Opera

New pseudo-classes

CSS3’s arrival has brought many new pseudo-classes such as ones that are structural, which targets elements with their position within the document and in relation to other different elements.

  • :0nly-child 
  • :empty 
  • :nth-child(n)
  • :first-of-type 
  • :first-child
  • :not(s) 
  • :root 

There are plenty more pseudo-classes added onto the new CSS3 but the above are just the basics.

Conclusion

It is safe to say that CSS3 and HTML5 will be here to stay, and with these two tools combined, they are very powerful and can create and build high quality, beautiful web design solutions. Therefore, it’s great to learn them and you can start embedding them today, otherwise your competitors will fly right by you!

 

News & Latest Posts

Our Address & Contact

Company Web Design

7111 Syntex Drive, 3rd Floor
Mississauga, Ontario L5N 8C3