Wow, I can’t believe it’s been since June 25 since I last posted. I guess that’s what happens when you’re in the thick of writing a book. The good news is the book is almost done! Unfortunately, it will be out about one month later than we hoped – October, instead of September – but sometimes it’s better to delay and get it right.
I received a question today from Eric, a prospective reader, about which book he should buy: Head First HTML with CSS & XHTML or Head First HTML5 Programming (now the official title of the book, by the way). In his case, the right book to start with is Head First HTML with CSS & XHTML because Eric wants to learn HTML and CSS.
Even though we published Head First HTML with CSS & XHTML back in 2005, over 90% of the book is still completely relevant. When we update this book, we’ll be adding a few new HTML elements, a few new CSS properties, and changing how we talk about the future of HTML (and how we talk about XHTML), but essentially, the basics are the same. Which is great news, because it means that if you already know HTML and CSS, it’s fairly easy to upgrade your pages to HTML5 and make use of new HTML5 elements and CSS properties.
More updates to come as we finish up the book; then I’ll have a lot more time to write blog posts.
One of the most common questions I get asked related to beginning HTML and CSS is “Why isn’t this working?” Unfortunately, I can’t look at everyone’s individual project or I wouldn’t have time to do my own projects, but now and I then I do take a look if it looks like it will be something fast and one of the most common errors I see is special characters in the text. This often happens when you cut and paste from a program like Microsoft Word, which uses special characters for characters like quotes. In fact, that was exactly the case today, when I received a question from a reader who was stuck on the very first example from Head First HTML with CSS & XHTML; his CSS just wasn’t working and he was incredibly frustrated, understandably so! When I loaded his HTML file and took a look at the source using my browser, I noticed that his opening style tag had special characters around the type attribute:
This type of error is hard to catch, especially for beginners. In your editor, you’re seeing quotes, so you never know there’s a problem unless you “view source” using your browser and see the special characters in the source window (which displays plain text).
So, two tips:
- Make sure your editor is set to plain text so no special characters are inserted into your HTML and CSS
- If you’re having problems, look at the source using the “view source” menu (in Safari, View > Source). This will often uncover problems like special characters that you might not be seeing in your regular editor.
Keep sending your questions; I’ll try to answer them personally or on my blog!
You can also do this purely with CSS Media Queries!
Here are the new links, showing the updated CSS Media Queries:
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">
As you can see, I’ve got three CSS files; one for iPhone, two for iPad and I use the ipad-landscape.css file also for desktop machines with a minimum width of 1025px.
I’m attaching screenshots below showing the results in iPad portrait and landscape, and iPhone.
iPad in landscape orientation:
iPad in portrait orientation: