Chris Parker | Emmy Winning Media Designer

Your 1-Stop for All Things Multi-Media

"From Start to Finnish Your Next Multi-Media Project will Sizzle"

Styling for The Web
The Power of CSS

Style
Hello folks. The Emmy Winning Blog is back to it and this time out I want to talk style. And I don’t mean the latest fashion.

(For the latest fashion go here…)

I’m talking about styling for the web.

Making your website or apps look good isn’t as straight forward as other multi-media designs. For example, print and video designs rely on programs such as Photoshop or Illustrator to actually create or ‘draw’ out your design elements while website designs rely on lines of written code called CSS.

The difference being that Photoshop creates images while CSS creates web-recognized data that the user see as graphics. An image is an image no matter where or how it’s viewed, but a web built design programmatically ‘tells’ your browser how to display data. CSS allows the Internet and the user’s browser to read and interpret data correctly as well as streamline the surfing process.

cssHeader_Screengrab07As a demonstration, let’s create a heading designed in Photoshop. Using the ‘Rounded Rectangle Tool’ with a radius of 25 pixels, I drew out cssHeader_Screengrab05my blue container. I used the color picker to choose my color. Next I typed in my text and formatted it in the character tool window and placed it over the blue container. Then I drew two line shapes and dragged one to the top and the other at the bottom. Finally, I added a drop shadow layer style effect to my ‘blue container’ layer. Voila, we just created a somewhat simple header design. As you noticed using the Photoshop tools is a lot like ‘drawing’ your design.

cssHeader_Screengrab04

cssHeader_Screengrab02

 

Style

Now let’s do this same design for the web. We could just upload our graphic and use that, but there are some drawbacks to that method. First off, using all graphics is very memory intensive and will take time to load on your browser.

Another problem is that the header is harder to update. Let’s say you want to change the text or the color. You have to go back to Photoshop, make your changes then re-upload the graphic. Not very efficient, is it?

The last problem is the way the web ‘reads’ your heading. If it is a graphic instead of actual text then the web will only see it as an image and not as data. There are ways around this, but it is general practice not to use image graphics for the majority of your styling. In fact image graphics should only be used when standard web design falls short, or as an overall image such as a banner or a picture in a gallery.

To design for the web we should basically be using HTML and CSS. HTML is your web content or general layout. CSS is the actual styling. This is where all the ‘magic’ happens.

To create our simple header, we’ll be writing code as opposed to ‘drawing’ our graphic. I’m not going to get into the different ways to compose your CSS file. Simply put, you can attach a separate CSS file to your HTML document, write your CSS styles inside the head of your HTML document or place your styling right inside each HTML element. In this article I’m just going to introduce you to the concept of how CSS affects the look of your HTML.  For details on how to create and insert a CSS file go here.

So let’s begin. First we’ll write out our line of HTML. We simply type out ‘Creating Style’ and then tag our text with the appropriate code. In this case we’ll be using ‘h1’ which stands for ‘header 1’, an HTML element that tells browsers and search engines such as Google that this text, ‘Creating Style’ is a primary header or title of our HTML page. Many ‘h1’ tags are company names or titles of blog and page entries.

To tag an HTML element we need to type the ‘<’ symbol followed by the tag ‘h1’ and then ‘>’. Next we’ll enter in our ‘Creating Style’ text followed by our closing HTML. ‘</h1>’. Notice the backslash character.

Our line of HTML should look like this:

<h1>Creating Style</h1>

As viewed in a browser without any CSS styling it will look like this:

Creating Style

Not very interesting is it?

Now let’s wrap another HTML element around our ‘h1’ element so we can later add our top and bottom lines. This will make sense as we build our header. We are going to add a ‘div’ element. Think of a div as like a box or a container. We’ll give our ‘div’ a unique ID of ‘container’. So now our HTML will look like this:

<div id=”container”>
<h1>Creating Style</h1>
</div>

Since our ‘div’ element hasn’t been defined yet, our browsers will still view this header the same as it was before we added the ‘div’ element.

Now, let’s apply our CSS. CSS is written out by using the HTML element name followed by a ‘{’, followed by our parameters, followed by a ‘}’. CSS parameters are pre-defined code properties for CSS. Here is a list of properties you can use to define your HTML parameters. For example to change our header text color to red, our CSS code will look like this:

