CSS Zen Garden

Created Tuesday, 18 September 2012 09:19 Last Modified Sunday, 16 June 2013 14:13

This zip file contains the Zen Garden HTML & CSS files that you'll be using on this project. I've slightly modified the source of the HTML file, so everyone will need to make sure to use these files and not the files downloaded on Thursday 9/13.

In class we will go over the basics of how to write a CSS rule, how to optimize images for the web using Photoshop, how to set a background image using CSS, and the basics of Typography on the web.

The Basics Of Writing CSS

/* Comments in CSS are begin with a backslash and a star. To close your comment, use a star and a backslash. */

body {
/* CSS rules can be applied directly to tags, like the body tag. */
}

h1, h2 {
/* CSS rules can be applied to more than 1 element by using a comma (or commas). This rule would apply to both the h1 and h2 tags. */
}

#id {
/* Apply a rule to an id by using the '#' (octothorpe or pound sign) and then the id's name. */
}

.class {
/* Apply a rule to a class by using a period and then the class's name. */
}

p.initial {
/* You can get specific with rules. This rule would only apply to paragraphs with a class of 'initial'. Any paragraphs without the 'initial' class would not follow this rule, and elements with a class of 'initial' that aren't paragraphs would not follow this rule.  */
}

p#start {
/* This is the same type of rule as above, but with an id used instead of a class. You can see there is no space between the element and the id or class used.*/
}

#start p {
/* This rule would only apply to paragraphs within the element that had an id of 'start'. */
}

#start p span {
/* This rule would only apply to spans within paragraphs that are within the element with the id of 'start'. Try to think of rules like this as a sort of <a href="http://en.wikipedia.org/wiki/Matryoshka_doll">Russian Nesting Doll.</a>*/
}

a:hover {
/* CSS also has 'pseudo-states'. These 'pseudo-states' are activated when a user interacts with the page. For example, anchor links can have hover, visited, and active pseudo-states. You can use these pseudo-states to create rollover effects (so that a visitor might see the link change color when they hover over it). */
}

The Basics Of Using Images On The Web

All images for web use should be created at 72 ppi (pixels per inch) and in the RGB color mode. You can create your art at higher resolutions, or in different color modes, but make sure the final product you publish is at 72 ppi and in RGB. To save an image for the web from Photoshop (or illustrator), you are going to want to use the cmd+alt+shift+S shortcut key to bring up the 'save for web' dialog box. You can also go to 'File>Save For Web' from Photoshop's menu.

The 'save for web' dialog box gives you a number of options for saving your images. We will go over these in class (I'll try to create notes on these for the people who have missed later).

To use an image in your CSS, save the image into the 'images' folder of your site. Then, in your CSS, you are going to write something like this:

body {
background: #900 url(../images/your_image.jpg);
/*Replace 'your_image' with your images' name :) */
}

It is usually a good idea to use the 'background' property to set your images in CSS rather than 'background-image'. There are a number of things you can do with the background property. For example, you can set a color to serve as a placeholder until your image downloads (or to be the background if your image fails to download):

body {
background: #900 url(../images/your_image.jpg);
/* The color #900 would show up until the image was downloaded. */
}

You can also position your background image, or set it to repeat.

body {
background: #900 url(../images/your_image.jpg) top left no-repeat;
/* The background position would be positioned in the top and left of the element. If the image is smaller than the element, the color #900 will be shown because the image is set to not-repeat. */
}

body {
background: #900 url(../images/your_image.jpg) top left repeat-x;
/* Here the background image would repeat horizontally along the top of the page. The color #900 would show up in any empty vertical space. You could also use repeat-y to have the image repeat vertically.*/
}

body {
background: #900 url(../images/your_image.jpg) top left repeat;
/*  Here the background image would repeat both horizontally and vertically. You can use repeat to make small create textures or patterns. */
}

Using Margins, Padding, and “Box-Model Math”

Margins and padding help you to create space between the elements in your design. You can assign margin and padding in one of two ways: either by using a property that assigns margin or padding to a certain side of an element (for example, "padding-right"), or by using shorthand with just the "padding" or "margin" properties, which will mean you write less code in the long run. A helpful hint when writing padding or margin is to remember the acronym “TRBL” or “Trouble”. The acronym stands for the order in which the values are applied:

p {
padding: 10px 20px 15px 30px /* TRBL - 10px to the Top, 20px to the Right, 15px to the Left, and 30px to the Bottom.*/
padding: 10px 20px 15px; /* TRB - This would apply 10px to the top, 20px to the Right, 15px to the Bottom, and 20px to the Left. Note that if the Left isn't stated, it uses the padding that is assigned to the Right.*/
padding: 10px 20px; /* TR - This would apply 10px of padding to the Top and Bottom, and 20px of padding to the Left and Right. If you don't set numbers for the Bottom and the Left, the Bottom of the element will use the same value as assigned to the top, and the Left will use the same value as assigned to the Right.*/
padding: 10px; /* TRBL - This would apply 10px of padding to each side of all paragraphs: Top, Right, Bottom, and Left of your element.*/
}

It is important to note that padding is applied to the inside of your element, and margin is applied to the outside. This means that if you assign a background to the element, that background will extend over the padding, but not the margin. To explain this principle, Look at the example html below:

<div id="samplecontainer">
    <img src="/images/cute-dog-with-money.jpg"/>
</div>

We'll make the container's background dark red, or #c00. We'll assign the image a background of gray, or #ccc. We'll also assign padding of 10px 1%, and a margin of 10px 1%, around the image:

#samplecontainer {
     background: #c00;
     max-width: 480px;
     margin: 0 auto; /*This is just used to center the samplecontainer*/
}
#samplecontainer img {
     background: #ccc;
     width: 96%;
     padding: 10px 1%;
     margin: 10px 1%;
}

