Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease

Presentation on theme: "Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease"— Presentation transcript:

1 Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease
Lisa Bartle, Reference Librarian Cal. State University, San Bernardino An Infopeople Workshop Hello. My name is Lisa Bartle and welcome to this Infopeople workshop, CSS: Pixel-Level Control with HTML Ease. I am a reference librarian at Cal. State San Bernardino and president of the CLA IT section. I have two online databases that I manage, the Database of Award-Winning Children’s Literature and ABC-Lit: An Index to Children’s Literature scholarship. In addition to my interest in children’s literature, I have a great deal of fun using technology. This is my second class teaching for Infopeople. My first class was an introduction to PHP. There is only one assumption for this class, and that is a familiarity with HTML. You don’t have to be an expert, but to know how it works as a mark-up language saves us a great deal of time and energy so we can move right into CSS. Cascading Style Sheets: Pixel-Level Control with HTML Ease

2 Introductions Participants Name Position What you hope to do with CSS
Having introduced myself, I would like to start with introductions from everyone else. We’ll start with the lab assistant then move through the rows so everyone has a chance to get to know everyone. [Make a seating chart at this time for use later.] Thank you everyone. It’s always good way to begin to get to know each other. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

3 Goals for This Class Introduce CSS and 23 properties
Benefits of CSS over straight HTML Introduce free CSS tools These are my goals for this class. [Read and briefly comment.] Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

4 CSS Zen Garden http://www.csszengarden.com/ One content, many layouts.
I want to show you right from the start how flexible and wonderful CSS is. And the CSS Zen Garden was created to do that. I’d like everyone to go there with me now. Open up your Internet Explorer browser if it is not open and go to the URL on the slide. On the right you see a series of links. The first one is Under the Sea, then Make ‘Em Proud. Each one of those links makes the HTML content look to a different CSS file for the layout of the content. As I click the links, keep in mind that the content, the HTML, isn’t changing at all. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

5 What is CSS? A text file used with an HTML file that defines rules for how the HTML will look A kind of style sheet A list of rules telling the HTML how to display One of at least two style sheets that defines the presentation of the HTML content. [Read, then comment.] Style sheets, lowercase, are text files, just as HTML is a text file. It works in conjunction with one or more HTML files to define rules for how that content will look. Different browsers can interpret these rules slightly differently, but overall rules will give a collection of pages a consistently designed look. CSS, or Cascading Style Sheets, is one style sheet used on the Web. It is overwhelmingly the most dominant, but there is another officially recognized by the World Wide Web Consortium (W3C). Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

6 HTML Alone vs CSS HTML and CSS are not competitors so much as allies.
HTML for style is becoming defunct. HTML is for content. CSS is for style. HTML and CSS are not competitors. Not as Netscape and Internet Explorer were competitors. They are allies. They work together rather than compete. CSS does not do content; it does appearance. The real question question is CSS & HTML or HTML alone. People who work with CSS know the answer is CSS & HTML easy. HTML doesn’t have a chance when it comes to the presentation race. But why? There are some functions that HTML is now performing, defining appearance rather than structure, that CSS does better, such as the <font>. Tables, a primary way people define appearance in HTML, do not have anything near the power and ease of CSS. In addition, the experts say that HTML is going to be losing some of its functionality. Some tags, such as <font>, <u>, <strike>, and <center> are being depricated; that they are not going to be encouraged by W3C. After that they will be termed obsolete , and encouraged to be removed from browser functionality. The strictest versions of CSS do not support them now. If XML comes to replace HTML, stylistic tags such as <i> will no longer exist. Personally, I don’t think that day is quite as close as others, but I could be wrong. You cannot write a page strictly with CSS. CSS is not about content or structure, it is only about appearance. You cannot put content in a .css file because it will not be understood. For HTML and CSS to work together they are usually “glued together” so that the HTML file knows to look to the CSS file to organize the content in a beautiful way. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

7 CSS Benefits Easy to learn Better control of presentation to user
Easy updating of multiple pages Increase in pages’ loading speeds Better accessibility for disabled users But why should you learn CSS? Are there any drawbacks to it that should make you reluctant? Honestly, no. [List benefits with brief commentary.] Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

8 Thinking Inside the Box
If you all don’t mind, I’d like to jump right into it. To work with CSS if we’ve only worked with HTML previously, we need to change our way of thinking. From analog to digital, you might say. Regular Web pages are generally top to bottom. Start to finish. CSS works on the box model. Look at this fairly typical CSS page. Let me go there so you can see the real page rather than this capture. This is the new normal. Side margins. Header with a menu. Main content box. Side auxiliary box. There’s a footer on the bottom. This page was not designed so much top to bottom as in boxes all at the same time. It’s really made up of a series of boxes all joined together. Each of these boxes is called an element. Even a single sentence or bullet can be an element, but I’m going to focus on the boxes, the containers that hold each piece of the design. So, to do CSS effectively the first step is to think inside the box. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

