Shane Gellerman 10/17/11 LIS488 Assignment 3

Size: px

Start display at page:

Download "Shane Gellerman 10/17/11 LIS488 Assignment 3"

Laureen Whitehead
5 years ago
Views:

1 Shane Gellerman 10/17/11 LIS488 Assignment 3 Background to Understanding CSS CSS really stands for Cascading Style Sheets. It functions within an HTML document, so it is necessary to understand the basics about HTML tags and how they work. Where HTML provides the content of a webpage, CSS provides the form, or layout to the webpage (W3schools.com). Harris and McCulloh s HTML, XHTML, and CSS AllinOne Desk Reference for Dummies says, If XHTML gives your pages structure, CSS gives them beauty. CSS allows you to control the color, background colors, fonts, sizes, borders and lines, leading, text alignment and margins in a much easier way than trying to do this with HTML alone (webmonkey.com). In this tutorial I will show you the different ways to manipulate the text s color, sizes, and other features and finally to insert CSS into your HTML document. Value of CSS As earlier mentioned, CSS allows a person to control many more aspects of a webpage than HTML alone would allow. It is very useful for librarians because it allows them to design their webpages to better fit their needs. When used effectively CSS can make a webpage must more aesthetically pleasing and improve its layout to better match users needs. Patrons will be able to enjoy attractive and helpful webpages without thinking about ways the webpage could be improved. Basic Structure of CSS Selector Declaration Declaration h1 {color: yellow; backgroundcolor: red; } Property Value Declaration Block While CSS is similar to HTML, the tag structure is a little different and consists of 5 parts 1. Selector This part indicates what parts of the text (in HTML), this CSS tag will affect. 2. Declaration Block This is the entire CSS tag enclosed in brackets {,} for a given selector. It usually extends vertically over several lines. 3. Declaration This is the combination of property that will change in the text and the value to which it will change. 4. Property This is what will change in the text. 5. Value This is what the property selected will change to. (MaxDesign.com) In the example above, the color of the text will appear yellow and the background color as red.

2 ***NOTE that it is very important to keep the structure of the declaration all in lowercase, with the property then a colon, value and then a semicolon, with the entire block surrounded by curly brackets. It is also very important to use a dash between two words in a multiword element like backgroundcolor or fontfamily. Beginning with an HTML Document To first understand how CSS functions within a document, it is necessary to write the content that the CSS formatting will act upon. First, open up a plain text editor, like Notepad, TextEdit, or TextWrangler (I am using TextWrangler, other plain text editors may not have different colors to clearly show different elements.) For the purposes of this tutorial, I will provide you with some basic HTML lines for you to manipulate. (This XHTML code was generously provided to me by the fine people at Desk Reference for Dummies) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html lang="en" dir="ltr" xmlns=" <head> <meta http-equiv="content-type" content="text/xml; charset=utf-8" /> <title>basiccolors.html</title> <style type = "text/css"> body { color: yellow; background-color: red; } h1 { color: red; background-color: yellow; } </style> </head> <body> <h1>red text on a yellow background</h1> <p> Yellow text on a red background </p> </body> </html> Copy and paste this into your plain text editor, it should look something like this:

3 Take a minute and look at the text. With just some basic HTML background, you may start to see how CSS fits into the document. The document switches to the CSS language by using the HTML tag <style>. In the tag it says the new language type is text/css, which lasts until the end tag </style> is used again. The lighter blue color with the words color and backgroundcolor are the parts of the document written in CSS, each pair forms one declaration block. The CSS text is also divided by two selectors, one for the design of the body, and one for the design of the large header on top, referred to as h1. Now, save your document as.html so we can preview it in the next step.

Previewing Your Basic HTML/CSS Document It s a good idea to see what this first basic document looks like in a web browser, so we can see how our future changes to the CSS structure will change the

4 Previewing Your Basic HTML/CSS Document It s a good idea to see what this first basic document looks like in a web browser, so we can see how our future changes to the CSS structure will change the whole look of the document online. (In this tutorial I am using Firefox, but it should work on all browsers. If you experience any problems, try using Firefox.) To do this, open your web browser and go to FILE à OPEN FILE, and then choose you saved file. It should appear like this in the web browser:

Experimenting with Color and Background Color This step is probably the easiest thing to master about CSS because it is so straightforward and simple.

5 Experimenting with Color and Background Color This step is probably the easiest thing to master about CSS because it is so straightforward and simple. As you may imagine from looking at the CSS code, the color requested is listed right where you would expect it. To change the color, simply type the color you desire in place of the colors currently listed in each field. You may also want to edit the text in the HTML code lower down so it matches the colors you are changing the webpage to. ***Remember to look at the selector so you are certain which parts of the document you are changing. After you have made the changes, refresh the page and it should look like this (assuming you used green and purple):