The padding around the image will show up as gray. The margin around the image will show up as red, because the background of the surrounding container is red. The code will render in the browser like this:

You can use padding and margin values to perform some nifty tricks. For example, you could set an image to appear beside some text by setting some extra padding to the left, and you can center an element inside of its container using margin. Suppose we have an unordered list in html like this:

<ul id="sample">
    <li><a href="#link1">Item 1</a></li>
    <li><a href="#link2">Item 2</a></li>
    <!--The links below are just to make it so that the items when clicked don't go to the top of the page.-->
    <a name="link1"></a>
    <a name="link2"></a>
</ul>

And we write a rule in CSS that applies to list items inside the #sample id:

#sample li a {
        display: block; /* I'll explain things that are unfamiliar below */
        width: 150px;
        margin: 5px auto;
	padding: 25px 0 25px 60px;
	background: #ccc url(images/rose-blue.png) left center no-repeat; 
        /*The URL refers to the location on my server, left center to positioning, and no-repeat makes it so only one rose appears. The #ccc is a gray color applied to show a differentiation between the list items and the rest of the page. You'll notice that because I am using a transparent .png file, the background color shows up behind the image.*/
}
#sample li a:hover {
        background: #aaa url(images/rose-pink.png) left center no-repeat;
        /*This is a reminder about how to set styles for hover events.*/
}
#sample li a:active {
        background: #eee url(images/rose-orange.png) left center no-repeat;
        /*This is a reminder about how to set styles for active, or on-click, events.*/
}

This code would render in the browser like this:

The 60px padding on the left of the list items gives us room to position our background element to the left of the text. The background's position of left is applied to the whole element, padding included, so it shows up on the left side. The text inside the element, however, is 60px away from the left side, making it seem like the image is right next to the text.

You will notice I used the word 'auto' instead of a pixel value for the assignment of the left and right margins. When you use 'auto' and you have specified a width for your element, the browser will calculate the size of the element relative to it's container and apply equal amounts of left and right margin. For example, if the container element was 1350 pixels wide, and our element is 150 pixels wide, the amount of left margin assigned would be equal to 1200/2, or 600px.

You will also notice I used the property 'display: block' in the css. By default, most web browsers will display an anchor link as 'inline' as opposed to 'block'. This was the best explanation I could find of the difference between inline vs. block display. You may find it necessary to occaisionally override the default inline display of anchors, spans, and other inline elements in order to style them like blocks.

The Basics Of Choosing A Typeface For The Web

Humans have been printing words for centuries, but computer programming has only been around since approximately 1843 when it was invented by Ada Lovelace. Even after Mrs. Lovelace's invention, it would still be another 101 years before the Macintosh computer appeared with the ability to choose from multiple typefaces when creating a document.

There are a lot of neat things being done right now on the web with type thanks to experimental technologies like @fontface embedding and services like Typekit by Adobe. However, I would caution against using these technologies and services as a beginner, and advise you to use the time-tested, web safe fonts (Georgia, Verdana, Arial, and Times New Roman) which are installed on nearly every computer in the world.

The technical reasons for cautioning you is that if the font isn't installed on the visitor's computer, the visitor will have to download the font, which will increase your page loading time. You may not be aware of how significant an issue this could be as a beginner if you load 3mb of web fonts per page. Also, if the font takes a while to download, the browser may wait for the font rather than displaying the text in a fallback font. So the user may see a bunch of blank space until the font finishes downloading.

