css introduction

INTRO TO CSS IAT100 Spring 2010 Diliara Nasirova

1

OUTLINE

¢  Covered in this lesson: �  Overview

¢ What is CSS? ¢ Why to use CSS?

�  Structure ¢  CSS Syntax Introduction ¢  Three places CSS can be de=ined ¢  CSS Syntax Speci=ics ¢  Cascading Inheritance

�  Applied ¢  CSS Hands-‐on

2

WHAT IS CSS?

¢  Cascading Style Sheets (CSS) de=ines the way website content is presented.

Visit http://www.csszengarden.com

3

WHERE THE DEFINITION “CASCADING” COMES FROM?

4


*detailed info later

5


*detailed info later 6

WHY CSS?

¢  Separate Content from Form

<font size=“14px”> My First Header </font> <font size=“12px” color=“red” face=“Verdana”> My information 1 goes here. </font> <font size=“14px”> My Second Header </font> <font size=“12px” color=“red” face=“Verdana”> Different information goes here. </font>

The old way:

7

WHY CSS? CONTINUED.

¢  Separate Content from Form �  Content

�  Form or Style

<p class=“header”>My First Header</p> <p class=“info”>My Information 1 goes here</p> <p class=“header”>My Second Header</p> <p class=“info”>Different Information goes here</p> (Speci=ic markup properties like Class will be discussed later).

.header { font-‐size:14px;}

.info { font-‐family: verdana; font-‐color: blue; font-‐size: 12px; } 8

WHAT DOES THIS SEPARATION GET US?

9


10


11

THREE CSS DEFINITION LOCATIONS ¢  Inline: the “style” attribute

¢  Internal: the <style> markup tag

¢  External: the .css stylesheet =ile

<p> Content </p> <p style=“font-‐color:red; font-‐size:10px;”> Content </p>

<html> <head> <style> p { background-‐color: Red;

font-‐family: serif; font-‐color: White; }

</style> </head> <body><p>Content</p></body> </html>

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" /> 12

CASCADING

13

CSS SYNTAX

¢  3 Elements to a CSS Statement �  Selector

¢ What HTML sections does it affect? �  Property

¢ What attribute of that HTML section will be affected? �  Value

¢ What change will be made to that attribute?

14

CSS SYNTAX

¢ Applying a style to Multiple selectors -‐ separate the selectors with a comma (,)

¢ Applying Multiple properties -‐ split each declaration with a semi-‐colon (;)

h1 { color:red; font-‐family:calibri}

h1, h2, h3, h4, h5, h6 { color: red }

15

CSS SYNTAX: SELECTORS

¢ Think of …

�  Web Page as a university

�  Selectors can be tags, classes, IDs. Then: ¢ Tags as students ¢ Class as student’s major ¢  ID as student’s ID number

16

CSS SYNTAX: SELECTORS

¢ Tag Selector

¢  Class Selector– precede the class with a dot(.)

¢  ID selector precedes with a "#" symbol

CSS: .myinfo { font-‐size: 10px; font-‐color: White; }

HTML: <p class=“myinfo” > Content</p>

<div class=“myinfo”> Other content</div>

CSS: #container{ font-‐size: 10px; font-‐color: White; }

HTML: <div id=“container”> This is one section </div>

CSS: p {font-‐size: 10px;} HTML: <p>Content</p>

17

EXTRA HTML TAGS: DIVISION AND SPAN

¢  Extra Tags: Div and Span de=ine sections in a HTML =ile ¢ Div tag is a style element for multiple lines

¢  Span tag is a style element for one line (inline).

¢  You can apply CSS to Div through ID/Class Selector;

<div id = “container”> <h1> Content goes here </h1> <p> Content goes here </p> </div>

<p> Content <span class=“myinfo”> goes here <span> </p>

18

CASCADING INHERITANCE

19

CSS APPLIED

¢ Hands-‐on CSS Tutorial ¢ Techbyte: http://www.sfu.ca/~tutor/cgi-‐bin/techbytes/Dreamweaver/dw2.html

20

PRESENTATION NOTES

¢  Page 3:

�  Originally HTML was used to change the appearance of websites, so that HTML documents eventually turned into a mixture of content and presentaRon. This problem was solved by W3C (World Wide Web ConsorRum) that created CSS, level 1 in 1996. It was quickly adopted by all main web browsers. In 1998 W3C developed a more sophisRcated and accurate CSS2 followed by a minor CSS2.1 update and CSS3 is currently under development. CSS is usually stored in separate .css style sheets which can be re-‐used for all your web pages.

�  Cascading Style Sheets (CSS) is a language that works with HTML documents for adding visual style to web sites, in other words for defining the way content is presented. It deals with colors, fonts, background images, posiRons, width, height, visibility and many other things.

¢  Page 7:

�  Content is the text and images, marked up to define regions of specific types �  Form defines the “style” for the content

21

PRESENTATION NOTES

¢  Page 9:

�  Separate Content from Form ¢  Specify the style once for every instance of that class.

¢  Example: Specify the font once for all text on the HTML page that you have idenRfied as a “header”.

¢  The style sheet can be a separate file which all HTML pages on your enRre site can link to. ¢  Only have to specify the style once for your ENTIRE SITE

¢  Can change the style for your enRre site by ediRng only ONE FILE.

¢  Page 12:

�  Note, the selector for inline CSS is the tag which contains the style aaribute.

22

RESOURCES:

¢ Notes: www.tagbytag.org/tutorials/css-‐beginner/what-‐is-‐css

¢  Pictures: www.wise-‐women.org/tutorials/csstut/

23

css introduction

Technology