h1 { color: red; }

This line of code is telling our HTML document that the ‘h1’ element text color is to be red. This is what we now get when viewed in a browser.

Creating Style

Now let’s format our header element into our graphic style.

Let’s get rid of our red styling and type in our header rule with no styling parameters.

h1 {}

Okay, now we need a blue background container so let’s set our HTML background element to blue.

h1 {
background-color: #3b6fa9;
}

The number represents the exact blue color we’ll be using for our background. This is what the above code produces:

Creating Style

As you can see we have a lot of work left to do. Let’s clean up our text.

We’ll change our font color to white:

color: #FFFFFF;

Now let’s change our font to Arial Black.

font-family: “Arial Black”, Gadget, sans-serif;

(There’s a lot more to font selection than this, but if your computer has Arial Black loaded as a font then this line of code will display our header correctly. Or if it isn’t loaded, your browser will fall back to a sans-serif font as indicated in our CSS rule.)

Let’s now make out text have all capital letters with the first letter of each word being larger than the rest.

font-variant: small-caps;

We’ll align our text to the center.

text-align: center;

We’ll give some padding to the top and bottom of our text thus expanding the blue background’s top and bottom and giving us a little room for our text.

padding-top: 10px; padding-bottom: 10px;

‘px’ stands for pixels, thus our header has a 10 pixel padding at the top and bottom.

Finally, let’s round our corners and add a drop shadow to our blue background.

border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

Border radius is a CSS3 property and might not work in some older browsers, but all modern browsers do support this CSS3 property.  The ‘5px’ tells the browser to round each corner in by 5 pixels.   ‘-webkit’ and ‘-moz’ are special CSS rules which allow round corners for Safari and Firefox browsers respectively.  One of the most frustrating aspects of CSS and web design in general is browser incompatibility.  More often than not we need to use more than one CSS rule to satisfy all current browsers.

Now for our drop shadow.  The drop shadow rule also uses the  ‘-webkit’ and ‘-moz’ browser specific rules.  It also uses several properties to help define the look and shape of the shadow.  The first two control the horizontal and vertical position of the shadow, the third property defines how sharp or soft the shadow is, while the fourth property defines the size of the shadow, and fifth property assigns a color to the shadow.  So here is what we need to make our shadow:

box-shadow: 0 2px 2px 2px #000000;
-moz-box-shadow: 0 2px 2px 2px #000000;
-webkit-box-shadow: 0 2px 2px 2px #000000;

The shadow is 2 pixels vertically down with a 2 pixel softness and 2 pixels size.  Finally, the color is black represented by all those zeroes.

Here is what we have defined for our ‘h1’ element tag so far:

h1 {
background-color: #3b6fa9;
color: #FFFFFF;
font-family: “Arial Black”, Gadget, sans-serif;
font-variant: small-caps;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 2px 2px 2px #000000;
-moz-box-shadow: 0 2px 2px 2px #000000;
-webkit-box-shadow: 0 2px 2px 2px #000000;
}

And here is what it looks like:

Creating Style

All we need now is our top and bottom lines as well as a defined width for our header. This is where our ‘div’ element comes in. We’ll be restricting our outer ‘div’ element to 275 pixels, which in turn will contain our ‘h1’ width. We’ll also be adding a blue border to our top and bottom of our ‘div’ with another 5 pixel padding to separate the lines from the blue background. To identify our ‘container’ id we’ll need to use the ‘#’ key.

#container {
width: 275px;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #3b6fa9;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #3b6fa9;
padding-top: 5px;
padding-bottom: 5px;
}

So by combining the ‘h1’ css rules with the ‘#container’ css rules we now have an HTML heading that looks like this in our browsers:

Creating Style

And here is our Photoshop graphic:

Style

To really see the difference CSS makes try turning off the styling in your browser. Each browser has their own unique way of doing this. I’m using Safari, so If I go up to my ‘develop’ menu and click ‘Disable Styles’, this site’s home page layout changes from this:
To This:
Now that’s a big difference.

CSS has design limits, but with the addition of CSS3 and by utilizing images we can create some pretty refined web layouts.

If you found this article interesting or have something to add please let us know by leaving a comment. And don’t forget to share us on Facebook.

Until next time…

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.