Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

Writing CSS
Weve been building toward this moment for a while now. Weve learned how to write HTML that gives meaning and structure to your content. Weve learned and about the characters and syntax of HTML and CSS, breaking down what seems to be very complex in to bite size chunks.

TYP OG RA PHY in CSS

Getting started, I think it is helpful to consider the different types of CSS I am writing. It can make you job easier to identify the categories of look and feel that CSS control. Typography Layout Interaction (for instance, rollover effects) Setting Type with CSS Using CSS, here are a few of the details we can control with typography. Font choice Font size Font weight Color Leading Kerning Case of the letters (all upper, all lower, mixed case) Selecting a Font In print design, we are used to using InDesign. You know that you need a font installed on your computer for it to work when you open an InDesign document. Typography on the web works the same way. The problem is, it is not realistic or legal to prompt users to install fonts on their computer just to view your website. For this we have Web-Safe fonts like Verdana, Georgia, and Times New Roman. These fonts are on most everyones computer already, so its a safe bet that if we use CSS to specify that font, it will be there on the visitors computer and the page will display as expected. Just to be safe, write your CSS in a way so that there is a backup font or font type, just incase someone doesnt have the font we specify first. Specify the font by using the font-family property. h2{ font-family: helvetica, arial, sans-serif; } We can specify any fonts we want in the string after the colon, as long as a comma and space separate each one. The visitors computer is going to try to find the first font on the system. If it finds it, it uses it, if not it moves on to the next font in your list, and so on. Finally you can specify a font type like serif or sans-serif in case the users computer doesnt have any of the fonts you specify. You may see a font-family declaration like this sometimes: h2{ font-family: "Helvetica Neue", helvetica, arial, sans-serif; } The only difference between this code and and the preceding example is that one of the fonts is surrounded by double tick marks. If the font youre specifying has a space in the name, you need to put down double tick marks around it. Also notice that the comma is outside of the tick marks.

Remember As with all CSS properties we will be looking at, the property must be typed exactly as it is shown. It needs to remain lowercase, the hyphen (if one exists) is required, and there can be no errant spaces.

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

Selecting Units of Measure There are several units of measure for web designers to choose from, just like in print. In print you are used to inches, centimeters, points and picas. These units of measure are literal measurements that are the same no matter what ruler you are using. Units on the web are a little different. You have several options of units of measure on the web, percentage, pixels, ems. Percentages are just what they sound like, pixels are the size of the pixel on your users screen, ems are a relative unit of measure. For the most part its safe to use pixels, so lets start there. Changing Font Size We can set the size of a font online using the font-family property: h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; } You can use any value with any unit of measurement here. You just need to make sure your unit of measure is connected to the number without any spaces. Setting Font Weight We use the font-weight property to set a font to be bold or regular: h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; } Setting Font Style We use the font-style property to set a font to be normal or italic. h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; } Tweaking Color We set the color of the type online using the color property. h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; color: #78f5f5; } The color specified above is a hexadecimal value, but you could also use RGB values, which are formatted like this: color: rgb(120,245,245);

Visual Tech

design studio

Kevin Duffy kpduffy@bsu.edu

Changing Line Height Using line-height with CSS is the same thing as adjusting the leading in print design. That is to say, this is the property that sets the vertical space that line of text takes up. line-height: 24px; font-size: 18px; Leading and line-height are equal to the vertical space taken up by a line of text. We set the leading using the line-height property. h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; color: #78f5f5; line-height: 24px; } Just like with font-size you can use any value and unit of measurement here. In this example the value is 24 and the unit of measure is pixels or px. Kerning with CSS CSS doesnt give you as much control as Illustrator or InDesign when it comes to kerning, but it does give you a rough tool to use in the letter-spacing property. It is rough because CSS kerns the entire string of characters in the tag you specify, and because the units of measurement are not nearly as precise, due to limitations of the pixels on a screen. We use the letter-spacing property to control the horizontal spacing between each letter in a string of text. h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; color: #78f5f5; line-height: 24px; letter-spacing: -1px; } You can use any unit of measurement or value in this spot, including a negative value if you want to kern the letters in tighter on each other. Setting up all UPPERCASE, All lowercase, and Mixed Case CSS lets you change the case of the text in the HTML very easily with the text-transform property. h2{ font-family: Helvetica Neue, helvetica, arial, sans-serif; font-size: 18px; font-weight: bold; font-style: italic; color: #78f5f5; line-height: 24px; letter-spacing: -1px; text-transform: uppercase; } The values you can choose from are uppercase, capitalize, and lowercase. As with most CSS, you can tell it to lose any inherited CSS by declaring none as the value.