Pixelhaven Web Design | A Cincinnati Web Design Company » style sheets http://www.pixelhavenllc.com Passionate about creating attractive, simple and structurally clean web sites Mon, 23 Jan 2012 22:35:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Quick Tip: Using Conditional Comments And CSS http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css#comments Thu, 17 Jul 2008 11:00:41 +0000 Josh Harbaugh http://www.pixelhavenllc.com/?p=37

Continue reading →

]]> I often find myself trying to get Internet Explorer’s various versions to behave correctly in my websites. Unfortunately, Internet Explorer isn’t the sort of browser you can just ignore and hope those users upgrade to something more standards complaint, like Firefox or Opera. So, what’s the easiest way to make sure users on Internet Explorer see your site as intended?

I’ve found that using conditional comments with separate style sheets works the best for me. Sure, it’s a rough-and-tumble solution to be sure, but it works when I’m in a crunch and I need to get a project done. And really, it’s not that bad of a method to use which, I imagine, is one of the reasons for the version targeting in the upcoming Internet Explorer releases.

How do you use conditional comments with separate style sheets?

Well, I’ll show you. Let’s say you’ve noticed some display issues with a new CSS-based design in Internet Explorer. No surprise there, right? You isolated the problem and created a hack to get it working in IE, but you’d rather not clutter up your default style sheet with all this mucked-up styling, so you create a separate style sheet to house these changes. An added benefit of this method is that you can overwrite default style sheets with these new styles to make Internet Explorer behave. Here’s how.

Setup your style sheet link as normal.

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

Then, add the conditional comment for Internet Explorer 6.0

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   <!--[if IE 6]>
   <link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
   <![endif]-->
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

And presto! You’ve got a style sheet that will only get used in Internet Explorer 6.0. What about all the other versions? The 7th version of Internet Explorer helped to improve the browsers understanding of CSS and web standards, so some of the same old issues with Internet Explorer don’t really come up. What if you wanted to load a style sheet that worked for all versions lower than 7?

For that you’d do something like this:

<html>
   <head>
   <title>Wicked awesome page title</title>
   <link rel="stylesheet" href="/stylesheets/default.css" type="text/css" />
   <!--[if lt IE 7]>
   <link rel="stylesheet" href="/stylesheets/ie6.css" type="text/css" />
   <![endif]-->
   </head>
   <body>
      <p>Some information ...</p>
   </body>
</html>

The ‘lt’ just means “less than”, and will target any versions less than 7, and load up the style sheet accordingly. Additional syntax are: ‘gt’ for “greater than” and ‘gte’ / ‘lte’ for “greater / less than or equal to”. This trick can apply to anything you want to show in Internet Explorer but not other browsers, such as, messages explaining to users that they are using a version of Internet Explorer that may not be suited well for the website they are currently viewing and may notice some display issues.

I’d use the conditional comment sparingly, but if you’re in a deadline situation and don’t have time to find a legitimate CSS fix for the problem, I’m all for using this trick to get the job done.

By the way, you can also use this technique to hide/show content from a particular Internet Explorer version. Perhaps a “You are currently using Internet Explorer 6. Though not necessary to use this website, if you’d like to upgrade your browser we’d be able to enhance your experience while you’re here.” message for IE6 users?

UPDATE: As a side note, if you use conditional comments in your markup it will still validate. Conditional comments are actually valid markup, so don’t worry if you like to make sure all your code validates.

]]> http://www.pixelhavenllc.com/quick-tip-using-conditional-comments-and-css/feed 1 Style sheets – The Basics http://www.pixelhavenllc.com/style-sheets-the-basics http://www.pixelhavenllc.com/style-sheets-the-basics#comments Mon, 16 Jun 2008 12:30:50 +0000 Josh Harbaugh http://www.pixelhavenllc.com/?p=28

Continue reading →

]]> On every site, from personal e-commerce to blogs, style sheets can simplify changes, and make pages more accessible.

Page-by-page updates of a site design — including layout, colors, and fonts — is a time-consuming and error-prone process.

As customers visit your website, you can learn something about what they like and what they don’t like in terms of content and look and feel. You can also learn what works and what doesn’t work in terms of navigation. You might glean this feedback from informal conversations with customers, from server logs indicating that people don’t click on certain links, or from more formal usability and market research. But once you have some information about what could be improved, fixing it on your site can be daunting unless you’ve planned ahead.

If you’ve got design problems to fix on all your pages, it will be hard to justify the changes if you have to edit every single page. It takes time to open, edit, and save every file back to the server; then test every file, and possible open and edit it again if there continues to be problems.

You can avoid the problem of mixed content and presentation and make it easy to modify the presentation of all of your web pages by using cascading style sheets (CSS). Although it’s not difficult to make changes to HTML pages without CSS, it will often become problematic if you need to change whole sections of a page or several pages at once.

CSS offers a way of separating presentation from content

With CSS, you specify all of your content in the standard HTML files, and specify how that content should be presented in a CSS file.

Below is an example of what I mean.

HTML:

Example heading

Some content would go here.

Only the content is specified in this HTML file. All the style information is contained in a separate style sheet (style.css).

CSS (style.css):
h2 {
text-align: left;
color: #333;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
font-size: 18px;
}
p {
text-align: left;
color: #777;
font-family: Verdana, Arial, sans-serif;
font-style: normal;
font-size: 11px;
}

With a CSS file like this it would be possible to make whole sitewide changes to the style of the

and

tags on every page of the site with the update of only one file.

Define a standard style sheet as part of your sitewide page template

Style sheets can be used as part of your page templates to create flexible and attractive web pages. You might define one default style sheet that all of your pages will use — one that defines the basic look and feel or your site.

Things that can benefit from the use of style sheets include
Flexible grid layouts
Navigation bars
Tab rows
And text links

Define a separate style sheet for printable pages

It is a good idea to have a separate style sheet for creating printable pages. This style sheet can be a much simpler version of your page template style sheet because printed web pages will not display navigation elements such as tabs and navigation bars, extra content modules, such as the sidebar or external links, or advertising.

To establish a specific print style sheet you’ll need to define the following just below the default style sheet in the HTML file.

This will ensure that the printing functions will use the styles defined in the print.css file instead of the default style sheet. The technique can be very useful when creating ‘newspaper’ style articles that you intend for your visitors to print for future reference.

What about a mobile style sheet? You can do that too.

If you intend on having your content viewable by mobile phone users, then it’s a good idea to setup a separate mobile style sheet for them. This ensures that your content and web site represent the best possible image they can to your viewers. Someone would hate to navigate to your site only to find out that you haven’t taken the time to design an experience around the way they like to browse your site. It might make them feel like they are less important. This is just not the case anymore with more and more users beginning to really use their smart phones for things like browsing news sites and even purchasing products online. Sites like Amazon and Google have jumped on this trend and it can only be assumed that more and more companies will join in.

Here’s an example of how you might define a mobile style sheet:

For more information about creating mobile CSS, go to w3.org/TR/css-mobile
A List Apart is also a great resource for articles on the topic of CSS.

]]> http://www.pixelhavenllc.com/style-sheets-the-basics/feed 0