Another way to change to color in the CSS code involves using a 6character string of numbers and letters derived from base 16 (as opposed to base 10 with numbers 09). These strings are called hexes.

6 Another way to change to color in the CSS code involves using a 6character string of numbers and letters derived from base 16 (as opposed to base 10 with numbers 09). These strings are called hexes. This method is more accurate for very specific colors, and preferred by most web developers (Harris and McCulloh) o Some examples of the base 16 code for colors are: Black = # Blue = #0000FF Olive = # White = #FFFFFF o Try some of these hexes instead of the color words, and see if you prefer this method. The website below provides more examples of hexes for you to experiment with. Adjusting the Fonts Now, in order to change the fonts of the document, it will be necessary to add new declarations to our declaration blocks in the CSS code. The property needed to change fonts is called fontfamily and will be inserted between the brackets for each declaration block (Remember the dash between font and family is very important.) Let s try to only change the font of the header, NOT all of text body, by inserting the property fontfamily on the line directly under backgroundcolor and above the end bracket, under the h1 declaration block. Choose any font, I will try Arial Black so that it stands out. However, since all browsers may not support all fonts, it s a good idea to list other fonts in the same family as a back up. A list of common font families is available at

It should then look like this: If you have made it this far without any problems, congratulations! These constitute some of the fundamentals of CSS and are basic steps to improve a very bland webpage.

Layout and Borders CSS sees each webpage through a unique layout that consists of concentric boxes. o The innermost box, Content, is where most of the text and content of a webpage appears.

7 It should then look like this: If you have made it this far without any problems, congratulations! These constitute some of the fundamentals of CSS and are basic steps to improve a very bland webpage. One learns CSS best by playing around with each of these basic elements and seeing how minor changes can affect the whole webpage. There are still some more interesting CSS tricks to learn. Layout and Borders CSS sees each webpage through a unique layout that consists of concentric boxes. o The innermost box, Content, is where most of the text and content of a webpage appears. o Then follows the Padding box, around the Content, and the Border box around the Padding. o The outermost box is the Margin. (w3schools.com) CSS allows for inserting lines and borders around text. Let s try to add a border around all of our text. The formula for adding a border goes as follow: o bordertype: ; bordercolor: ; borderwidth: ; (webmonkey.com) o You can use either measurements or point size to indicate the width and color names or hexes for the color. There are also various types of borders to use. o I will use the formula borderstyle:solid; bordercolor:purple; borderwidth:5px; o I am placing it under the background color under the body part of element in the CSS part of the HTML document.

8 Inserting CSS Now that we have practiced some basics of CSS use, we need to figure out the best way to insert CSS into our HTML documents. There are 3 ways to do this: o 1. Internal style sheet This is the method we are using for this tutorial. Necessary to indicate the change to CSS text in the HTML head by using the element <style type = text/css >. o 2. External style sheet also placed under the head element in the HTML document, you need to use the <link rel="stylesheet" type="text/css" href=" " /> to link to your CSS file. o 3. Inline written within the HTML document (w3schools.com). This is considered the least efficient. While the Inline method may seem most effective, it can cause additional problems by making the HTML document longer and more cluttered. Additional CSS Attributes As you can see, whether changing the color or font of text in a webpage, CSS relies on a given property in a declaration to achieve the task. Some more examples of properties that can be used in CSS code are: (filename and HEXCOLOR are used in place of a chosen file and hex color) o Add a background Image = backgroundimage:url( filename ); Ex backgroundimage:url(tree.gif) o Add color to a hyperlink = a:link(color:#hexcolor) Ex a:link(color:#ffffff) As stated earlier, the best way to learn CSS is to experiment by adding new elements and making small adjustments to the ones already in your document. Additional references are listed below for you to consult while you continue to learn about CSS. Additional CSS References List of CSS Websafe fonts List of CSS colors and equivalent hexes Videos explaining CSS principles Information on more complex CSS elements

9 Works Cited W3Schools.com. CSS Box Model. World Wide Web Consortium. Web. 17 October W3Schools.com. CSS Websafe Fonts. World Wide Web Consortium. Web. 17 October W3.org. CSS Tutorial. World Wide Web Consortium. Web. 17 October Webmonkey.com Mulders Stylesheets Tutorial. Web. 17 October Harris, Andy and Chris McCulloh. HTML, XHTML, and CSS AllinOne Desk Reference for Dummies. Hoboken: John Wiley & Sons, MaxDesign.com. CSS Presentations. Web. 17 October

Assignments (4) Assessment as per Schedule (2)

Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like