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
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:
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):
You can also position your background image, or set it to repeat.
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:
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:
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:
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:
And we write a rule in CSS that applies to list items inside the #sample id:
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:
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:
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:
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:
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.
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)