Chapter 1: What is CSS3?
If you’ve been a web developer for any length of time, then CSS won’t be strange to you. You might, however, be wondering what the fuss over CSS3 is all about.
Just like the new HTML 5 specifications, CSS3 (or CSS Version 3, to be more precise) is the latest set of specifications designed to mold, shape, and define just what capabilities the newest version of CSS has.
To get the most from CSS3, you do need to have a general understanding of the concept of CSS first. Chapter 2 will cover a very basic refresher to help with this, but if you’ve never used CSS in any way, then you might feel a little lost reading this book, as it does assume that you have at least a passing familiarity with the technology.
CSS3 is also not a “new CSS” as many people think; like HTML 5, it’s backwardly compatible with everything that’s come before it. Going forward, however, there’s an amazing amount of new functionality, allowing a multitude of creative possibilities that simply did not exist in previous versions.
Code Samples
As we make our way through the book, I’ll be creating various code samples for you to study. These code samples won’t be available for download, but they will be small enough to type in by hand.
In most cases the code will be given only to highlight a specific topic, especially in the case of mixed CSS and HTML code. With the HTML code (unless it’s a quite complex example) in general, I’ll just describe what’s needed, then show the CSS code as a code sample.
Because of this, I will be assuming that the reader understands HTML, how it’s structured, and how to create standard simple HTML tags and elements. If you do not, then I strongly advise that you read at least some background material on the subject before you proceed any further with this book.
To try and make things somewhat easier, however, the following HTML code should serve as a very minimal example of an HTML 5 standards document. This is by no means a complete example; its purpose is to provide a boilerplate starting point for other code in the book.
All the examples I present throughout this book will make an assumption that you’re using a similar piece of code, and will seek to build on top of that code.
<!doctype html>
<html>
<head>
<title>Basic HTML 5 document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is a basic HTML 5 document</h1>
</body>
</html>
Pay close attention to the link tag in the header-this specifies a file with the name of styles.css.
It’s in a file with this (or a similar) name that we’ll be placing most of our CSS code.
Good practice dictates that CSS code be separated from HTML code, and since one of the underlying principles of the Succinctly series is to promote good practices, then we shall endeavor to maintain this throughout the course of the book.
Of course, you don’t have to call your file styles.css; you may call it anything you wish. However, if you do change its name, then please remember that you’ve used a different name when creating basic HTML documents to experiment with.
You’ll be able to tell if you get the file name wrong-you’ll see an error in your browser debugging tools, something similar to Figure 1.
If your HTML file is unable to find a linked CSS file, then none of the style rules you define will be used, and your result will look nothing like it should.
A quick word on browser compatibility
One final thing that we need to address before moving on is browser compatibility.
Anyone who’s done any kind of HTML frontend-driven web development knows all too well the pain involved in making code appear uniform across all browsers.
This won’t be more true if you’ve spent any time working with the CSS2 and HTML4 standards, and the browser wars of not-too-distant years.
Because CSS3 comes in, in-line with the newer HTML 5 standards, then I’ll not be going out of my way to ensure the code I present will work without fail on all older browsers.
For the course of this book I’ll be working with the following browser:
Google Chrome 39.0.2171.95 m
I’ll also have the following browser versions available, but won’t necessarily be using them:
- Firefox 34.0.5
- Internet Explorer 11.0.9600.17501 Update 11.0.15 (KB3008923)
- Maxthon Cloud Browser 4.4.3.4000
Since I’ll mostly be sticking to features that are more or less complete, or have identical support across the four browsers mentioned, then you should have no problems using a different browser. I will, however, note where possible any changes that may be needed.
Be aware that there may be cases, when using a different browser, where a vendor prefix may be needed (but that I’ve missed due to my use of Chrome).
As a general rule of thumb, I develop using Chrome, then modify to accommodate other browsers. If something does not work as expected, then please do look up the CSS3 syntax for the nonworking code, online, before assuming that the code is broken.
As for minimum versions, I won’t be attempting to make any code in this book work correctly you may need to use an appropriate helper library of some kind to fill in the gaps. Due to the sheer number of helpers available, there is unfortunately no room in this book to discuss them all.