9 CSS Galleries CSS galleries are sites where CSS designs are displayed for admiration and imitation. CCS Beauty ( CSS Drive ( CSS Website ( Open Internet Explorer. If you go to Google and type CSS gallery, you will get a list of galleries of CSS work. I have listed the top three I found when I was making this Powerpoint presentation. You may use one of those or use another listed on Google. I would like to now move to exercise 1. It is going to ask you to pick an attractive page and draw the boxes. It is not important to be absolutely correct in this, but to get used to thinking using the box model of CSS. Draw your best guess of the boxes hidden inside the style sheet that make up the overall design. We’ll take minutes doing this exercise. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

10 CSS Rule Structure selector
A CSS rule is made up of a selector and a declaration. Remember that CSS is a list of rules for how to make the HTML look. A rule in CSS is made up of the selector, seen here in red. The selector is often the piece of HTML structure you are referring to, such as the H1, H2, or the paragraph tag <p>, but not always, and we’ll talk about those other times, too. The declaration, seen here in blue, is made up of the property and the value. CSS is like HTML in that extra space and carriage returns are ignored. So this rule can be writing on one line, as we see it on the left, or broken over several lines, as on the right. When I write my rules I prefer the single line, so I can see more as I create and edit. That is what you will see in this class. However, many others find it easier to read by breaking up the lines. Both are equally correct. As you develop, you will decide for yourself which method works for you. Words like selector, property, value, and declaration make it all seem very complex. I’ll be using them during the entire class, so they won’t seem completely normal by the end of class. And you will see how straight-forward the terms are. selector { property: value; } A declaration is made up of a property and a value. Carriage returns and spaces are ignored. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

11 A Sample of Selectors Body { property: value; }
H1 { property: value; } H2 { property: value; } P { property: value; } A selector, here in red, is often an element of HTML. As a mentioned previously, a selector is often an HTML structural element, such as body, headers H1, H2, etc, and P for text in a paragraph. There are many other selectors, but these make a nice start. There are some selectors, and after each one, inside curly braces, will be our property and value. Other things to note: the declaration, the property and value, is separated by a colon. If you don’t have that colon, the CSS will not be understood. So rule one of the class when your CSS isn’t working is: ALWAYS CHECK FOR THE COLON. The value is followed by a semi-colon. Rule 2 for this class when your CSS isn’t working is: ALWAYS CHECK FOR THE SEMI-COLON. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

12 A Sample of Properties and Values
Body { background: purple; } H1 { color: green ; } H2 { font-size: large; } P { color: #FF0000; }/*hexadecimal for red*/ P { font-family: Arial; } I’m going to dive in with some simple declarations. I’m pretty sure that they will make sense immediately. This is a small sample of what some CSS rules would look like. [Read line by line, pointing out properties and values.] Body {background: purple}. We have just defined the entire background for the body of the document to be purple. For the H1 example the property changes; it’s not background, but color, which means the color of the text. You can, by the way, set a background for the H1, which would differ from the body’s background. But in this case, color refers only to the text. I’ve used the hexidecimal value for this color just to show you that you can use name or hexadecimal values. You can also see my comment in case I forget what the hexadecimal is; it’s red. If you don’t know the standard 17 names for colors using HTML, just Google them. Using the hexadecimal gives you access to about 16 million colors. That is standard HTML information, so I’m not going to cover it, but it is easily found for quick review on the Web. You see in the H2 example that you can define the size using the { font-size } property and large for the value. And in the bottom P selector you see the font itself being defined using the {font-family} property with Arial as the value. Last, notice that the P selector is repeated twice. That is very normal because you may have many properties of P to define such as color, size, font, background, and more. There are ways to combine rules for selectors if they are the same as well as combine properties for the same selector. But for now I’d like us to separate the lines to keep our rules clear. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

13 Comments in CSS Explain the purpose of the coding
Help others read the code Help you when you’ve forgotten what it all means Starts with /* and ends with */ One little side trip. As we go along you will see comments in my CSS coding. I want to make sure you understand what those are and why you are seeing them. In any script or complete computer language there is a way to leave yourself and others comments. These do not appear anywhere except in the coding. They are used by programmers to explain the purpose of a piece of code, they make it easier for others to read the code and follow your train of thought. I find them very useful to remind myself things I want to try next, things that work and don’t work, and what a more complex piece of coding means one year from now when I’ve forgotten. Comments in CSS start with slash-asterisk and end with asterisk-slash. You can see an example in the box. This kind of comment is typical for me. /* Purple and yellow make a good look. */ /* Change header size. */ Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

14 Standard 17 CSS Colors Navy Olive Orange Purple Red Silver Teal White
Yellow Aqua Black Blue Fuchsia Gray Green Lime Maroon Though I prefer hexadecimals, for the simplicity of this class, we are going to use the standard 17 colors that are legally recognized by CSS. Others may or may not give you problems with browsers, so let’s stick to these. Also on your Quick Reference sheet! Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

15 Class Page Layout Welcome back from playtime. Hope you had fun changing things so easily. Since we have only scratched the surface with CSS rules, I expect you are eager to learn more. Remember back when we were playing with boxes. It’s time to return to those boxes to develop our page further. In exercise 1, you looked at a Web page in a CSS gallery and created what you thought were the elements of that page. Then you created the page you wanted to create in the future. Ideally, I would love for each of you to create that imagined, future page. But since I don’t have time to go around checking each person code when there is a problem, we are all going to use the same template for the sake of this class. By the end, I think you’ll see how easy it is to transfer that knowledge to your own idea. That template will look like this. It is a fairly standard layout. You can see we have one large box that encompasses all the other elements. That is commonly called the container. Inside the container we have other boxes. Their names are title, menu, body, news, and footer. You can name these box elements anything that makes sense to you, but I have named them for the sake of the class, so we can all use the same names. Each of these box elements is called a div, which stands for division. During the class I will use the two terms interchangeably. So let’s translate this idea into HTML and CSS. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

16 Divs in HTML A div is a self-contained element that can hold whatever we put inside it. <div id="container">content <div id="title">content</div> <div id="main">content <div id="news">content</div> </div> <div id="menu">content</div> <div id="footer">content</div></div> While we will make very few changes to our base HTML, there are a few we must make. Establishing our box model, our divs, inside the HTML is one of them. A div is a block-level element, a self-contained element, that can hold whatever we put inside it. [We’ll all be looking at the HTML file together and toggling it on screen with the PPT.] CONTAINER--We’ll do this together. Bring up you html in Notepad if it is not up already. Go to your HTML file. You want to begin under the <body> tag. On the next line under the <body> tag, put in: <div id="container">, as you see in the first line of the example on the screen. We are naming everything in the body to be inside the container box or container div. Looking at the page layout, we see that all the boxes are inside the container. The container is made up of everything in the outer-most black border. TITLE--Under the <div id="container"> line, put another line that reads: <div id="title">. We are now defining our title box. It will be made up up the title of the page, “Children’s Literature Awards.” After that header, put the end div tag: </div>. The end div tag (</div>) is closing our box, and letting us move on to another box. MENU--The text that begins with “Read a History of the Awards” will be our menu. So before the <h2>Read a History of the Awards</h2> Put in the third line on the slide: <div id="menu"> At the end of the menu: <a href="history.html">Prinz</a><br> Place the end div tag: </div> BODY--Before the <h2> header “An Introduction,” we’ll put the div tag with body and the name: <div id="body"> <h2>An Introduction</h2> Don’t forget to put an ending div tag (</div>) at the end of the body text. NEWS—Now the news box is inside the body box. So we will start right after the <div id="body">. Type in <div id="news"> Then comes the news content. Then put in your ending div tag. FOOTER--The footer needs to have its own div id tag. <div id="footer"> Copyright by Lisa Bartle Last updated August 11, 2008. </div> And the end div tag. Because the container should end after the footer, you’ll need another </div> to close out the container. Make sure to save the html file. Divs in HTML file match Divs in CSS file. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

17 Divs in CSS #container { property: value; }
#title { property: value; } #menu { property: value; } #main { property: value; } #news { property: value; } #footer { property: value; } We’ve established our divisions or boxes in the HTML. We now must make some rules for those boxes. We can start putting those rules where we left off in the cssclass.css file, keeping our previous rules. Open that file if it is not open. We start with a pound sign, or number sign (#), then the name of the box or div, with no spaces. So it would look like the example in the slide. The pound sign expresses that it is a div, which is acting as a selector, then you have the opening curly brace, the property, a colon, the value, a semi-colon, and the closing brace. Those properties and values are going to be replaced by all kinds of things allowed for boxes, such as borders, colors, width, and more. If you don’t want to type in the property and value part, that’s okay with me. But we will be filling those brackets with fun box properties and values. Make sure to save the CSS file. On other note: Title (with a capital T) as a div id does not equal title (with a lower-case t_ in the HTML. Whatever id you give the element in HTML must be the same you give as the selector in the CSS file. I like to keep everything in lowercase; it’s saves trouble later on. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

18 Box Properties Background-color Width Border-width Padding
Margin Border-width Border-color Border-style We have defined our divs or boxes in our HTML and we have defined our divs in our CSS. But they have no properties or values yet. These bulleted items are some of the most commonly-used properties of boxes. [Read bulleted points in slide.] I should point out that there are other properties, other box properties and later other text properties. I am not covering all properties on all things in this class. What I teach will give you more than enough information to explore one of the recommended books or delve into Web sites or take an InfoPeople CSS Part 2 class, if you want them to create it. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

19 Background-Color The background-color property defines the color of an element’s background. #container { background-color: blue; } #title { background-color: white; } #menu { background-color: red; } #main { background-color: green; } #news { background-color: purple; } #footer { background-color: black; } Let’s start with background-color. It this point, we’ve put in boxes in our CSS file, but they have no rules, no declarations to make us see them. Let’s give the boxes some color so we can see them. The body background we declared to be yellow earlier, but we can make the different boxes different colors. Let’s go into our cssclass.css file and change the colors of some boxes. [Do this together, guided] Let’s make the css file match what we see on the slide. Let’s save the CSS file and refresh our HTML page in the browser. [Looking at the browser.] Now we can see those boxes. We can see the body is yellow, the container is the blue peeking out between the boxes. The title box is white. We can see our boxes in a column going down the web page. The colors have changed but it’s still not the dynamic layout we had in mind. That’s because we haven’t positioned the boxes. We haven’t told them where to sit and how wide and tall they should be. And to do that we need to talk about absolute and relative positioning. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

20 Relative Positioning Relative positioning is scaleable, so is preferred for Web presentation. Percent {width:25%;} or {height:25%;} Pixels {width:100px;} or {height:500px;} Em {width: .5em;} or {height: 3em;} Before I want cover absolute positioning, I want to tell you that there is such as thing as absolute position that uses units such as inches, centimeters, points, and picas. Most CSS people do not use them because they are not scaleable. They do not expand or shrink to fit the browser window and are much more widely used in style sheets for the purposes or print. That’s all you are going to get from me on absolute positioning. The benefit of relative units for positioning is that they are scaleable. When the browser is bigger the sizes will be bigger. Or if you shrink the screen, the sizes with be proportionally smaller. PERCENT--Percentage is based on the size of the containing element. So if the container div is 90% and the body div is 50%, the body div will be 50% of the 90%. Does that make sense to everyone? PIXELS--Pixels are the measure of resolution. They are the standard unit of measure for screens and monitors. Pixels depends on dpi (dots per square inch), so they can change. Most Windows machines are set at 96 dpi, while most Macintosh machines are set at 72 dpi. The only unit on this slide you may not be as familiar with is the em unit. It is based on the size of the letter M in the font set you are using. The em-dash is the width of the letter M for the font set in use. So the em is a relative unit for both positioning and especially used for font sizes, which we will cover more of later. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

21 Grouping, Part 1 H1 {color: black;} H1 {font-weight: bold;}
Group the same selector with different declarations together on one line. H1 {color: black;} H1 {font-weight: bold;} H1 {background: white;} At this point, I need to make a tiny side trip and talk about grouping. We are going to be adding multiple declarations to a single selector, so we need to know how to do it. If you have the same selector and many different declarations for it, you could write it like you see on the top of this slide. That’s fine. In fact, that is how I usually start all of my CSS so that I can keep track of things easier. But after I have it settled, I combine the rules into one line. That’s better. You do what makes you comfortable. But when you group declarations, make sure not to forget the semi-colons and the colons. H1 {color: black; font-weight: bold; background: white;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

22 Grouping, Part 2 H1 {color: yellow;} H2 {color: yellow;}
Group different selectors with the same declarations on one line. H1 {color: yellow;} H2 {color: yellow;} H3 {color: yellow;} Or, if you have multiple selectors and the same declaration, you can combine those, too. Suppose we want all our headers (h1, h2, h3) to be yellow. You could make the rules as you see in top part of this slide. That’s good. Nothing wrong with it But the combined line below is better. Cleaner. H1, H2, H3 {color: yellow;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

23 Width Width defines the width of an element.
#container { background-color: blue; width:90%; } #menu { background-color: red; width: 15%; } #main { background-color: green; width: 85%; } #news { background-color: purple; width: 12%; } Okay, back to width. We talked about relative positioning and that we will be using percentages, pixels, and ems. So we are going to add declarations to our divs and we are going to do some groups so that the same selector can have all its declarations together inside one set of curly braces. Go to your CSS file. We are typing what is in the top box on the slide. We are adding a width to it and see what that does. Let’s make the container 90% of the size of the screen so that we can see the body color behind it. Let’s add a width declaration right after the background-color declaration for the container box. That’s what makes the semi-colon so important; it separates the two declarations within the single set of curly braces. Save the CSS and refresh the browser. You can see immediately how that shortened the container up on the right side. That’s interesting, but we need to do more. For example, the width of all these is the same. If we remember our planned layout, the width varied. The menu was not as wide as the body. The title and footer go all the way across the screen, so we are going to leave them alone. Leaving the width undefined makes it default to 100%. But let’s add some percentages to the menu, body, and news boxes. Go to your CSS file and add some relative widths using percentages to menu, body, and news, as in the second box on this slide. Remember your colons and semi-colons. Save the CSS and refresh the HTML page in the browser. We are making progress, but we need to re-position our boxes. To do that we need a new property called float. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

24 Float: (left, right) Float makes elements float to the right or left of the screen, positioned where they are in the HTML. Floating permits word wrapping. #menu { background-color: red; width: 15%; float: left;} #news { background-color: purple; width: 10%; float: right;} Floating is like align in traditional HTML. The text will automatically wrap around the floated object if the floated object is within that container, as is news inside the body div. Float works for boxes, images, even paragraphs of text you want bigger and separated from the main flow of text. You can float:left; float:right; float: none; or float:inherit;. You don’t use float:none; a great deal and I’m going to skip float:inherit for this class. By the way, you can’t float to the top or bottom, so let’s just consider float:left and float:right. Let’s go to our CSS file and make the menu box float left and the news boxes float right. Save and refresh. I wanted you to see how the body looks when it hadn’t been floated. But I like the appearance better when the body is floated right, so let’s go in and change that. One more thing about float. Elements will float to an area on the screen based on their positioning in the html. Something early in the HTML will float to the top; something later in the HTML will be positioned in the middle. That is why, in the HTML file I gave you, I put the news before the body of the text, because I knew I’d want the news to float to the top. You will want to keep that in mind if you have things that you want at the top of the screen you’ll want to position them early in the HTML. Looking at the HTML page in the browser, let’s review what we are seeing. The red menu box does not have a word wrapping from the text in the body div because menu is its own box. It is outside the green body box. The purple news box is has text wrapping because it is embedded and floating in the green body box. All of these are inside the blue container. Even the white title box is inside the blue container, but it is sitting on the outer-most edge so you can’t see it. #main { background-color: green; width: 85%; float: right;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

25 Clear: (left, right, both)
The clear property disallows floating elements to the right, left, or both right and left. A companion property to float. Clear is a companion property to float. You don’t use clear unless you are using float. You can clear: right, clear:left, clear: both (which is right and left), clear:none; clear:inherit. I’m covering only clear:right, clear:left, and clear: both. Clear means that floating elements are not allowed. If you clear:left, No floating elements are allowed on the left side of the element containing the property. Clear:right means no floating elements are allowed to the right, and clear:both means you can’t have a floating element on either side of the element. I’m going to demonstrate the float using the footer div. Our footer is the black box. It has moved up, because of the floating element menu, and is squeezed beneath it. We want our footer to be on the bottom. By typing in clear:both, we will be moving our footer down, clear of our floating elements, the menu div and the news div. In our CSS file, type in the clear: both as you see in the slide. As always, I’ll do it with you. #footer { background-color: black; clear: both;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

26 Border Properties Border-style Border-color Border-width None Blue
Solid Double Dotted Dashed Groove Ridge Inset Outset Border-color Blue #ff0000 rgb(250,0,255) Border-width Thin Medium Thick The last item I want to cover for this segment of the class is borders, and that’s because it’s so fun. Borders can do just about anything you want using CSS. Borders outline your div or box. Border-color, border-width, and border-style are all the properties. The bullets inside are the values allowed. Looking at border-style, you can see that you can have no outline, a solid, a double line, dotted; the width of those lines can be thin, medium or thick; the border can be colored using color names, ,hexadecimals, or RGB values. You can set different borders on each side, so one side could have a line, but the rest blank. Check your quick reference handout for examples of the double, dotted, etc. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

27 Borders, Examples You can define the entire border or only the top, bottom, left, or right. You can define the border using one declaration. Border-width: medium; Border-style: outset; Border-color: lime; Border-bottom-color: teal; Border-right-width: thin; Border-top-style: dashed; Not only can you define border-width, border-style, and border-color, but you can get more specific. Using right, left, bottom, and top, you define values for only one side of the border. And you don’t even need to spell our width, style, or color. Using the border property, you can simply type them all in with no further properties, as in border: thick (width) outset (style) cyan (color). You could do the same with border-left, etc. Notice on the last example there are no commas, just the width, style, and color, and those do not have to be in a specific order. Border: thick outset silver; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

28 Margin, Border, Padding Standard image of margins, borders, and padding. During our last segment, we didn’t cover all the box properties. We skipped over margins and padding. At first these can seem a little more esoteric when compared with the fun of borders and the necessity of width. But they can make a great difference in how your pages look. You are going to see this graphic, so one very much like it, in any CSS book you read. I admit that the first time I came across it, I didn’t pay it much attention. It seemed boring and I wanted to move on with CSS’s more sexy abilities. But it didn’t take long for me to see that an understanding of this graphic is essential for proper placement. The world won’t fall apart, but your CSS boxes will line up much better when you understand these inherent properties of each and every element. At the top you have the margin. It can be controlled on all four sides using margin-top, margin-bottom, margin-left, and margin-right. There is never content, in the margin. No text. Next comes the border. I can be seen or not seen by the user as you choose. But even if no one sees it, it’s still there. After the border is the padding. This is the space between the text and the border. The inner-most space is for the text or object. Notice that when we talk about height and width, we are automatically talking about the margin, border, and padding. Just as an FYI, the background color or image underlies the content, padding, and border areas. Most browsers should comply with this, though older browsers may not. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

29 Padding Padding is the space between the text/content and the border. You can use padding for all around the element or padding-right, padding-left, padding-top, and padding-bottom. Padding: 1em; Let’s look at our page in the browser. The text is very close to the border. There isn’t enough padding. I’m going to increase the padding on each of these boxes. Go to your CSS file. We are going to add something to each of our divs (menu, body, title, and news). Padding: 1em; Because we are dealing with small amounts, percentages are not really useful. For margin and padding, I like to use the em. We are setting our padding to be 1 em unit, which is a reflection of the size of the letter M we are using in the font set we are using. Let’s say I wanted to increase the padding on only the left side. I could type {Padding-left: 1em;} or padding-right, padding-top, padding-bottom just as we did with the borders. And all of this applies to chunks of text and images. See your reference guide to remember these options for padding. Padding-left: 1em; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

30 Margin Margin is the space around an element. You can use margin for all around the element or you may use margin-left, margin-right, margin-top, and margin-bottom. Margin: 1em; Margin-right: 1em; I’m not going to do anything with the margin, but I wanted to make sure you saw it and know it exists. It looks very much like padding and uses the same types of values: ems, percentages, etc. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

31 Text Properties Color Letter-spacing Word-spacing Text-align Font
Text-Transform Text-Decoration We’ve done a great deal with boxes and borders, but we haven’t talked a great deal about text. Text can do so many things! This is not a comprehensive list. There are text properties that I decided to not include in this class. A block-level element is something that has an automatic carriage return after it. Boxes, <p>, <div>, these are block-level. To change text at the block level is a simple change in the CSS, as we’ve been doing. I’m going to show you a series of block-level text properties It can have color, which we did very early on when we defined our H2 {color: cyan;} P {color: purple; } [Read the bullets and comment briefly.] Let’s start with letter spacing, which works rather nicely with headers. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

32 Letter-Spacing The letter-spacing property creates more white space between letters in words. H1 { color: red; } Letter-spacing is the space between the letters. That’s pretty straight-forward. It works nicely with titles and headers. Let’s change the title, “Children’s Literature Awards,” which is our H1 header, to spread out the letters using the property letter-spacing. Go to your CSS file and change the rule for the h1 header, which reads, H1 { color: #FF0000; } and add into the curly braces: letter-spacing: 5px; Pixels, you remember, is another unit of relative positioning. Because spacing between letters is so small, smaller even than the padding we did earlier, I like to use pixels for it. Px is the abbrevation of pixels. You can use ems if you want; you could type: .5em. Save and refresh. We can see that the letters have been spread out from each other. H1 { color: red; letter-spacing: 5px;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

33 Word-Spacing The word-spacing property creates more white space between words. H1 { color: #FF0000; letter-spacing: 5px;} H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px;} But now the words look a little too close. I tend to do letter spacing and word spacing together in headers. So let’s add again to our rule for the H1 element using the word-spacing property. Let’s do 10 pixels of additional word spacing. Go into the CSS file and add the word-spacing property and value to the H1 as you see. Save and refresh. You can see the header is just a little bit longer now. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

34 Text-Align The text-align property can center, justify, or align text to the right or left. H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px;} And maybe we want to have our H1s centered. Centering is accomplished using the text-align property. The value options are left, center, right, and justify. Go back in the CSS file, to the H1 rules and include the text-align property with a value of center. Save and refresh. Don’t forget that even though we have only 1 H1 in our HTML page, it will effect all the H1s in the entire page and all the HTML pages connected to that style sheet. Since we are working with only one page, it can surprise you later when you didn’t plan on your other pages for all H1s to be affected. H1 { color: #FF0000; letter-spacing: 5px; word-spacing: 15px; text-align: center;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

35 Font The font property defines the family, size, style, weight, and variants of fonts. Font-family: (“Times New Roman,” Courier, Arial, Helvetica, serif, sans-serif, fantasy, cursive, monospace) Font-size: (percentage, small medium, large, x-small, xx-small, x-large, xx-large) Font-style: (normal, italic) Font-weight: (normal, bold) Now lets talk about font. Before we begin, does everyone know the difference between a serif font and a sans-serif font? [Go to serif in wikipedia for a visual.] These are the kinds of properties you can control with regard to fonts. [Read the specific font properties.] FONT-FAMILY--You can have a great deal of control over the font beyond colors. You can choose font family, from specific family names to generic family names. Specific names include Times New Roman, Courier, Arial, or Helvetica. Note that Times New Roman, because it is more than one word, would have to be wrapped in quotation marks in the CSS file. The rest, because they are only one word, do not use quotation marks. You will want to be careful about assigning specific font families because you don’t know what fonts are loaded on your users’ machines. The four named here are safe because everyone has them, and there are many others that are probably safe, but if you like to download fonts, like the Star Trek font or the Buffy font, you can be almost guaranteed that others don’t share those fonts, so they will not display correctly in users’ browsers. FONT-SIZE--Rather than depending on the H1 tag in HTML to define the size of H1 text, you can define it yourself using the font-size property using percentage of the base text. You could make your H1 200% the size of your normal text. You can also use words like small, medium, larger, x-small, x-large, or even xx-small or xx-large. FONT-STYLE--Font-style is mostly about making it italic or not. FONT-WEIGHT--Font-weight is for bolding text. FONT-VARIANT--Font-variant is to make small-caps, which can be useful. Now it doesn’t hurt to keep these things separate, in separate lines, as you try to figure out what you want. But after you’ve settled on some styles, you can use only the font property then all the keywords after it to define a selector, as in the example. Here I chose italic, small-caps, bold, and a generic serif font, neatly on one line. {Font: italic bold serif;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

36 Text-Transform The text-transform property allows switching between uppercase, lowercase, and capitalized words without regard for how the words are typed in HTML. Text-Transform allows you to change from uppercase, lowercase, or capitalize (which is called title case in Microsoft Word). It doesn’t matter what you typed in the HTML file, it will change the font to match your value in the text-transform property. Here is an example of how the the text-transform works. The image on the top left is how I typed it in the HTML code. After I use the text-transform, you can see the “of” and “the” have also been capitalized by the text-transform. Text transform is the last text property I’m covering in this class. I did leave out a couple for the sake of the class. H3 { text-transform:capitalize;} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

37 Text-Decoration The text-decoration property allows the text to be underlined, overlined, or line-throughed. h2 {text-decoration: line-through} h2 {text-decoration: underline} Text-Transform allows you to change from uppercase, lowercase, or capitalize (which is called title case in Microsoft Word). It doesn’t matter what you typed in the HTML file, it will change the font to match your value in the text-transform property. Here is an example of how the the text-transform works. The image on the top left is how I typed it in the HTML code. After I use the text-transform, you can see the “of” and “the” have also been capitalized by the text-transform. Text transform is the last text property I’m covering in this class. I did leave out a couple for the sake of the class. h2 {text-decoration: overline} Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

38 Links The links property defines how inactive, hovered, active, and visited links appear to the user. a:link {color: silver;} a:visited {color: yellow;} a:active {color: green;} a:hover {color: orange; background: black; font-weight: bold; font-size: 150%;} Changing your links is always fun. And you can do more things, more easily using CSS than HTML on it’s own. Links have four states. State 1 is inactive, simply displaying on the page. State 2 is hovered, which is how the link appears when you put the cursor on top of it. State 3 is active, what it looks like when you click on it. State 4 is visited, what it looks like to tell you you’ve been to that page. If you are familiar with HTML, all but the hover is familiar, because you could define all but the hover for quite some time. Before the CSS hover, people commonly used a javascript onmouseover to create the hover effect on text. Looking at our page in the browser, you can see that our page has the default blue for inactive links. Go to your CSS file. I like to put the link rules at the top of the file. I don’t know why, but that’s where I put them. So let go the the top of the file, before the body selector is defined. Type in the example you see on the screen. You can see I’m using the color names for simplicity, but you could use the hexadecimals if you want more control over your color scheme or the RGB values. Save and refresh. You can see that the hover font-size is a rather dramatic change. It makes the text re-wrap itself. I wouldn’t really make a link look like that, but it’s useful to demonstrate. You may use all the font properties for links, too, and the background property. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

39 Including Images Properties for working with images include:
Background-image Background-repeat Background-position Background-attachment The last actual piece of CSS I will cover today is images. We don’t have a single image on our page, so I’d like to show you how images work using CSS. We’ll be covering several properties. [Read listed properties.] Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

40 Background-Image The background-image property sets an image in the background of an element. main {background-image:url(mountainsandsky.jpg);} Background images and colors are layered. If not transparent, the last one listed is visible. First let’s do a background image. We’ll be using an image called mountainsandsky.jpg, which is on your desktop. The property for a background image is background-image. The value is the location. You type url and then in parentheses the image location. Since this image is in the same directory as the style sheet, we can just type the name. For other locations, it is the same as creating and HTML link, using the style sheet as the reference point. Open your CSS file. We have a rule for our body property. It’s the background: yellow declaration. The background-color and the background image are layered one on top of the other. If you put background: yellow first, it will be covered up by our image because our image isn’t opaque. If you put the image first, it will be covered by the color. If you use opaque images, such as transparent gifs, that isn’t much of an issue, using mountainsandsky.jpg, it is. Type in the text in the white box on a different line so we can play with it, but put it last. [Showing my code.] Save and refresh. The really interesting part is that you aren’t limited to putting a background image in the body. The selector Body is just an element. You could use another element such as H1, P, or you could attach it to one of the divs and put background-image instead of background-color. You’ll get a chance to play with that in exercise 4. Interesting tip: Instead of body as the selector, put an asterisk. All the elements on the page will use the same background image. Kind of interesting effect. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

41 Background-Repeat The background-repeat property sets an image in the background of an element and tiles, or repeats, it. Tiling is the default. main {background-image:url(fairytransparent.gif); background-repeat:no-repeat;} repeat Possible Values Repeat Repeat-x (horizontal) Repeat-y (vertical) No-repeat That was one image covering the entire background, or other element. You can also tile, which people have been doing almost since HTML was invented. Our mountainsandsky.jpg will not work well for this because it is a large image and it is not transparent. There is another image on your desktop called fairytransparent.gif. Go into your CSS file. First, let’s change the background image we are working with to fairytransparent.gif. Save and refresh. Because this is a small image, it will tend to repeat so that it can fill the space. Because it is a transparent gif you can see the yellow background color. The possible values for the background-repeat property are repeat, no-repeat, repeat-x, and repeat-y. In this case, if we want X and Y refer to the horizontal and vertical axis in graphs. X is the horizontal axis and Y is the vertical axis. So if we wanted this to repeat on the vertical axis, the value would be repeat-y. If I wanted it to display only one time, I would use no-repeat. Go into your CSS file and add the background-repeat property with no-repeat as the value. Save and refresh. We can just barely see our fairy. Why is that do you think? no-repeat Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

42 Layering Background colors and images are layered like sheets of paper one on top of the other. Remove background colors and you will see your image. #container { width:90%;} /*background-color: blue; */ #title { Padding: 1em;} /*background-color: white; */ #menu { width: 15%; float: left; Padding: 1em; } /*background-color: red; */ Remember when I said that all of these elements and their properties are layered? The background color of the title div is layered on top of the fairy because it is coming after it in the style sheet. Go with me into the CSS file and remove the background color from the title div. I’m going to put it on another line and comment it out. Save and refresh. Now you see the blue background color in the container. What if I remove that too? Watch me as I remove the color from the container and the menu. I don’t like to delete these things because I may change my mind, so I’m still just moving them and commenting them out. Save and refresh. Now we can see our fairy image. But what if we don’t like the default position, which is in the upper left-hand corner? Then we need to learn about image positioning. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

43 Image Positioning Image positioning is accomplished using two properties: Background-position Background-attachment [Read slide.] Let’s start with background-position. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

44 Background-Position The background-position property positions the image using either combined keywords top, bottom, left, right, and center; length values; or percentage values. [Read slide.] Let’s reposition the fairy using the background-position property. And because it is easier to start with, let’s use keywords to position her. Our options include right top, left top, center top, left bottom, right bottom, center bottom. Go into your CSS file and add the background-position property using the value on the slide. I’ll do it with you. I’m going to hold off on teaching you percentage values, because it takes a great deal of explanation on how the percentage line up, so I consider that more advanced. Background-position: right top; Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

45 Background-Attachment
The background-attachment property fixes or scrolls an image in the browser window. Values include fixed and scroll. Background-attachment: fixed; The default for the images we’ve placed on our page has been fixed. That is, they can be scrolled away. If it’s on the top of the page and we scroll to the bottom, we won’t see the image. That principle is behind the background-attachment property. As I said, the default is fixed, but another value is scroll. Go to your CSS file and let’s make the fairy scroll. Follow me as I do it using the declaration on the slide. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

46 Cool Tools CSS Galleries Color Generators Layout Templates
Font Comparison CSS Web development tools During this class we have created an HTML page using CSS for presentation. It is much better than we started with, but I think I can say it is a bit garish. To make a beautiful Web page, it is good to have help. You never know what’s out there to help you make wonderful CSS pages until you look, and I have done the looking in advance. Break out the handout “Further Resources for CSS.” I’d like to quickly talk about a couple of them. We’ve already looked at the CSS Zen Garden and CSS galleries at the beginning of the class, so I’m going to skip those except to say they are great for inspiration. Especially since this was a beginner’s class. [Speak here about my favorites, one from each category. See your “Resources for CSS” handout. Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

47 Best Sites to Learn More
If you forget most of what I tell you a few months from now, that’s okay. You can review the Powerpoint and you can go these sites for a review. [Make sure to review the W3C set of pages devoted to CSS. Show example of interactive page.] Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease

48 and complete the evaluation.
Evaluation Time Please go to infopeople.org/wseval.html and complete the evaluation. Thank you! Cascading Style Sheets (CSS): Pixel-Level Control with HTML Ease Cascading Style Sheets: Pixel-Level Control with HTML Ease