Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 CSS – Cascading Style Sheets. 2 CSS - intro Introduced in late 1996 Provides a way to separate presentation from structure HTML  Originally not intended.

Similar presentations

Presentation on theme: "1 CSS – Cascading Style Sheets. 2 CSS - intro Introduced in late 1996 Provides a way to separate presentation from structure HTML  Originally not intended."— Presentation transcript:

1 1 CSS – Cascading Style Sheets

2 2 CSS - intro Introduced in late 1996 Provides a way to separate presentation from structure HTML  Originally not intended to deliver graphic content and multimedia  Designed to allow authors to define structure of document CSS  Allows greater control of Web page design  Works with existing HTML and XHTML tags to tell them how to behave

3 3 CSS – intro con’t Initially not well supported Now recommended by W3C – many design related HTML tags were slated to be made obsolete in favor of CSS (these tags are said to be deprecated) There exist other types of style sheets:  JavaScript Style Sheets  XSL – Extensible Style Sheets CSS is primary one used on the Web

4 4 CSS - what it can do Text formatting and colors:  Choose specific fonts and font sizes  Set bolds, italics, underlines, text shadows  Change text color and background color  Change link colors or remove underlining  Indent text, center text  Transform sections of text to upper-, lower-, or mixed case  Other special effects

5 5 CSS – what it can do Graphical appearance and layout  Set a background graphic and control its location, tiling, and scrolling  Draw borders and outlines around sections of a page  Set vertical and horizontal margins on all elements as well as margins for the page itself  Flow text around images as well as other text  Redefine how HTML tables and lists are presented

6 6 CSS – what it can do Dynamic actions  Mouseover effects on links  Dynamically inserted content before or after HTML tags  Automatic numbering of page elements Example: (without formatting) (with formatting) Style sheet:

7 7 CSS - definitions Style sheet File consisting of a number of CSS rules Cascade How style preferences are combined together when they appear to conflict Rule Defines what the HTML should look like and how it should behave in the window Example: All tags should be presented with a green background and blue text

8 8 CSS – parts of a CSS rule selector {property: value;} Example: p {color: blue;} selector – 3 types of CSS selectors: 1) XHTML selector – indicates a specific mark-up element like or 2) Class selector – can be applied to any XHTML tag as you wish; eg. 3) ID selector – like class selectors, but usually applied once on the page to a particular XHTML tag for use with a JavaScript function; eg. declaration – {property: value;}  property – attribute to be defined  value – defines property

9 9 CSS – where to put the rules In an external document:  These are called external or linked  Used to affect a complete Web presentation  Style changes only need to be made in one place, rather than in each individual document  Produces a presentation with a consistent look and feel  Create separate file with.css extension Use basic text editor like Notepad or Wordpad (Windows environment), SimpleText or TextEdit (Mac environment), or pico (UNIX environment) OR Use style sheet editor or some XHTML editors include support for CSS File needs to be located within public_html Good idea to place all style sheets in sub-directory of public_html called either CSS or STYLES Change permissions on.css file to be world readable; change permissions on style sheet sub-directory to be world executable

10 10 CSS – where to put rules (con’t)  Example: Basic style sheet: /* mystyles.css */ /* created for CS403-10 */ body { font-family: Arial; color: black; background-color: red; } h1 { color: green; } Linking the style sheet to XHTML page:...

11 11 CSS – where to put the rules (con’t) In the head of the XHTML document:  These are called embedded or internal  Rules are in the same file as HTML so editing is easier at first – good for development purposes (plan to migrate rules to separate files later)  Good for for rules that apply only to a specific page (this helps keep size of global style sheet relatively small)  Use the tag in the head of the document  Example:... <! - - h2 { color: red; } address { font-family: Verdana, sans-serif; font-size: smaller; } - ->

12 12 CSS – where to put the rules (con’t) In an XHTML tag:  These are called inline  Inline CSS is very similar to using XHTML presentation attributes – it only affects that single instance of the element  Easier to add to your page as you go along; harder to maintain since they are scattered throughout your source code  Style attribute can be set on nearly any XHTML tag that is displayed by the browser  Use when you want to over-ride embedded or linked style sheets  Does not contain selector – tag itself serves as selector  Example:

