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 e-mail 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

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

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

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

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

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

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

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

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

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

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

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

Link to a separate CSS page External <html> <head> <title>My Wonderful Example</title> <link rel=“stylesheet” href=http://2.hawaii.edu/~myway.css 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

Adding Style to Your Page Exercise Adding Style to Your Page

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

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 libstudent@hawaii.edu [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

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