What's so special about CSS3?

CSS is a style sheet language that allows users to more easily achieve the desired layout and design of their websites.  In the hopefully not-too-distant future, the newest version of the language, CSS3 will be officially released to the public, and the news has web developers all around the world abuzz.


The development of CSS3 has been split up into modules, with each module describing a new set of CSS properties.  Developing the language in this way allows for new rules and selectors to be released in sections, rather than making us wait until the entire language is complete.  You can view the completed list of modules here.

With CSS3's new selectors, developers are able to select more specific sections of their document.  Most of these selectors are already being implemented into different browsers, so they are available for use now, although they may not work as flawlessly as we would like.  Although CSS2 will always be supported, CSS3 brings more to the table when it comes to the new selectors and properties being created.  CSS3 is completely backwards compatible, which makes it easier for web developers to change their existing code to fit the new languages needs.  With CSS3 we're given the ability to add new types of border attributes, text effects, backgrounds, and many more design features.

Lets talk about a few of these in more detail.


Multi-Column Layouts


Using CSS3, multiple columns can now be created to display content using the selector .multiplecolumns and definitions like column-gap, column-count, and column-width.  This feature is only available in Firefox and Safari 3, however, and as always it's important to remember to add your vendor prefixes.  To create a two-column layout with a 1px border separating the columns, your code would look like this.


.multiplecolumns {

   -moz-column-width: 50px;

   -webkit-column-width: 50px;

   -moz-column-gap: 10px;

   -webkit-column-gap: 10px;

   -moz-column-rule: 1px solid #FFFFFF;

   -webkit-column-rule: 1px solid #FFFFFF;

}

Borders

Borders are nothing new when it comes to CSS, but with CSS3 we are now able to add new styles to our borders that were not available before.  Although rounded borders can be created using CSS2.1, it often took a lot of unnecessary time and hair-pulling to get the borders looking the way you wanted them to look.  With CSS3, creating a rounded border is incredibly easy, using the border_rounded selector.  The rule can be applied to one, or all corners and the size of the border can be changed as well.  The CSS3 code would look like this:

.border_rounded {

   background-color: #FFFFFF;

   -moz-border-radius: 5px;

   -webkit-border-radius: 5px;

   border: 2px solid #897048;

   }

Notice -moz- and -webkit-?  When coding with CSS3 it is vital that we always use vender specific prefixes, at least until the language is officially released and working well in all browsers.  These prefixes are:

• -moz-  for Mozilla Firefox
• -webkit-  for Google Chrome,  Chromium, and Apple Safari
• -o-  for Opera
• -ms- for Internet Explorer

A up-to-date list of vender-fixed CSS properties can be found on this website.

Border gradients, images, and backgrounds can also be added with CSS3.  For more information on CSS3 and borders, please go here.

CSS3 is still a work-in-progress, but many developers have already started to implement parts of its script into their web pages.  It wont be long before it takes over the web, and I'm excited to see what unique design changes it will bring to the table next.

For some helpful "cheat sheets" on CSS3 and HTML5, please go here.

CSS and the Float Property

The CSS Float property allows web designers to move and align images, text, and backgrounds as well as 
create multi-column layouts, using just a few simple CSS rules.  Think of the way a newspaper or magazine article is usually designed, with images often floated to the side of text, which is forced around the image.  Float-based layouts use the float property to achieve this same effect, positioning elements side-by-side, and allowing the text to wrap around images, columns, or even other text!  


The float property can only be used with one of three values: left, right, and none.  When it comes to floating an object, it's important to make sure all content you wish to float is wrapped in a <div> tag with an ID or class attribute in your HTML file.  (For more information, please see: http://htmlhelp.com/reference/html40/attrs.html)  


For example, let's say we want to create a webpage with an image, and a "main content" container.  First, we would want to create our <div> tags.  We'll call our image div "img" and our main content div "main".  Our tags would then look like this:


    <div id="img">Image goes here.</div>
    <div id="main">Main content goes here.</div>


Without any CSS properties, our page would look very generic, with each element stacking on top of the next vertically.  But we really wanted our sidebar to be on the left, with the main content in the center of the page.  Using the float property, this can be done!  


After assigning our <div> tags ID's, we need to go into our CSS file.  When it comes to using floats, it's best to remember that the order you added HTML to your file is important!  In other words, the HTML for the element you plan to float must appear before the HTML for the element that wraps around it.  In our case, without adding more CSS (and more hair-pulling  annoyances!) we can only float the "img" content, and the "main" content  will be wrapping around it.  The image content comes before the main content in the HTML, so it can float either left, or right.


Let's say we want to move our image to the right, with our "main" content wrapping around it on the left.  To do this, our CSS would look like this:
  
  #img {
         float: right;
}


