Presentation is loading. Please wait.

Presentation is loading. Please wait.

DHTML AND JAVASCRIPT Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H E F.

Published byAntonia Mitchell Modified over 9 years ago

Similar presentations

Presentation on theme: "DHTML AND JAVASCRIPT Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H E F."— Presentation transcript:

1 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H E F

2 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-2 Cascading Style Sheet, CSS A set of rules that determine how the styles are applied to the HTML tags in your documents.

3 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-3 Three Types Of Style Sheets  Embedded  Inline  Link

4 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-4 Embedded Style The style properties are included (within the tags) at the top of the HTML document. A style assigned to a particular tag applies to all those tags in this type of document.

5 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Embedded Style Write the Style here. Here are some texts, those are applied by style. Example: Embedded Style

6 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-6 Inline Style The style properties are included throughout the HTML page. Each HTML tag receives its own style attributes as they occur in the page. The style properties are added to the HTML tag as the tag is entered.

7 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-7 It is fine for documents in which you need to apply styles to only one or two elements, but you wouldn't want to do all that work when you have a lot of styles to add. When You Should Apply Inline Style

8 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-8 The style properties are stored in a separate file. That file can be linked to any HTML document using a tag placed within the tags. Link Style

9 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-9 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> Link Style Here are some texts, those are applied by style. Linked style sheets hold all the style properties in a separate file. Example: Link Style

10 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-10 Cascading Precedence 1)Inline styles, which appear as attributes within the tag itself, are most important. 2) Embedded styles, which appear at the top of the HTML file, are applied next. 3)Linked styles, which appear in another file altogether, are applied last. Web browsers give precedence to the style that appears closest to the tag.

11 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-11 Working With Fonts  font-family  font-size  font-variant  font-weight  short hand property- font

12 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-12 Font-family Property A font family is simply a collection of fonts. Use this property to assign a list of specific and generic font families to any HTML block or element. Supply a list of specific fonts, separated from one another by commas, and end the list with a generic font that is to be used if none of the specific fonts are available Example: font-family: Helvetica, Arial, sans-serif; If the name of a font family that you want to specify contains embedded spaces, you will need to enclose that family name in quotation marks Example: font-family: “New Century Schoolbook”, Baskerville, serif;

13 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-13 Font-size Property  Absolute Font Size  Relative Font Size

14 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-14 Absolute Font Size  xx-small  x-small  small  medium  large  x-large  xx-large. Define absolute font sizes is to specify a length value in units. By using pixels to set font size, the visitors will be unable to resize the font using the browser setting in Internet Explorer.

15 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-15 Relative Font Size It can be defined in three ways:  using the constants larger and smaller  using the relative measurement of ems  using a percentage value

16 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-16 What is the base measurement? In the case of text that is contained directly in the body of a document, the base measurement is the browser’s default font size. Example: The default setting for text in a browser is 12 points A font-size setting of 1.5em Produces 18 point type For text inside other elements, the base measurement used by relative font sizing is the font-size of the element’s parent container, rather than the size of the element’s default font, as you may have expected.

17 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-17 Font-style Property The font-style property determines whether the text inside an element is rendered in an italic, oblique, or roman (or normal) font style.

18 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-18 font-variant property The font- variant property has only one effect: it determines whether text should be displayed in small- caps format. The only other value this property can take is normal.

19 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-19 font-weight property Here weight refers to the boldness of the characters. The font-weight property can take two types of values: relative and absolutes. Relative values are bolder or lighter. Absolute values range from 100 (lightest) to 900 (boldest) in 100 units increment, and also include the shortcut names normal (= 400) and bold (=700).

20 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-20 Shorthand property : font This short hand property allows you to set multiple font- related properties in one CSS declaration, separating the values by spaces from one another and using commas in multiple-value situations.

21 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-21 Color Use style sheet rules to control the colour of any HTML element that can be displayed in colour.

22 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-22 Elements That Can Be Displayed In Colour  Text  Headings  Page Backgrounds  Background Colour Of Text  Background Colour Of Headings  Borders  Links  Outlines

23 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-23 Methods To Specify Colour Descriptive colour names System colour names RGB decimal values RGB hexadecimal values RGB percentage values color: blue; color: rgb(0, 0, 255); color: #0000ff; color: #00f; color: rgb(0%, 0%, 100%);

