An introduction to CSS.

1. CSS
101
This presentation is to take you through the basic concept of CSS and a bit of
history on how it has developed to CSS3. We will discuss the benefits of styling
and organising data and content in a way that is valuable to the user –
touching on User Experience (UX) and User Interface (UI) principles.
Sean and TJ
1

2. 2
The importance
of CSS to web
http://www.decisioninc.co.za
Often styling and responsive design is left to last, instead
of forming an integral part of the web development process.
Over the years CSS has proven itself to be an essential
tool to improve user experience, creating a visual hierarchy
that allows the user to easily and effectively navigate
information and site content.

3. Good design
Is good business
- Thomas Watson Jr, 2nd President of IBM
• I
R
I
S

4. User Experience or UX “encompasses all aspects of the
end-user's interaction with the company, its services, and
its products” (Norman and Nielsen, Nielsen Norman
Group).
CSS, as we have seen, forms part of a successful and
valuable user experience. Without it, content would be
represented as plain and chunks of data, with CSS we can
transform this into useful and usable information for user.
What is UX and
how does it relate to
CSS?
• http://www.decisioninc.co.za
4
Trust
Delight
Digestibility
Familiarity
Clarity

5. CSS 2
CSS level 2 specification was
developed by the W3C and published
as a Recommendation in May 1998.
CSS 3
Work on CSS level 3 started around the
time of publication of the original CSS 2
recommendation. The earliest CSS 3
drafts were published in June 1999. It is
an ongoing project and additions are
being made to this day.
CSS 1
The first CSS specification to become an
official W3C Recommendation is CSS
level 1, published in December 1996.

6. Advanced Selectors
CSS 3 introduced a number of powerful
selectors that can make your layouts
cleaner, and your stylesheets more
awesome.
Media Queries
With Media Queries you can create a
single site with one style sheet that
responds to the browser width or
device – no more mobi sites.
CSS Animations and Transitions
With CSS3 you can animate and transition
elements without an JavaScript or external
libraries such as JQuery or Greensock
Gradients
Gradients give web designers the power to
create smooth transitions between colours
without having to resort to images.
Webfonts
Webfonts allow you to import fonts
into the browser and no longer be
restricted by web safe fonts or using
images to display unique fonts.
Rounded Corners!
You can use the border-radius
property to create rounded corners
easily and effectively

7. <footer>Thank you!</footer>