13 13 CSS – composing rules Combining rules If rules share same selector you can combine them: p { color: blue; } p { font-size: large; } can be combined as: p { color: blue; font-size: large; } or: p { color: blue; font-size: large; }

14 14 CSS – composing rules Combining rules If rules share same declaration, you can combine them: p { color: blue; } address { color: blue; } can be combined as: p, address { color: blue; }

15 15 CSS – representing colors in CSS Straightforward hex notation: body { color: #CC66FF; } Short hex: body { color: #C6F; } rgb function:  Provide a decimal triplet of rgb numbers (0 – 255) separated by commas: body { color: rgb(204,102,255); } OR  Provide percentages: body { color rgb(80%, 40%, 100%); }

16 16 CSS – representing colors in CSS (con’t) Color names – there are 16 color names supported by browsers: aquanavy blackolive bluepurple fuchsiared graysilver greenteal limewhite maroonyellow

17 17 CSS – classes and ids In addition to setting styles based on HTML elements, you can also have rules based on 2 optional HTML attributes: class and id Class  Used to define a related group of HTML elements on a page  Elements within a class can be of any type  To create it, just name it:...  Once you have defined a class in your HTML you can use it as a class selector in CSS; class selectors are indicated by a. before the {color: blue; }  You can combine an element selector with a class selector; then only those elements that are members of the class are selected: { font-family: Arial; }

18 18 CSS – classes and ids (con’t) id  Similar to the class attribute but more restricted  Must be unique – only one tag on a page can have a given id  Id’s attribute value must begin with a letter:  Example: Next Page In CSS rule: #next { font-size: large }

19 19 CSS – using class selectors Combine class selectors with tags to designate specific sections of a page that should receive special styling:... Great Places to Eat in Portsmouth...... © Ellen Hepp, 2004....

20 20 CSS – using class selectors - and (con’t) tag  Divides your document into separate, distinct, sections  Can be used strictly as organizational tool without formatting but becomes more effective if you add class attribute to label the division tag  Delimits a portion of xhtml content  Allows you to change a portion of text  Browsers treat span as another physical (content-based) style tag but default is to leave it alone  E.g., Hello! (O’Reilly)

21 21 CSS – using class selectors (con’t) In CSS file: /* Top Heading of Page /*.headofpage { color: white; background-color: maroon; font-family: Verdana, sans-serif; } /* Bottom of Page */.footofpage { color: green; background-color: white; font-family: “Times New Roman”, serif; }

22 22 CSS – pseudo-classes and elements Pseudo-class selector is based on a set of predefined qualities that an HTML element can have: :active :hover :link :visited Can stand alone but is usually used with a type selector a:link {color: red; }

23 23 CSS – pseudo-classes and elements (con’t) Example: Typical body tag in HTML To accomplish same thing using CSS (XHTML) body { background-color: #FFFFCC; background-image: url(mybg.jpg); color: #000066; } a:link { color: #FF0000; } a:visited { color: #999999; } a:active { color: #FFCC99; }

24 24 CSS – simple CSS properties for text formatting Color – sets the foreground color of the element: h1 {color: blue; } Background-color – sets the background color body { background-color: purple; } Font-size – (easy method – think tee-shirt sizes) give value relative to the user’s default text size  Default text size has value of “normal”  Larger sizes go up in increments of about 20% xx-small * x-small * small * normal * large * x-large * xx-large  Can use relative values larger and smaller  Examples: dl { font-size: larger; } em { font-size: xx-large; }

25 25 CSS - simple CSS properties for text formatting Font-family – can specify specific font (Arial) and/or generic font family (sans-serif) If a font is specified that is not installed on user’s machine, browser will use default font if other options are not listed Examples: body {font-family: Arial, sans-serif; } h1 { font-family: “Courier New”, monospace; } h2 { font-family: “Times New Roman”, serif; } 5 generic font families in CSS are: serif * sans-serif * cursive * fantasy * monospace

26 26 CSS - simple CSS properties for text formatting Other font properties:  font-weight (makes text bolder or lighter) Specify values 100 to 900 (normal is 400) in increments of 100 Specify bold (700), bolder (+100), lighter (-100)  font-variant (creates “small caps” effect) Specify normal, small-caps  font-style (creates italic or slanted effect) Specify italic, normal, oblique  line-height (sets the height of the line but not text size) Specify normal, measurement, multiplier, percentage

27 27 CSS - simple CSS properties for text formatting font shorthand property  Shorthand property has 2 effects: sets properties to default values and assigns specified values to designated properties  Shorthand for: font-family, font-size, font-weight, font- variant, font-style, and line-height  Format: selector { font: style variant weight size family } note: values for weight, size, and family must be in that order!  Example: body { font: oblique small-caps small Verdana }

28 28 CSS - simple CSS properties for text formatting Special text effects: selector { text-decoration: blink line-through overline underline none } Removing underlines on hyperlinks: a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; }

29 29 CSS – backgrounds and background colors background-color property:  Similar to bgcolor attribute in html  Gives you more flexibility than bgcolor because it lets you change the background for specific parts of the page  Values the background-color can take: Color names, rgb codes, triplets of numbers, or triplets of percentages transparent (default) – whatever background already exists will be shown inherit – setting a value equal to that of the containing block’s value

30 30 CSS – backgrounds and background colors (con’t) background-image property  Similar to background attribute in tag  Values for the background-image property: Image address url  url will be calculated relative to wherever the rule appears  Example: Selector { background-image: url(bg.gif); } Or Selector { background-image: url(‘bg.gif’); } Or Selector { background-image: url(“bg.gif”); }

31 31 CSS – backgrounds and background colors (con’t) background-repeat property  Specifies whether or not the background image tiles across the screen  Values for the background-repeat property: repeat (default) repeat-x repeat-y no-repeat inherit

32 32 CSS – backgrounds and background colors (con’t) background-position property Use to change the location of the initial image Consists of two size values or percentages (one for horizontal and one for vertical) OR if only one value is given, it sets the horizontal position Values:  A number and a unit (10px or 2em) In CSS 1em is defined as the total height of the current font in use px stands for pixel  A percentage (50% 75%)  Word values: top, bottom, left, right, center

33 33 CSS – backgrounds and background colors (con’t) background-attachment property  Images normally scroll with rest of the page but you can modify so that image does not move  Values: scroll (default) fixed – image does not move relative to the original position of the page inherit – value does not inherit from containing block unless value is explicitly set to inherit

34 34 CSS – backgrounds and background colors (con’t) background shorthand property  Allows you to set several properties at once  List the values you want (in any order) as the value for background (values you do not set will be set to their default values)  Example: body { color: white; background: url(“bg.gif”) repeat-y fixed top left red; }

35 35 CSS – alignment and spacing text-align property – defines the way in which text lines up with the left or right margins Values:  center (centers the content)  justify (justifies text on both sides)  left (aligns content on the left)  right (aligns content on the right) Example: h1 { font-family: Verdana, sans-serif; text-align: center; }

36 36 CSS – alignment and spacing (con’t) text-indent property - indents the first line of an element by adding blank space (usually seen with tags) Example: p {text-indent: 3em } Values:  measurement (eg., 5em or 15px)  negative measurement (sets a hanging indent)  Percentage (value based on size of containing box)

37 37 CSS – alignment and spacing (con’t) vertical-align property – most useful for creating superscripts or subscripts Used only for inline elements OR table cells Values: baseline, bottom, middle, sub, super, text- top, text-bottom, top, or some measurement (+ or -) or percentage (+ or -) Example:.power { vertical-align: super; font-size: smaller; } Use in html by setting class attribute: x 2 = 64

38 38 CSS – alignment and spacing (con’t) white-space property – allows control of whitespace condensation and word wrapping Values:  normal (normal word wrapping and whitespace condensation)  nowrap (condenses whitespace but does not wrap lines)  pre (wraps lines as in the source) Example:.poem { white-space: pre; } Use in html by setting class attribute:...

39 39 CSS – how cascading works Cascade determines what rules apply: mystyles.css: body { background-color: white; color: black; } h1 { background-color: blue;} XHTML document: ….myclass { background-color: red; } h1 { color: yellow; } Hello World ! See result at:

Download ppt "1 CSS – Cascading Style Sheets. 2 CSS - intro Introduced in late 1996 Provides a way to separate presentation from structure HTML  Originally not intended."

Similar presentations

Ads by Google