css tutorial v3 · 2011-11-11 · css files so it can be quickly accessed from your users cache....
TRANSCRIPT
CSS Tutorial By Lily Olson
2
Table of Contents
1. The Basics a. What is CSS? b. Why Use CSS? c. CSS in Libraries
i. Why should librarians learn CSS? ii. How is CSS helpful for libraries?
2. Getting Started
a. How Do I Use CSS? i. Internal
ii. External iii. Inline
b. Syntax c. Tag, Id, Class, and Universal Selector
3. Styling your Webpages
a. Fonts b. Text c. Backgrounds
4. Going Further
a. Possibilities of CSS b. Selected Resources
5. Bibliography
3
Before You Begin Before beginning this tutorial, it is important to have knowledge of both HTML and XHTML. Don’t know HTML and XHTML yet? W3schools.com provides great tutorials that will get you started. Follow the links below to find tutorials on HTML and XHTML. HTML – http://www.w3schools.com/html/default.asp XHTML – http://www.w3schools.com/html/html_xhtml.asp The Basics What is CSS?
CSS stands for Cascading Style Sheets. It is used within HTML webpages to help visually design and enhance the look and feel of the website.
Why Use CSS?
Though HTML and XHTML are great for adding content and setting up the structure of your website, they do not provide a great way to visually design your website. HTML is simply a way of carring content, where as CSS helps you to display that content in an aesthetically pleasing manor. CSS provides ways to design your website visually. CSS allows you to add borders, font colors, and add backgrounds in addition to many more visual features. Better yet, CSS allows you to create one file that dictates the design of your entire site. This way, changes can be made to your CSS file, without having to update each page individually. CSS can dramatically change the look and feel of a website. An example below shows two websites with the same content, but with different style sheets.
4
Why Should Librarians Learn CSS? It is very important for librarians to have knowledge of CSS. As the web presence of libraries
becomes more important, so does the need to have the skills necessary for web design. CSS can help librarians better develop the look and feel of their library websites, blogs, and other online presences.
How is CSS Helpful to Libraries? As we continue through the digital age, the online presence of libraries becomes more and
more important. Many times, the first place a patron starts, even before entering the physical library, is online. Having a robust web presence for any library is very important for communication between the library and its patrons as well as for informational purposes. Creating a more visually appealing website will not only please patrons, but a better display will also help them better understand information on the library website
Getting Started How Do I Use CSS?
CSS is placed either within an HTML document, linked to an HTML document, or written within an HTML document itself. The following describes, internal, external and inline CSS. Internal – Internal CSS is written within the HTML document. It appears in the HTML document between the “head” tags. To define your CSS information, place it between “style” tags. Example: <head> <style type=”text/CSS”> H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;} </style> </head> External – External style sheets, a .css file, is linked from within the HTML document. All of the actual style information is then present in the .css. Example: <head>
5
<link rel=”stylesheet” type=”text/CSS” href=”style.css”>
The information contained in the style sheet might read as follows:
H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;}
As shown above, it contains the same information as the internal style sheet, yet does not contain “style” tags. Because an external CSS file does not include any HTML, the “style” tags do not need to be present. Inline – Inline CSS is written within the HTML of a document. Though it is recommended this method be used sparingly by W3 Schools, it can be performed on occasion.
Example: <p style=”font-size:small;color:blue”>Hello.</p>
External, Internal, or Inline: What to Choose?
Now that you know more about what types of CSS can be implemented within your webpages, how do you decide which one is right for you? External CSS can be extremely useful when creating a large website. It can be linked to each page of your website and updated from the CSS file. All of the changes made to your CSS will be reflected in all of your pages. This is a fast and efficient way to make changes to your entire website all at once. External CSS also loads faster for your viewers, as your web browser will download the CSS files so it can be quickly accessed from your users cache. Though internal and inline CSS can be used in your websites for easy, visual boost to your HTML, they are not the most efficient way. When updating the visual style of your website, you will need to update the CSS within each HTML page. This makes for added work in the long run.
CSS Syntax
As with any programing language, CSS uses a very specific syntax. The syntax of CSS has two main parts: The Selector: the HTML element you want to style The Declaration: the style you are giving to the selector. Each declaration contains a property and value.
6
Property: the property you are changing Value: what change you are attributing to that property
Comments are also often used in CSS to help those viewing the CSS explain code for others who might be viewing the CSS. CSS can also be helpful for the programmer as well as anyone else interested in the code. Comments do not show up on the webpage and are only seen within the code. They also do not effect the code in any way. Example:
/*This element defines the HTML element paragraph*/ p {color:black;} /*This is another comment*/
Tag, Id, Class, and Universal Selectors
Tag Selectors: Tag selectors are sometimes also called “type” or “element” selectors. They allow you to style HTML elements. For example, you can style the <p> tag to create a specific style for every paragraph that appears on your page. Universal Selectors: Want all of a certain element of your webpage to have the same look? You can easily do this with the universal selector. A universal selector is denoted by an asterisk (*). For example, if you wanted all HTML tags on your page to have a font color of purple, you could simply denote:
* {font-color: purple;} Id Selectors: Id selectors are used for defining unique elements. Id selectors are defined in your CSS file by using a hash mark, #. For example, you could define an Id selector #navigation.
#navigation { font-color: #EC1717} This would make anything identified in your HTML document #navigation, display in the
color red. Id selectors are useful because they are unique and will never match more than one element in a document. Class Selectors: Class selectors are used to give elements different looks, without interfering with other tags on the page. For example, if you had many pictures, yet you wanted only
7
one to have a border, you could use a class selector. Class selectors are defined using a period, for example .border. This way, only images in your webpage with the class of .border will get a red border, not all images.
Id Selector or Class Selector? A tag selector easily lets your control the overall look of any element of your HTML document. But what about when you want more control? Which do you choose – Id or Class Selector? Below are some ways to help you decide: - Id Selector
o For one unique element o Use when element only appears once on the page (header)
- Class Selector o For a group of elements o Use when element appears more than once on the page (photos)
Styling Your Webpages
CSS provides many different style elements that can be implemented in your website. Here we will go over a few different properties that can be added and used. The properties in this section are only a select few of the properties that can be used in CSS documents.
Fonts
CSS is a great way for styling the text of your webpage. Styling your font is one great way to style your text. Without styling your font, the font will default to Times. Though Times may be preferred for some websites, usually you will want to determine your own fonts on your website. Within your CSS, you many choose a “font-family”. A font family provides a list of fonts, where the users browser will read the fonts and choose the first one that is installed on the users computer.
font-family: Arial, Helvetica, sans-serif; In the example provided above, the browser will look through the list, and if the user does not have Arial installed on their computer, it will then look for Helvetica, and so forth. If a
8
user has neither of those fonts installed on their computer, the browser will choose a “sans-serif” font. An example of a serif font and a sans-serif font is shown below.
In addition to choosing the font family of your text there are also many other elements from which to choose. The elements you can assign to font are as follows: - font-family - defines what font-family to use - font-size - defines the size of the text - font-style - generally used to specify italic text - font-variant - allows you to style font in small caps - font-weight – allows you to define weight of font (e.g. bold)
Below is an example of a CSS document styling fonts:
<style type="text/css"> h1{font-family:"Times New Roman",Times,serif; font-style:italic; font-size:14px; font-variant:small-caps; } </style>
Text In addition to styling the fonts in your webpage, you can also style the text in various ways.
CSS has many text properties that can be added. Below are a few of the properties:
- color – specifies the color of text - direction – specifies the writing direction of the text - text-decoration – specifies a decoration (e.g. Underline, overline, etc.) - text-align – specifies how to align the text (e.g. Center, right, left) There are 3 ways in CSS to define colors: - name the color
o example: {color:red); - use RGB
o example: {color: rgb(236,23,23); - use hexadecimal color notation
o example: {color:#EC1717;
9
Each of the examples above, denote the color red. Using either a RGB or HEX value will display your color most accurately on a user’s computer. Depending on how you define the value “red”, different computers will interpret their version of red differently. With programs such as Adobe Photoshop and GIMP, finding an RGB or HEX value is easy. The screen shot below shows where to find values for RGB and HEX values in Adobe Photoshop.
Below is an example of a CSS document implementing different text properties:
<style type="text/css"> h2{color: rgb(255,220,80); text-decoration:blink; test-align:center; word-spacing:30px; } </style>
Backgrounds One of the best ways to enhance your website is to utilize the background property. CSS
does a great job using background images in conjunction with its other properties to create stunning imagery for websites. Some of the properties that can be used to style backgrounds are as follows:
10
- background-color - background-image - background-repeat - background-position - background-attachment
Now let’s go over the background properties to see what each one does… Background-color – Background-color allows you to determine the color of your website’s background. Just as in styling text, you are able to pick from a named color, RGB and HEX values. Again, RGB and HEX values will result in the most “true” and consistent colors across your viewer’s computers. An example of background property being used is as follows:
body {background color: rgb(255,220,80);} Background-image – Background images used in CSS give great flexibility to websites, also. With CSS you are able to determine the body for different parts of your document. For example, you can style the background of the body as shown in the example below: body {background-image: url(images/img.gif); } In this example, the body is using the background img.gif. The “url” part of the statement above, tells you where to go to retrieve the image. Be mindful that the document path listed for the URL is in relationship to the style sheet, not the HTML page. Background-repeat – The background-repeat property defines whether or not you would like a background image to repeat. The background-repeat property accepts four values: repeat, no-repeat, repeat-x, and repeat-y. Repeat and no-repeat are quite simple and tell your image to either repeat or not repeat. Repeat-x will repeat an image horizontally, and repeat-y will repeat an image vertically. Background-position – Background-position determines the position of your background image. Working with the values, left, center (horizontal), right, top, center (vertical), and bottom you can position your image any where on the page. body { background-image: url(images/img.gif); background-position: center right; }
The example above shows that the image will be placed horizontally in the center and vertically on the right. Using the attributes above, you can place an image anywhere on a page. The diagram below illustrates the different positions a document could be placed.
11
Background-attachment – Background attachment allows images to remain stationary on a page. For example, when you are on a website, often images will scroll with the page. In order to make your background image stay put, you can use the background-attachment property. The background-attachment property has two values; scroll and fixed and they do just that. Scroll will allow your image to move with the page and fixed will make your image stay in place while the page is moving.
Overall, backgrounds give you great flexibility when working with images in CSS. Below are examples of the kind of things that can be done just using backgrounds.
12
Going Further Possibilities of CSS This tutorial has covered syntax and basic styling techniques although
there are endless possibilities with CSS. This tutorial only scratches the surface of what can be done with CSS. Nevertheless, the properties described in this document can help create more robust and visually engaging web pages. Other more advanced things that can be done with CSS are creating image galleries and using CSS positioning. CSS can also be used for visibility purposes. For example, images can be hidden or shown with the click of a button without any need to reload a page.
Further Reading
If you want to learn even more about CSS the following are great resources for continued learning.
CSS Tutorial. (n.d.). Retrieved October 23, 2011, from http://www.w3schools.com/css/
Lemay, L., & Colburn, R. (2010). Sams Teach Yourself Web Publishing with HTML and
CSS in One Hour a Day: Includes New HTML5 Coverage (6th ed.). Sams. McFarland, D. S. (2009). CSS: The Missing Manual (New edition, Second Edition.).
O’Reilly Media. Meyer, E. (2010). Smashing CSS: Professional Techniques for Modern Layout (1st ed.).
Wiley. Olsson, T., & O’Brien, P. (2008). The CSS: The Ultimate Reference (1st ed.). SitePoint. Tittel, E., & Noble, J. (2010). HTML, XHTML & CSS For Dummies (For Dummies
(7th ed.). For Dummies. Wyke-Smith, C. (2007). Stylin’ with CSS: A Designer’s Guide (2nd ed.). New Riders
Press.