24 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-24 The Selection Of Colours It becomes an important issue primarily in two situations:  when you have adjacent objects with coloured backgrounds and you want to avoid a clash  when you have coloured text on coloured backgrounds and you want to ensure readability

25 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-25 Important If you set a foreground colour, always set a background colour, and vice versa.

26 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-26 Colouring Alternative Rows in Data Tables......odd { background-color: lightgrey; }.even{background-color: yellow;}.......... This is 1,1 This is 1,2 This is 1,3

27 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-27 Background Images body { background-color: white; color: black; background-image: url(“money.jpg”); }

28 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-28 It will appear underneath other content. Background Image You should specify an appropriate background colour. This colour will display while the image is loading, and will appear for site users who have disabled images in their browsers. If you define a graphic as the background for a page, that graphic will repeat, or tile, itself to fill up the entire browser viewport. As you scroll through the document, the image will also scroll along. This is the normal behaviour of backgrounds.

29 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-29 Background Image Normal Behaviour As you scroll through the document, the image will also scroll along.

30 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-30 Tiling And Scrolling Characteristics Use CSS to change both the tiling and scrolling characteristics of images.

31 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-31 Fixed Background Image Position You can instruct the background graphic to remain in place while other objects that are placed on top of it, including text, effectively scroll over it.

32 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-32 background-repeat: no-repeat  stops the background image from tiling.  only one instance of the image will appear in the background. repeat  is the default value repeat-x and repeat-y  repeat the image horizontally and vertically respectively.

33 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-33 background-attachment: Controls whether or not the background image scrolls with the content. By default, it is set to scroll It can also be set to fix, background-attachment: fixed;.

34 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-34 background-position: The background-position: (1 st value)(2 nd value)  The first value controls the horizontal position and can be left, center, or right  The second value controls the vertical position, which can be top, center, or bottom. The default value is left top. You can use percentage, instead of these keywords, for either value. Example: background-position:right bottom background-position: 80% 80%

35 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-35 How Inheritance Works In CSS

36 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-36 Parts Of CSS Style Rule  a selector, which defines the type(s) of HTML element(s) to which the style rule applies  a series of declarations, consisting of properties and values, those define the style

37 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-37 Selector  Universal Selector  Element Type Selector  Class Selector  ID Selector  Pseudo-element Selector  Pseudo-class Selector  Descendant Selector  Parent-child Selector  Adjacent Selector  Attribute Selectors

38 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-38 Universal Selector It matches every element in the document. Example: *{color: red;} All elements in the page are given a text colour of red.

39 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-39 Element Type Selector It is the most common selector. It specifies one HTML element type with no qualifiers. In the absence of other style rules that might apply to the element type provided in the selector, this rule applies to all such elements on the page. Example: a{color: white; background-color: green; } All hyperlinks in the document will appear as white text on a green background.

40 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-40 Class Selector To apply a style rule to a potential arbitrary group of elements in a web page  Define a class in the style sheet  Identify the HTML elements that belong to the class using the class attribute  Must precede the class name with a period.  No space is permitted between the period and the name of the class.

41 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-41 Example:.special{font-family: Verdana, Helvetica, Arial, sans-serif;} A Special Heading This is a special paragraph. Example: p.special {font-family: Verdana, Helvetica, Arial, sans-serif;} Create the same special class, but this time it applies only to paragraph elements. Class Selector: Example

42 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-42 ID Selector Used to target a single HTML element within a page. Must be defined in the style sheet and included explicitly in the HTML tag. Use the # symbol to identify an ID selector in the style sheet, and the id attribute to give an element an ID.  IDs must be unique within a document.  No two HTML elements in a single document should have the same id.

43 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-43 ID Selector: Example Example: #unique {font-size: 70%;} This will be a very tiny headline.

44 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-44 Pseudo-element And Pseudo-class They are supported by some older browsers Their implementations are not complete. They are unique among the CSS selectors in that they have no equivalent HTML tag or attribute

45 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-45 Pseudo-element Selector Example: p:first-letter{font-face: serif; font-size:500%; float: left; color: gray;} A drop-caps effect for the first letter : The first letter in each paragraph will be five times larger than the usual type used in paragraphs. CSS specification has defined only three pseudo- elements: first-letter, first-line and first-child. To define a pseudo-element for a style rule, precede the pseudo-element name with a colon.

