Posts Tagged ‘ CSS ’

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 »

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 »

|

Flickr Photos

Quick Contact

Your Name (required)

Your Email

Your Message

captcha