The other reason for cautioning you against using these technologies is that all web designers should have a good understanding of how to produce strong typography with the basic web safe fonts. If you want to learn to be a carpenter, you have to learn how to use a screwdriver and a hammer before you can get to the other tools in your toolbox - and if you want to be a web designer, you need to learn how to use Georgia and Verdana before you go trying the thousands of other fonts out there.

When you assign a typeface in CSS, you should assign 'fallback' typefaces in case your visitor does not have your first font installed. For example:

p {
font-family: Georgia, "Times New Roman", serif;
}

If the visitor does not have Georgia installed, the computer will try to use Times New Roman, and if it can't find Times New Roman, it will fall back to the default serif typeface on the visitor's computer. When you set 'fallback' typefaces, you should try to use visually similar typefaces to your first typeface. Don't assign a sans-serif as a fallback font for a serif, for instance.

Setting Size, Leading, Weight & Style Of Web Type

Once you have sent your font-family, you can begin to set other attributes to control the look of your type. We'll go over the basics and best practices here.

Setting Font Size Relatively

I recommend setting a default font-size in pixels as a css property for either the body (or for the html), and then setting proportional sizes with ems for other elements based on that size. For example:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.25em;
}

Em is a scalable unit equal to the last explicitly stated font-size of the containing element (in the case above, the body). In the CSS above, 1em would equal 16px. So, since our h1 in the example above is 2em, its size would be 32px. Our h2 would be 24px, and our h3 would be 20px.

Setting font sizes in ems allows us to quickly change the font-size in the whole document without changing the proportions of the typographical elements. For example, if the client says that 'the type is too big' on our web page, we can simply set the body's font size to 12px. Then the h1 would be 24px, the h2 would be 18px, and the h3 would be 15px. In this way we can make the type smaller throughout the document without having to reset each font-size, which we would need to do if we had set our font-sizes using pixel values.

Please don't set the size of type using values like 'smaller' or 'medium'. These values show up in Adobe Dreamweaver's code hinting, but you should be aware that browsers may interpret these sizes differently, making your design inconsistent across browsers.

As with a lot of other topics in web design, there are other people who have valid arguments about the best way to set font-size in documents. I prefer to use px and ems, but there are other people that prefer to use percents.

Setting Leading, or Line-Height

Line-height is an extremely useful css property that can make your text easier to read. Line-height specifies the overall height of your line of text in relation to the size of the text. For example, if you have the following:

body {
font-size: 16px;
}
h1 {
font-size: 2em;
line-height: 1em;
}
h2 {
font-size: 2em;
line-height: 1.5em;
}
h3 {
/* DO NOT DO THIS. THIS IS A BAD EXAMPLE. */
line-height: 1.5em;
font-size: 2em;
}
p {
line-height: 1.5em;
}

The font-size of the h1 is 32px, and the line-height will be 32px. This could be a problem if your h1 extends to 2 lines because the lines will be directly next to each other with no spacing. Our h2 would be easier to read: the font-size will still be 32px, but the line height will be 1.5 times the font-size, or 48px. Our h3 will present us with a problem: we are setting the line-height and then making the font-size bigger after the line-height has been set. So the line-height will be 1.5 times the font-size of the body, or 24px, but the font-size of the h3 will be 32px. This will mean that if our text extends to 2 lines, we'll have negative leading and the text on the second line will overlap the text on the first line. The font-size of the paragraph will be 16px (it will inherit this size property from the body), and it's line height will be equal to 24px. In 99.9 cases out of 100 I set line-height after setting the font-size.

Setting Weight, Style & Some Other Properties

Font-weight and font-style are pretty much self explanatory. Weight usually either refers to 'normal' or 'bold', and font-style usually refers to 'normal' or 'italic'. With some fonts available through @fontface embedding or services like Typekit, you may have other options available, but for now just worry about the basics:

h1 {
font-weight: bold;
font-style: italic;
}

There are a few other properties you should be aware of. The property text-transform can be used to transform a line of text in a few different ways, most notably UPPERCASE or lowercase.

h1 {
text-transform: uppercase;
}
h2 {
text-transform: lowercase;
}

The property font-variant can also be useful if the font you are using has small caps. Unfortunately a lot of fonts won't have this and the browser will try to 'fake' the look of small caps by downsizing the uppercase letters of the font ('real' small caps are actually drawn independently from the uppercase letters and will have wider aspect ratios and a different weight of stroke than the uppercase letters)

h3 {
font-variant: small-caps;
}
Web Analytics