CSS Archive

Getting Started with CSS pt2

Coding the Header

<!-- This is a HTML comment-->
 
Untitled Document
<div id="container"><!-- Main Box -->
<div id="headr"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

the browser will run to our css file and look for #header, and then do as we instruct it.

CSS Header

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

2007-06-11-14-57-24
Creative Commons License photo credit: sonicwalker
This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.
(more…)

Category: CSS | 1 Comment »

Getting started with CSS (Cascading Style Sheets)

CSS, cascading style sheets is a file that can turn a boring page into one that can revile even the prettiest websites.  With the right CSS coding, two versions of the same website will look totally different. Once this is completed I will include a zip file with the completed files for you to try out.
Pablo's cubism period began at three
Creative Commons License photo credit: woodleywonderworks

Why use CSS (Cascading Style Sheets)?

There are several hundred reasons a site should use CSS in other inferior methods for laying out a site.

  • It decreases the amount of bandwidth needed to show your content.
  • It allows easier updates, when you need to update you site, you change 1 file and instantly all the pages follow suit.
  • You remove excess code from your HTML which makes vistors spend less time waiting for the download.
    • For example, without CSS, you would need to create one large image, with CSS you can take a strip of that image and repeat it several hundred times.
  • It separates your code, which is always a plus.

I figure that’s enough reasons, and you are ready to jump into some code, right? I am going to start with a basic site structure.

The Basic Example

In this example, we are laying out the basic framework for a page using CSS.

  • Header – logo and ” head” content
  • Body – navigation and content
  • Footer- navigation and page closing

untitled

Although, this page is hardly pretty it sets us up the the basics for future additions, that will make it super pretty.

First, you need to create 2 files, name one somename.html and the other somename.css. These two files hold all information, we need to make the site you see before you.
(more…)

Category: CSS | Comments Off on Getting started with CSS (Cascading Style Sheets)

What you See is not Always What You Get

day 30: googly
Creative Commons License photo credit: estherase

WYSIWYG

Mother always said, “You cant judge a book by its cover”.  The same applies to websites.  “What you see is what you get” editors can lay a website out to your liking.. most of the time, there is a greater problem which remains hidden away.  WYSIWYG editors do not make people readable code.  Software like Dreamweaver, Frontpage, and other programs allow you edit a page without ever touching the code.  These software packages are considered “What you see is what you get editors” (WYSIWYG).

Whats the big deal?

World’s Messiest Office Cubicle Discovered in Colorado
Creative Commons License photo credit: Jeffrey Beall

Think about an office desk, one all the files are stacked in neat piles with labels, and the other looks like a hurricane swept through leaving documents and files everywhere.  Which person would you like fill in for?

The Bigger Picture

More importantly, search engines like cleaner code.  They have a harder time making their way through jumbled code. Which makes it harder for you to rank high in Google and other search engines.

Examples

WYSIWYG Editor

<strong>
<span style="font-family: Verdana,Arial,Helvetica,sans-serif;">
<a href="index.html">Projects</a>
</span>
</strong>

Human

Html

<a href="index.html">Projects</a>

CSS

a {font-family: Verdana,Arial,Helvetica,sans-serif;}

You can see the html page is cleaner (easier to understand) and the CSS portion makes loading faster.

Category: CSS | Comments Off on What you See is not Always What You Get

My 1st “CSS Naked Day”

Today is CSS Naked Day, and I thought I would participate by removing my CSS files and allowing it all to hang out.

From  Chris Shiflett.

You might be wondering what happened to my design. As with years past (2007, 2008), I’m participating in CSS Naked Day to show my support for web standards, and to show off the design of shiflett.org:

The idea behind this event is to promote web standards. Plain and simple. This includes proper use of (X)HTML, semantic markup, a good hierarchy structure, and of course, a good ol’ play on words. It’s time to show off your .

Although I haven’t the time to fully explain this thought right now, you have to look beyond the surface to truly appreciate good design, so participating in CSS Naked Day does more to show off my design than to hide it.

This is what Håkon Wium Lie has to say about the event:

This is a fun idea, fully in line with the reasons for creating CSS in the first place. While most designers are attracted by the extra presentational capabilities, saving HTML from becoming a presentational language was probably a more important motivation for most people who participated in the beginning.

Is your site naked?

Category: CSS | Comments Off on My 1st “CSS Naked Day”

You’re Too Slow to View This Site

Speed Limit 5
Creative Commons License photo credit: iirraa

With increasing numbers of people moving to highspeed connections is it safe to assume everyone has the fast connection speeds? I believe, NO. 25% of Americans still use dial-up to access the internet, creating a site that the 25% can not access would cut those visitors from ever being visitors or customers.

While searching for a tool to simulate how 56kers see the web, I found two options.

Linux fans: Trickle

Windows fans: Speed Limiter 1.0

Mac fans: ??

These two programs operate very nicely.  Each gives an option to modify the connection speed to a speed of your choosing. Currently, I am using Trickle, it allows choose of what to slow dow between a specific program of your choosing, ie Firefox or everything that requires an internet connection.

Improving Site Speed

You installed the software and found your site is slow, now what? It’s time to optimize!

By changing your code around you can increse your site’s speed by a few fold.

  • Seperate HTML from other code
    • Use CSS Includes
    • Use Javascript includes
  • Minimize use of heavy images
    • Use images to create pop, not create the site

Have you visited any sites that where slow even for broadband connections?

Category: CSS | Comments Off on You’re Too Slow to View This Site

The Right Way to Reset CSS

Reset
Creative Commons License photo credit: Vanderlin

The problem is each browser sees margins, and padding differently.  Some browsers add a space between your page and the window.  This will make your page sit away from where you want it.  In order to make everyone see it the same you do a reset.

Bad CSS Reset

The most popular method and what I have used up until recently is:

* {
margin:0;
padding:0;
}

This has turned out to be a terrible way to reset a page.  It resets everything and makes you have to write more code then needed.  By using such an extreme reset the browser drops all its helpful spacing. With my favorite method out the window, what should I use instead?

Right CSS Reset

Everyone has their method for reseting css.  Different CSS Frameworks handle resets a little different.  The one that looks most interesting is the Meyer Reset. It takes most of the elements and strips them down to their bare essentials. This allows you the website guy… or gal, to build the site the way you want it.

I must admit this is not as quick as the method I have always used, but it makes designing easier.  I will not be able to code it without looking at my notes.

/* v1.0 | 20080212 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Category: CSS | 2 Comments »

CSS Templates

As I searched the internet, I found a link that has a great website complete with CSS Templates.  They several different types, one including floating layouts.  Where they change based on how big the screen is.

Check out the link.

Category: CSS | 1 Comment »

|

Flickr Photos

Quick Contact

Your Name (required)

Your Email

Your Message

captcha