And, if we wanted to move the image to the left instead, it would be... Yep, you guessed it:
  
   #img{
          float: left;
}


Seems pretty easy, right?  Well, to an extent, yes.  However, it's important to take our columns and images widths into account when floating.  Unless you are floating an element with a predefined width, you should always make sure to give your element a width.  By doing this, we're able to create a defined size for our floated element, allowing the browser to make room for more content (in our case, our "main" content) to wrap in place.   If you forget to set a width for an element, the element is likely to fill its containing block horizontally, leaving no room for other content to wrap around it.  It's important to take into account the widths you wish to set for all content on the page.  


Margins are also very helpful when it comes to using the float property, and just like when defining widths, it's important to take the widths of the rest of the content into account .  Often, one column can be shorter than another, which can cause other elements to wrap around elements incorrectly.  Adding a margin that's greater than the width of the upcoming column or text can help to move the element into a more fixed position.   Remember earlier when I said "the HTML for the element you plan to float must appear before the HTML for the element that wraps around it"?  Using margins, this rule can be ignored.  


Let's say we wanted to have our "main" content to appear before the "img" div.  Using a negative margin allows us to shift the "main" content through our" img" div and to the left of the page.  Once again, it's a good idea to take into account the widths that are already set.


Float: clear; comes into affect when you want to move an element, but do not want other elements to "wrap"  around other elements.  Float: clear; basically tells the element to ignore all other float properties. You can choose to make an element drop below a left or a right-floated object. 


For example, let's say we still wanted our image on the left of the page, but we did not want our "main" content to wrap around the float, and instead appear below the image.   In this case, our CSS would look like this:
       #img{
           float: left;
}


      #main{
           clear: left;
}
           


For more information about the float-property visit: http://www.cssnewbie.com/css-float-property/.
Take a float tutorial at: http://css.maxdesign.com.au/floatutorial/index.htm.

Typography

Typography is the study and use of text in a document, and consists of several groups of fonts that share basic characteristics, called type-families or typeface.  Whether you’re writing for the web, designing a poster, or working on a novel to be printed; you’re using Typography.
 
Writing for the Web

In 1996, in order to ensure that all Web users had a basic set of fonts to choose from on their systems, Microsoft Corp. started the Core fonts for the Web initiative, making a list of approved fonts freely distributable.  These fonts were Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, and Verdana.  Although Microsoft’s initiative was terminated in 2002, the fonts were so widely used that Web designers have stuck with them since.

When writing for the web, it is important that each designer makes sure they are using Web-Safe Fonts.  Web-Safe fonts are fonts that are likely to be present on almost all computers and web-browsers.  For example, Arial, Times New Roman, and Verdana can be found on almost any modern computer (and most old computers too!), making these fonts Web-Safe.  

If a web designer chooses to use lesser known font types for their site (including fallback fonts), it is likely that most users will not have that font type available on their system.  In this case, the web browser of the user will try to use a generic font instead.  This may cause the website to appear distorted or make the information harder to read.  It is important for designers to use web-safe fonts so that they can be assured that every user can easily view and access their site’s content.

When writing for the web, there are two main categories of type; serif type and sans-serif type.  There are other categories when it comes to Typography as well (including script type, decorative type, and symbol type), but these are rarely used in place of the serif fonts when it comes to fonts for the web.  

Serif type fonts contain what look like “feet,” on the tops and bottoms of each character.  Serif fonts are used to give a conservative feel to the font, as well as making the font easier to read when viewing long articles or print.  Serif fonts are widely used in traditional printed materials, such as books and main articles in newspapers.  Examples of serif fonts include Times New Roman, Garamond, and Georgia.

Sans-Serif type fonts contain fonts without the strokes, or “feet” on the characters.  They are mainly used for labeling illustrations, titles, and headlines due to their easy legibility.  Examples of sans-serif fonts include Arial, Calibri, and Tahoma.

If you find the Web-Safe fonts too plain or boring and want to spice your page up with less generic typeface, the answer lies in CSS3′s @font-face rule.  @font-face is a CSS rule which allows you to download a particular font from your server, so that the user may render your webpage’s font, even if it’s not installed on their computer.

To use the @font-face rule you will first need to find fonts you are interested in, using websites such as http://www.urbanfonts.com/, or creating your own. Then you will need to upload your fonts to your server.  Once uploaded, open your CSS stylesheet and enter these lines of code, changing the information to your specified font and source code:

@font-face {
font-family: your-font;
src: url(http://example.com/fonts/your-font);
}

Although the @font-face rule is helpful when using Non-Web Safe fonts, it is not always promised that the rules you create will work with every user’s web-browser, and is probably much safer to mainly stick to Web-Safe fonts.

For more information on the @font-face rule, http://sixrevisions.com/css/font-face-guide/ has a very nice, detailed article explaining the basics.