The Essential Guide to HTML5 and CSS3 Web Design

Craig Grannell, Victor Sumner, Dionysios Synodinos

Language: English

Pages: 516

ISBN: 1430237864

Format: PDF / Kindle (mobi) / ePub

The Essential Guide to HTML5 and CSS3 Web Design has been fully revised from its critically acclaimed first edition, and updated to include all of the new features and best practices of HTML5 and CSS3. This book reveals all you'll need to design great web sites that are standards-compliant, usable, and aesthetically pleasing, but it won't overwhelm you with waffle, theory, or obscure details!

You will find The Essential Guide to HTML5 and CSS3 Web Design invaluable at any stage of your career, with its mixture of practical tutorials and reference material. Beginners will quickly pick up the basics, while more experienced web designers and developers will keep returning to the book again and again to read up on techniques they may not have used for a while, or to look up properties, attributes and other details. This book is destined to become a close friend, adopting a permanent place on your desk.

The Essential Guide to HTML5 and CSS3 Web Design starts off with a brief introduction to the web and web design, before diving straight in to HTML5 and CSS3 basics, reusing code, and other best practices you can adopt. The book then focuses on the most important areas of a successful web site: typography, images, navigation, tables, layouts, forms and feedback (including ready-made PHP scripts) and browser quirks, hacks and bugs.

The Essential Guide to HTML5 and CSS3 Web Design is completely up-to-date, covering support of the newest standards in all the latest browsers, including IE 9 and Firefox 4. The last chapter of the book provides several case studies to dissect and learn from, including all the most popular web site archetypes―a blog, a store front, a corporate home page, and an online gallery. You'll also appreciate several detailed reference appendices covering CSS, HTML, color references, entities, and more―any details you need to look up will be close at hand.

Ajax: The Definitive Guide

JavaScript Unit Testing

Decoding the iOS6 SDK

Merchants of Despair: Radical Environmentalists, Criminal Pseudo-Scientists, and the Fatal Cult of Antihumanism



















Set the wrapper div’s position value to absolute, and set the top and left values to 50%. This sets the top-left position of the div to the center of the browser window. #wrapper { background: #ffffff; border: 4px solid #000000; padding: 20px; width: 400px; height: 300px; position: absolute; top: 50%; left: 50%; } Use negative margins. Clearly, the div is not positioned correctly as yet, and that’s—as mentioned in the previous step—because absolute positioning and the top and left values specify the position of the top left of the element they’re applied to.

The goal of a reset style sheet is to reduce browser inconsistencies in things such as default line heights, margins and font sizes of headings, and so on. An alternative to reset. css is normalize. css (http://necolas. github. com/normalize. css/), which normalizes styles for a wide range of HTML elements and corrects bugs and common browser inconsistencies. Users can just you the full normalize. css file or customize it to suit their needs. Working with CSS shorthand for boxes Both of the previous two code examples use CSS shorthand, and this is something that is useful to get to grips with in order to create the most efficient and easy-to-update CSS.

However, contemporary ideas, techniques, and thinking are explored throughout, ensuring that the book is just as essential for the experienced designer wanting to work on CSS layouts or for the graphic designer who wants to discover how to create cutting-edge websites. This book’s advocacy of web standards, usability, and accessibility with a strong eye toward visual design makes it of use to technologists and designers alike, enabling everyone to build better websites. For those moments when a particular tag or property value slips your mind, this book provides a comprehensive reference guide that includes important and relevant HTML5 elements and attributes, HTML5 entities, web colors, and CSS 3 properties and values.

5em; float: right; width: 250px; } Add padding and margins. Switch the right values for float back to left, and then change the padding-bottom properties to padding, adding values for the top and horizontal edges. A margin-right setting for #divOne provides a gap between the two divs. #divOne { background: #dddddd; padding: 10px 10px 1. 5em; float: left; width: 350px; margin-right: 10px; } #divTwo { background: #aaaaaa; padding: 10px 10px 1. 5em; float: left; width: 250px; } This exercise looks at working with liquid rather than fixed layouts.

Gif" width="40" height="40" /> Some browsers border linked images with whatever link colors have been stated in CSS (or the default colors, if no custom ones have been defined), which looks nasty and can displace other layout elements. Historically, designers have gotten around this by setting the border attribute within an img element to 0, but this has been deprecated. Therefore, it’s best to use a CSS contextual selector to define images within links as having no border. a img { border: 0; } Clearly, this can be overridden for specific links.

Download sample


Rated 4.29 of 5 – based on 46 votes