07/28/2013 - No Comments!

CSS for designers! (session two)

In my second seminar with internal design teams, I switched from the basics to some broader concepts that permeate throughout CSS. This session covers the topics of Values & units, web typography and ends with a deep explanation of the box model. Let's dive in!


CSS Values & Units

Every CSS property has a type of value it can accept.

Absolute Length Units

  • Useful when the output medium is known
  • Represent a physical measurement and are fixed in relation to each other
  • Consist of the physical units (in, cm, mm, pt, pc) and the px unit

Relative Length Units

  • Specify a length that is relative to another length; like an element’s font size or the width of the browser
  • Useful for web design, as they scale on multiple resolutions and devices with consistent results.
  • Ems(em) and percentages(%) are relative units

Numeric & Textual Data Types

  • Auto, inherit, initial

Color Values

  • Keywords (red, lightblue)
  • Hexadecimal values (#FF0000, #CCFFFF)
  • RGB (red, green, blue), RGBa (red, green, blue, alpha/opacity)
  • HSL (hue, saturation, lightness)

Web Typography

Web design is 95% typography.

As graphic designers with a strong understanding of typography fundamentals, we’re prime candidates to be great web designers. Creating powerful typographic systems and style guides on the web is very similar to paragraph and character styles within InDesign for print layouts.

Responsive web design tends to be even more about typography. Larger type sizes, simplified layouts, systems of modular design elements, and subtle typographical hierarchies are integral to a strong responsive design system!

Font & Text Properties

Font properties allow us to change typefaces and their appearance. Some examples of these properties include:

    • font-family
    • font-size
    • font-weight
    • font-style
    • ...and many more!

Text properties refer to blocks of type, regardless of what typeface is being used. Some properties include:

        • text-align
        • text-transform
        • word-spacing
        • color
        • ...and many more!

Embedding Fonts

Until recently, web fonts had to be installed on the user’s computer. This helps to explain the prevalence or crap fonts like Arial throughout the web. Recently, the CSS3 @font-face declaration changed this, allowing your website to reference files hosted elsewhere. Before you go too crazy, there are some matters to consider when choosing a custom web font.

          • Is the font optimized for legibility on the web?
          • Do you own the license to use the font online? There are many legal considerations when using someone's typeface on the web, do your research.
          • Do you have the correct file formats? There are many resources such as Font Squirrel's Webfont Generator that can create all necessary formats of your font file. Don't you just love the internet?
          • Support for font files across browsers is varied, so be sure to include the many necessary fallbacks. An @font-face embed rule in CSS looks like this:
            @font-face {
            font-family: Graublauweb;
            src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */
            src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */
            url('Graublauweb.woff') format('woff'), /* Modern Browsers */
            url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */
            url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */

            Using Google Fonts

            Being as amazing as they are, Google has created a free, open source library of web fonts provided via a rock solid Google API. It's insanely well documented, so I won't go into it here. Just check out this link; Google Fonts.

            Understanding the Box Model

            Every element you create in your markup produces a box on the page. By default the box isn’t visible and the background of the box is transparent. You can, of course, adjust this "box" with CSS. The properties used to adjust are: width, height, padding, border and margin.

            Padding is the distance from your content to its border. A border creates a border around an elements box. Margin is the distance from the box to other elements. Don't worry, this is much easier to understand with a visual.

            box-model

            The border-box Sizing Method

            Another box model interpretation to consider is the border-box sizing method introduced by Paul Irish. This makes our elements 100% width, including pixel-based padding and border, something much easier to wrap your head around.

            border-box

            Quick Tips

            Do not copy & paste snippets of code! This can be very tempting to develop webpages more quickly. However, you’ll learn much faster by writing your own CSS. You don’t want something broken and you don’t know why because you’ve copied code outside of your current understanding!

            Be sure your resources are current. If you’re just now learning CSS, you’ll want to be sure to have the latest materials, as CSS3 and HTML5 have just recently become best practices, it's easy to read outdated materials of just a few short years ago.


            That concludes this session. Next time I'll be assigning some homework, so be ready. Keep these skills sharp by tinkering and inspecting code of your favorite sites. Like a feature? Scrape their code and learn how they did it! Never stop learning.

Published by: Ray in CSS, Learning