I am a german web developer, web designer, css expert, php/mysql developer & ruby on rails enthusiast. I follow the latest web trends and develop stable web solutions using a combination of PHP5, MySQL, XHTML, CSS, and Javascript. » more about me
Welcome to the CSS Anatomy series. What better way to learn CSS best practices than to analyze css stylesheets of major websites. This first installment is about apple.com. The idea should not be a comprehensive article with in-depth revelations about the design, layout ... rather than - What can you learn in 10 minutes by analyzing the way in which they use CSS.
Apple sure is one of the coolest brand names in technology, no wonder their site now can and should adhere to modern web design standards. Divs, classes, no tables, media types, ajax libraries, separated stylesheets, extensive code organization, interesting varying layouts, it's all there for you to learn from.
They have many different stylesheets for the different sections of the site incl. multiple for the Apple store etc., for the scope of this little analysis I will focus on the styles of the main page. There is a little section on the differences between the main site styles vs the apple store styles below but that's it.
The Apple main site uses multiple external stylesheets
http://www.apple.com/global/styles/base.css
http://www.apple.com/global/nav/styles/nav.css
http://www.apple.com/global/styles/productheader.css
http://www.apple.com/global/home/styles/home.css
Two of them are referenced from the home page
<link rel="stylesheet" href="/global/styles/base.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="/home/styles/home.css" type="text/css" charset="utf-8">
There are also some embedded styles in the main site for all media types
<style type="text/css" media="all">
#billboard { width: 1100px; margin: 0 auto 15px; overflow: hidden; position: relative; }
#ticker { margin-bottom: 15px; }
#homefooter { margin: 60px auto 50px; }
#homefooter p#redeem { margin-bottom: 18px; }
#billboard img.bottom { margin-bottom: 16px; }
#billboard img { margin-left: 3px; }
</style>
@import url(/global/nav/styles/nav.css);
@import url(/global/styles/productheader.css);
@media print {
body, #main, #content { color:#000 !important; }
a, a:link, a:visited { color:#000 !important; text-decoration:none !important; }
#tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
#main a.pdf, #main a.html, #main a.qt, #main a.ical, #main a.dl, #main a.dmg, #main a.zip, #main a.keynote,
#main a.audio { padding-left: 0 !important; background-image: none !important; }
}
a:link, a:visited, a:active { text-decoration: none; }
#tabs, #globalheader, #globalfooter, #directorynav, .noprint, .hide { display: none !important; }
p.last, ul.last, ol.last, li.last { _width:auto !important; _float:none !important; }
.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }
#productheader:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
#secondary .footerblock .modulecontent .list_head h2 { /* undo the blue bar h2 if inside modulecontent */
clear: left;
float: none;
width: auto;
padding: 0;
background: none;
}
#secondary .modulecontent p.more a {
position: relative;
display: inline-block; /* IMPORTANT: this rule gets overridden below, but we MUST keep these as two separate CSS rules or IE6 will choke! */
clear: left;
padding: 5px 12px;
line-height: 1.25em;
color: #333;
}
/* =SELECT-BUTTONS */
/* select buttons */
/* Internationalization is done in Catalog//Images/css/aos-local.css */
.prod-btns a {
background: transparent url(i/product-bg-btn-select-white.gif) 0 0 no-repeat;
display: block;
height: 25px;
overflow: hidden;
text-indent: -999em;
width: 76px;
}
/* Hide from IE Mac \*/
.popup-wdgt .wdgt-mdl div.wdgt-left {
display:block;
}
/* End hide from IE Mac */
/* Hides from IE-mac \*/
* html .clearfix,
* html #aos_header.collapsed,
* html #primary,
* html #aos-page,
* html #navigation,
* html #globalfooter #shopelsewhere {
height: 1%;
}
.clearfix,
#aos_header.collapsed,
#primary,
#aos-page,
#navigation,
#globalfooter #shopelsewhere {
display: block;
}
/* End hide from IE-mac */
A lot of things used in the Apple stylesheets are explained firsthand in an article written by Jina Bolton on thinkvitamin called "Creating Sexy Stylesheets". Jina works for Apple mostly on the frontend of the Apple store.