Cascading style sheets (CSS) is the visual language of the web, controlling everything visual about a website, from background colors and navigation bars to fonts and text alignment. CSS allows developers and designers to create the style and layout of a page and add global styling to all pages.
With its newest version, CSS3, it’s evolved to do even more. In this article, we’ll compare the old CSS with the new, highlighting new features that are making this legacy web technology keep up with the times.
CSS Basics
First, let’s review some CSS basics. Within a site’s code, CSS works in tandem with HTML to give a site its static structure and style. While HTML defines what elements are on a page, CSS defines how those HTML elements appear. For example, if HTML tags mark a section of text as a page’s , applying CSS tells a computer that everything marked on that website should appear with a certain style, e.g., in bold, blue font.
Even though CSS and HTML work together, they’re kept entirely separate in two different files. This is convenient because it allows designers to make changes to the look and feel of a site without affecting any of its underlying structure.
The “cascading” aspect is key, too. Storing files as cascading sheets allows developers to globally update the design for multiple pages at once. Why is this important? Imagine trying to code the design individually for every page of a 1,000-page site, adding in the font and color code for every single page. CSS streamlines this process down to one, externally linked, layered file.
So, what’s new with CSS3?
CSS3 is the latest standard for the CSS language, under development since 2005. It’s backwards-compatible with older versions of CSS, and has new properties that debug previous quirks and extend CSS2 features, and it’s even got some JavaScript-like capabilities. CSS3 has also addressed a number of mobile development concerns, accounting for responsive design and making up for issues caused by Adobe Flash incompatibility on mobile devices. In combination with JavaScript, CSS3 has a lot of the functionality of Flash now–animation- and interactivity-wise.
Here are seven major things that differentiate CSS3 from its predecessors.
1. Mobile-first mentality
CSS3 inherently supports responsive design and is equipped to handle media queries. Media queries are calls made by the code to determine what device and size screen a user is viewing the site on. This adds a whole new responsive design capability to the CSS repertoire.
2. Module-based code
One of the biggest developments is that CSS3 is split into “modules.” All of the old CSS specifications have been migrated over to the new version and divided into smaller pieces (with some new modules added as well).
Other CSS3 modules include:
- Selectors: Developers can edit elements by name, class, type, attribute, and more.
- The Box Model module: This describes an approach to creating consistency between HTML elements on a page, or “boxes.” By applying margins, borders, and padding to a box’s content, developers can clear the area around an element, give it borders, and more.
- Backgrounds and borders: With better control of the treatments of element borders and page backgrounds, CSS3 also enables rounded corners on boxes and drop shadows. Before CSS3, backgrounds had to be achieved with images, which added to a page’s file size and load time.
- Text effects: CSS3 includes shadow effects, text overflow (which hides text that gets too long for its element), word breaking (automatically breaking text so it fits within a box), and text wrapping–all things that save designers lots of formatting time.
3. Web font support gives designers access to way more than just “web safe” fonts
Before CSS3, designers could only use “web safe” fonts to be 100 percent sure that the fonts would always display the same on everyone’s machine. Web safe fonts are fonts that every single computer has installed and recognizes. If a designer used common fonts like Times New Roman or Arial, they could pretty much guarantee that any user would view their site as it was intended. However, if they wanted to use a rarer font, if it wasn’t supported by a user’s machine, it would default back to a web safe font.
Designers can now run web fonts in CSS3, special fonts like those available via Google Fonts and Typecast. These fonts can either be downloaded onto a server and run through the CSS code, or accessed directly from its source via a script, which is called right within the CSS code. This has opened up a world of possibilities for designers.
4. It enables faster development and faster load times
What used to require background images, CSS3 can now achieve with visual enhancements, which saves developers time in production. This cuts down on calls and load times for numerous images because these effects are all built into the code. Also, pages load faster thanks to overall smaller file sizes and fewer calls.
5. Create 2D and 3D transformations, animations, and transitions
These effects allow elements on a page to rotate, grow, shrink, flip, or translate into a different color. For the first time, elements created in CSS can move on screen without requiring any JavaScript or Flash code. With transitions, an element can seamlessly change size and color. You can set a duration for a transition, e.g. creating a button that slowly expands and changes color when you mouse over it.
6. New colors and image effects
CSS3 supports new colors (RGBA, HSL, HSLA) and gradient colors, and allows for adjustments to opacity. Another biggie is its support of rounded image corners, an effect that required a lot of formatting and Photoshop work to achieve before.
7. Box-sizing has fixed some annoying alignment problems
Box-sizing allows developers to get the sizing of elements right without having to subtract dimensions for padding and borders. With the box-sizing property, the padding and border are included in the height and width.
CSS is a foundational web development technology that remains at the heart of how everything on the web looks, but with its latest evolution, it’s proving capable of so much more.