1. Session 3: Basic CSS Spring 2009
The LIS Web Team Presents
Basic CSS Workshop
Introduce web team
Stop me at any time if you have questions
During Exercise, if you get stuck please grab one of the web team for help – don’t get behind.
We are going to stick to the scheduled time so we will be wrapping things up at 12:20. Please us if you have any questions.
The handout does not follow the presentation exactly. It is mainly for your reference and for the exercises.
Session 3: Basic CSS
Spring 2009

2. Course contents What is CSS? CSS Structure CSS Application Exercise 1:
Overview: what CSS is and why it was created
CSS is not the same as HTML – it’s not the same as html tags
CSS can be applied to one chunk of content on one page, an entire page, or an entire site.
Basic CSS Spring 2009

3. Cascading Style Sheets Cascading Style Sheets
What is CSS?
Cascading Style Sheets
Cascading
Style
Sheets
CSS is the most current method of formatting web pages. It helps to alleviate the discrepancies between different browsers’ interpretation of HTML tags. Also, developers were creating special display features that would only work in specific browsers.
CSS was created to alleviate formatting problems and all browsers are now compliant. Some old ways of formatting are being phased out.
Cascading: There are 3 levels of CSS styles – it basically indicates where the style instructions are located in your site -they have an accepted order of preference that Browsers will follow - the browser cascades through these instructions when reading a web page.
Style: Setting display rules – color of text or background, margins, font, etc.
Sheets: are like templates or a set of rules that has all of the format settings for because the ultimate goal of creating CSS is to have a separate sheet (page) that includes all of the style settings. Making changes to that sheet will produce changes on all of the pages in your site.
Basic CSS Spring 2009

4. CSS Demystified… Format of CSS 2 parts: Selector Declaration Property
Value
Essentially, CSS is a styling language that tells a browser how to display your web page – can be applied to HTML elements
Selector: the HTML element that you wan to add style to - paragraph, heading, table, background, etc
Declaration: The statement of style that you are applying to that element – color, orientation, font style
The declaration is made up of a property and a value – example color: red
Note: The next several slides may be confusing. Just try to get a general idea of the overall concepts of CSS. It will make more sense when we start the exercises. Like HTML, you get better with practice and mistakes.
Basic CSS Spring 2009

5. Writing CSS - Basic Structure
Basic: Selector {declaration;}
Declaration = {property: value;}
HTML element I want to style {what aspect of that element I want to set: what value I want to style;}
The basic format & content of a style contains a selector and a declaration
The Declaration contains the property and its value
The Property is what you want to change – font, color, margin, etc
The Value is the setting for that particular Property – red, italic, 40px, etc
EX: selected html element is FONT – the aspect I want to set is the COLOR – the value that I want to set is RED
Basic CSS Spring 2009

6. Selector {property: value} 1. font {color: red;} 2. p {color: blue;}
Writing CSS - Example
Selector {property: value}
1. font {color: red;}
2. p {color: blue;}
The selector is FONT - The Property is the COLOR - The Value is RED
The selector is PARAGRAPH - The Property is the COLOR - The Value is BLUE
Basic CSS Spring 2009

7. Writing CSS - Expanded example
Selector {property: value}
font {color: red; background-color: black;}
This is an example of having multiple properties and values
The selector is FONT
The Property is the COLOR - The Value is RED
The Property is the BACKGROUND-COLOR - The Value is BLACK
Basic CSS Spring 2009

8. ids: work within a <div> declaration:
Custom Styles - ids
ids: work within a <div>
declaration:
{color: blue; font-size: 10pt;}
#nav {color: blue; font-size: 10pt;}
<div id=“nav”> [text etc that is to be styled] </div>
IDS: you create these – named based on what area of the page the style will be applied to
Start with the declaration
Add custom name in place of a selector – begin with a # nav is a common name given to a navigation section – links that will navigate through your site This statement would be in the head section of the page – in other words, this is an internal style
Then the custom name is entered into the body where this style is to be applied
Last – inserting those style instructions into a <div> to apply that content to a section of a page
Basic CSS Spring 2009