46 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-46 Pseudo-class Selector A pseudo-class selector applies to a whole element, but only under certain condition. The pseudo-class selector comes into play only when the user interacts with the affected element. CSS2 defines hover, active, focus, link, visited and lang.

47 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-47 Descendant Selector All HTML elements (except the html element) are descendants of at least one other HTML element. A descendant selector restricts the applicability of the rule of elements that are descendants of other elements. The scope of the descendant selector is determined by reading the rule from right to left. Spaces separate the element types. The descendant relationship need not be an immediate parent- child connection. Example: li em{color: green;} It will be applied to any text contained in an em, or emphasis, element only when the emphasized text is a descendant of a list item.

48 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-48 Parent-child Selector To apply to element patterns that match a specific sequence of parent and child elements. It is a special case of the descendant selector. It must be related directly to one another in a strict inheritance sequence.

49 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-49 Adjacent Selector Adjacency is not related to inheritance. Adjacency refers to the sequence in which elements appear in an HTML document. Adjacent elements are always siblings, but it is their placement in the document, rather than their inheritance relationship. The adjacent selector uses the +sign as its connector.

50 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-50 Adjacent Selector: Example h1 + h2 {margin-top: 11px;} Put 11 extra pixels of space between the bottom of an h1 heading and an h2 heading that followed immediately.

51 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-51 Attribute Selector It declares that the rule with which it is associated is applied only to elements that have a specific attribute defined, or have that attribute defined with specific value.

52 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-52 Attribute Selector There are four levels of attribute matching: [attribute] matches if the attribute attribute is defined at all for the element(s) [attribute=”value”]matches only if attribute has a value of value [attribute~=”value”] matches only if the attribute is defined with a space- separated list of values, one of which exactly matches value. [attribute|=”value”] matches only if the attribute is defined with a hyphen- separated list of “words” and the first of these words begins with value.

53 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-53 Measurements There are two types of measurements.  Absolute  Relative

54 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-54 Absolute Measurement It tells the browser to render the affected content.

55 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-55 Relative Measurement It instructs the browser to scale a value by some percentage or multiple, relative to the size of the object before the scaling take place.  Units are em and percentage.  Both the em and the percentage generate font sizes based on the inherited or default size of the font for the object to which they are applied.  ems and percentages are 1:100 in equivalent.

56 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-56 Relative Measurement [an optional sign] [a number] [a unit of measurement] [(+ or -)] [(integer or decimal point)] [(em or %)] No spaces are permitted between the number and the unit of measurement.

57 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-57 Layout

58 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-58 The display property It determines how a browser displays an element, whether it treats it as a block, an inline text fragment, or something else.

59 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-59 Six Possible Values For The Display Property  block  inline  list-item  None  table-footer-group  table header-group The default value varies from element to element.

60 DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 4-60 The Box Model

Download ppt "DHTML AND JAVASCRIPT Genetic Computer School 2008 4-1 LESSON 4 CASCADING STYLE SHEET G H E F."

Similar presentations

HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.

HIGH LEVEL OVERVIEW: CSS CSS SYNTAX CONSISTS OF A SET OF RULES THAT HAVE 3 PARTS: A SELECTOR, A PROPERTY, AND A VALUE. IT’S NOT NECESSARY TO REMEMBER THIS.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Cascading Style Sheets

Cascading Style Sheets
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.

Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.

© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
กระบวนวิชา 25 3208 CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.

© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.
Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.

Stylin’ with CSS. 2 Topics What is CSS? Why CSS? CSS Examples.
Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.

Tutorial 3 Introducing Cascading Style Sheets. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Learn about Cascading Style Sheets Write.
CS4370/6370 Web Development Cascading Style Sheets (CSS)

CS4370/6370 Web Development Cascading Style Sheets (CSS)
Web Design & Development Cascading Style Sheets (CSS)

Web Design & Development Cascading Style Sheets (CSS)
Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.

Cascading Style Sheets Scripting with Style. CSS versus HTML  Ways to format in HTML –HTML Tag extensions –Converting Text to images –Page Layout with.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang

Cascading Style Sheet (CSS) Instructor: Dr. Fang (Daisy) Tang
Cascading style sheets - CSS

Cascading style sheets - CSS
Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54

Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.

3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.

Similar presentations

Ads by Google