9. Custom Styles - classes
Classes: use in addition to ids
Declaration {background-color: yellow;}
.yback {background-color: yellow;}
<div id=”nav”> Font size is 10pt and blue </div>
<div id=”nav” class=”yback”> Same as above but w/ yellow background </div>
<div class=”yback”> Font size is 12pt and background is yellow </div>
What’s the difference?
Classes:
Again, start with a declaration
Add a custom name in front of the selector but put a period in the front. This statement is also an internal style and would be entered within the head section
The difference is that ids can only be used once for one block of content.
Classes can be used over and over again.
Basic CSS Spring 2009

10. Style Rules Where do they go 3-options Inlined Internal style sheet
External style sheet
Styles can apply to varied quantities of data on your web site – just a small portion or your entire site
Inlined - not heavily used – it may be used for a single instance of a particular style on one page
Internal – used if one document has its own style – possibly different from the others – put into the HEAD section of a page
External – all of the style settings are put into one separate page on your site.
Not the same as an html page – it is a CSS STYLE SHEET
Changes made to this style sheet affect all pages within your site that are “calling (using) this sheet
We will start out doing inlined so you can understand how the styling works. Think of this as stepping stones where you can gradually work up to doing an external styles sheet
Basic CSS Spring 2009

11. Inlined - example <body>
<p style=“text-align: center; font-weight: bold; color: yellow;”>
What was I thinking?</p>
</body>
What was I thinking?
Inlined CSS is inserted directly into the code where you want the style to be applied.
This really isn’t that much different than regular HTML formatting – you can tell the difference by the “style” within the tags
It has the highest priority – so this will override any other CSS styles – Internal or External
Basic CSS Spring 2009

12. this is a style sheet written (text) in css (CSS) language
Internal - example
<head>
<title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: trebuchet, verdana;}
</style>
</head>
this is a style sheet written (text) in css (CSS) language
I want the “align text” property to be given the value of “left” and font family to be trebuchet, verdana
The style sheet is stated within the head section of an html page.
All of the text within the BODY of this particular page would have text that was the font-family trebuchet, verdana and aligned left.
This would override any EXTERNAL style sheets
Basic CSS Spring 2009

13. Link to a separate CSS page
External
<html>
<head>
<title>My Wonderful Example</title>
<link rel=“stylesheet”
href=
type=“text/css”>
</head>
<body></body>
</html>
Link to a separate CSS page
The style sheet is stated within the head section of an html page.
All of the text within the BODY of this particular page would have text that was the font-family trebuchet, verdana and aligned left.
This would override any EXTERNAL style sheets
Basic CSS Spring 2009

14. Adding Style to Your Page
Exercise
Adding Style to Your Page

15. CSS Example Basic CSS Spring 2009 From the CSS Examples handout:
This is an example of a page that is styled with CSS
Font, background colors, orientation/layout, etc
Basic CSS Spring 2009

16. Content Basic CSS Spring 2009 Library Student’s ePortfolio
HOME COURSES RESUME PROJECTS PERSONAL
Library H. Student
Welcome to my site. I am currently pursuing a MLISc at the University of Hawaii. Please explore this site, and take a look at resume, projects, and courses I have taken so far.
Contact:
1000 Aloha lane
Honolulu, HI 99999
[This page will expand as content is filled in]
[Feel free to change the colors and content of any of these pages by using the CSS page associated with these files]
[This set of templates is:
index.html – the Home page
courses.html
resume.html
projects.html
personal.html
eprtfolio.css – the style sheet for all of the pages
[Don’t forget to update the links in the HTML if you change the names of any of the files!]
Copyright © Library Student 2009
This page last updated: 2/14/2009
This is the content with no formatting.
Page 2 of the handout is the CSS style – this is entered into the HEAD portion of your web page.
Basic CSS Spring 2009

17. Suggestions for practice
Think about the design of your page
Colors
Content
Images or graphics
Look at other web sites for ideas
These sessions will be much more useful to you if you practice and review between now and next week.
Look at sites that you like – note the links have some ideas. And if possible, find a picture and bring it with you.
Basic CSS Spring 2009