Css 1. -_introduction_2010-11_


Published on

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Css 1. -_introduction_2010-11_

  1. 1. 1.1 Cascading Style Sheets (CSS) - 1.1 Cascading Style Sheets (CSS) - What is CSS? Overview: • As originally envisaged, XHTML (and HTML before it)• It is a style sheet language that is used to add styles (e.g. was to be used as a language to specify the structure of fonts, colors, …). a document - style of the elements was to be kept separate. However, as HTML grew different browsers• It is also used (in conjunction with XHTML Divs) to began implementing elements that allowed users to control the layout of web pages. control the style of the document such as <font>, thus permitting the user to specify font color, size, and face of the content on the page – going against the specified purpose of HTML, which is why such elements have been deprecated from the strict definition of XHTML – they are present in the Transitional version to allow time for people to get used to implementing style through the preferred method – Cascading Style Sheets. IS 1103 Sect. WWW 1 IS 1103 Sect. WWW 2 Development - CSS Development - CSS 1.1 Cascading Style Sheets (CSS) - 1.1 Cascading Style Sheets (CSS) Overview: – Key Points• One of the greatest challenges for XHTML developers today is to separate how a document is presented (i.e. its format or style) from its actual content. • CSS stands for Cascading Style Sheets• This separation of style from content is the holy grail • Styles define how to display HTML elements of web development. • Styles are normally stored in Style Sheets• Consider the following: often a DTP pgm, rather than a • Styles were added to HTML 4.0 to solve a problem word processor is used to “style” documents yet a word • External Style Sheets can save you a lot of work processor will have been used to originally create the • External Style Sheets are stored in .css files content. • Multiple style definitions will cascade into one IS 1103 Sect. WWW 3 IS 1103 Sect. WWW 4 Development - CSS Development - CSS1.1 Cascading Style Sheets (CSS) – Solved 1.1 CSS Can Save a Lot of Work a Common Problem • Styles are normally saved in files external to your• HTML tags were originally designed to define the content XHTML documents. External style sheets enable you to of a document. They were supposed to say "This is a change the appearance and layout of all the pages in header", "This is a paragraph", by using tags like <h1>, <p>. your Web, just by editing a single CSS document. If The layout of the document was supposed to be taken you have ever tried to change the font or color of all the care of by the browser, without using any formatting headings in all your Web pages, you will understand the tags. benefit of CSS to web site maintenance.• As the major browsers - Netscape and IE - continued to • CSS is a breakthrough in Web design because it allows add new HTML tags (like the <font> tag and the color developers to control the style and layout of multiple attribute) to the original HTML specification, it became Web pages all at once. As a Web developer you can more difficult to ensure the content of HTML define a style for each XHTML element and apply it to as documents was clearly separated from the documents many Web pages as you want. To make a global change, presentation (style) layout. simply change the style, and all elements in the Web site are updated automatically.• To solve this problem, theSect. WWW standard setting IS 1103 W3C, 5 IS 1103 Sect. WWW 6 consortium - createdDevelopment - addition to HTML 4.0. CSS in CSS Development - CSS 1
  2. 2. 1.2 CSS Syntax - 3 parts 1.2 CSS Syntax - 3 parts• CSS syntax is made up of 3 parts selector, property & value. • CSS generalised syntax• CSS is syntax is much like that of XHTML. Lets compare them. selector { property: value } XHTML 1 2 3• EXAMPLE body {color: black} <font size="2"> 1 2 3 • The selector is the XHTML element/tag you wish to CSS CSS define, the property is the attribute you wish to change, and each property has an associated value. The property and value are separated by a colon : and body {font-size:16px;} surrounded by curly braces { … }• As you can see above, the XHTML Element is equivalent to the CSS Selector, the XHTML Attribute is equivalent to the CSS EXAMPLE p {font-family: "sans serif"} 1 2 3 Property and the Values mean the same in both XHTML & CSS. • If the value consists of multiple words, put quotes IS 1103 Sect. WWW 7 around the value: IS 1103 Sect. WWW 8 Development - CSS Development - CSS 1.2 CSS Syntax - Explained 1.2 CSS categories of selectors• An example of a CSS declaration is as follows body {color: black}• The CSS selector is the XHTML element or tag that you want to (1) UNIVERSAL selector apply CSS styles to. In other words, it tells the web browser what to apply styles to. • The universal selector symbol is an asterisk *. It tells• The selector is followed by a set of opening and closing curly the web browser to apply the CSS rules that are brackets { and } and everything within the curly brackets is called a specified to ALL XHTML elements in the document. declaration block. The universal selector applies to everything, including• Within a declaration block there are CSS property and value(s) pairs. These property and value(s) pairs are called declarations. form input fields and tables. There can be as many declarations as you wish that can apply for • The code below would produce a web page with all of that particular selector(s) within a declaration block. the text within the web page rendered in red.• The property tells the web browser what attribute of the <head> selector to style and the value specifies how the attribute will <style type="text/css"> be formatted. The property and value are separated by a colon, if * { color:red; } the value is multiple words, place the value in quotes. </style>• If you want to specify more than one property, place a semicolon </head> between each pair. For example: <body>• p { color:red; font-size:20px; } <h1>This is a RED level 1 heading</h1>• However it is good practice to place a semicolon behind each value, <h2>This is a RED level 2 heading.</h2> whether or not there are1103 Sect. WWW multiple pairs specified. <p> This is a RED paragraph.</p> IS 9 </body> IS 1103 Sect. WWW 10 Development - CSS Development - CSS 1.2 CSS categories of selectors 1.2 CSS categories of selectors (2) TYPE selector• A type selector is the XHTML element or tag that you want the (2) TYPE selector web browser to apply CSS styles to. 1 2 3 <head> 2 3EXAMPLE p {text-align:center; color:red} <style type="text/css"> p { color:red; }• To specify more than one property, you must separate each </style> property (name value pair) with a semi-colon. The example above </head> shows how to define a center aligned paragraph, with a text color of red. <body> <h1>This is a level 1 heading</h1>• An improved & preferred code layout can be seen below: <h2>This is a level 2 heading.</h2> <p> This is a red paragraph.</p> 1 </body>EXAMPLE p { 2 3 text-align: center; 2 3 color: black; 3 2 font-family: arial } IS 1103 Sect. WWW 11 IS 1103 Sect. WWW 12 Development - CSS Development - CSS 2
  3. 3. 1.2 CSS categories of selectors 1.2 CSS categories of selectors (3) Group selector (4) Class selector • With the class selector you can define different styles • You can group selectors. Separate each selector with a for the same type of XHTML element. Say that you would comma. In the example below we have grouped the h1, like to have two types of paragraphs in your document: one h2 and h3 header elements. right-aligned paragraph, and one center-aligned paragraph. Here is how you can achieve this using styles: EXAMPLE (part A - declaration) <head> p.right {text-align: right} <style type="text/css"> p.center {text-align: center} h1, h2, h3 { color:red; } </style> </head> • You have to use the class attribute in your HTML <body> document: <h1> This is a RED level 1 heading. </h1> <h2> This is a REDlevel 2 heading. </h2> EXAMPLE (part B - implementation) <h3> This is a RED level 3 heading. </h3> <h4> This is a level 4 heading. </h4> <p class="right"> This paragraph will be right-aligned.</p> <h5> This is a level 5 heading. </h5> <p class="center"> This paragraph will be center-aligned. </p> <h6> This is a level 6 heading. </h6> </body> • Note: Only one class attribute can be specified per IS 1103 Sect. WWW 13 XHTML element! IS 1103 Sect. WWW 14 Development - CSS Development - CSS 1.2 CSS categories of selectors 1.2 CSS categories of selectors (4) Class selector (4) Class selector Example• You can also omit the XHTML tag name in the selector to define a style that will be used by ALL XHTML elements that have a certain class. In the example below, all HTML elements with class="center" will be center-aligned: <head> <style type="text/css">EXAMPLE (part A - declaration) .border { border: 1px solid black; } </style> .center {text-align: center} </head>• In the code below both the h1 element and the p element have class="center". This means that both elements will <body> follow the rule(s) in the ".center" selector: <h1> This is a heading. </h1> <h1 class="border"> This is a heading. </h1>EXAMPLE (part B - implementation) <p> This is a paragraph. </p> <h1 class="center"> This heading will be center-aligned </h1> <p class="border"> This is a paragraph. </p> <p class="center"> This paragraph will also be center-aligned. </p> </body> IS 1103 Sect. WWW 15 IS 1103 Sect. WWW 16 Development - CSS Development - CSS 1.2 CSS categories of selectors 1.2 CSS categories of selectors (5) id selector• Each ID selector is meant to be unique and to be referenced only (5) id selector & Divs Example once per XHTML document. <head> <style type="text/css">• In the declaration the # symbol precedes the ID name. #header { height:300px; border-bottom:1px solid black; }• The ID is included in the XHTML body section using the ID attribute #left-column { float:left; width:250px; } within the XHTML element that the web browser will apply the styles #right-column { float:right; } to. </style>• ID selector tends to be used in conjunction with XHTML Div </head> elements. <body>EXAMPLE (part A) <div id="header"> #greencol {color: green} <h1> YourWebsite </h1> The rule above will match both the h1 and the p elements below: </div> <!-- end id header -->EXAMPLE (part B) <p id="greencol">Some text</p>: <div id="left-column"> <h2> Left Column </h2> </div> <!-- end id left-column --> <div id="right-column"> IS 1103 Sect. WWW 17 <h2> Right Column </h2> WWW IS 1103 Sect. 18 Development - CSS </div> Development - <!-- end id right-column --> CSS </body> 3
  4. 4. 1.3 Cascading Style Sheets (CSS) – 1.3.1 CSS Inline Styles Ways of inserting a Style : – Example 1:• A style is simply a set of formatting instructions that can • An inline style loses many of the advantages of be applied to a document or an element within a document. external style sheets by mixing content with presentation. Use this method sparingly, such as when a• There are 3 mechanisms by which we can apply styles style is to be applied to a single occurrence of an element. to our XHTML documents: – INLINE – the style is defined within the actual XHTML tag • You define inline styles in the body section by using the itself within the body section. style attribute associated with the relevant tag. The style attribute can contain any CSS property. – INTERNAL/EMBEDDED – where styles are defined in the head section & applied to the whole document. – EXTERNAL – where the styles are defined in an external file and can be used in any document by referencing the stylesheet via a URL. IS 1103 Sect. WWW 19 IS 1103 Sect. WWW 20 Development - CSS Development - CSS 1.3.1 CSS Inline Styles 1.3.1 CSS Inline Styles – Example 1: – Example 1:• An inline style sheet …………. EXAMPLE (css0.html) <html> <head> <title> … </title> </head> <body> <p style="margin-left: 10%; border: ridge; background: #ffffcc“; > Simple Style – Inline CSS </p> </body> </html> IS 1103 Sect. WWW 21 IS 1103 Sect. WWW 22 Development - CSS Development - CSS 1.3.1 CSS Inline Styles 1.3.1 CSS Inline Styles – Example 2: – Example 2:• This example presents Inline Styles that declare an 1 <?xml version = "1.0"?> individual elements format using the attribute style by 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> applying inline styles to paragraph elements to alter their 4 5 <!-- Fig. 6.1: inline.html --> Inline.html font size & color. 6 <!-- Using inline styles --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml">• The 1st inline style decl. appears on L.20. Each CSS 9 10 <head> <title>Inline Styles</title> property is followed by a colon (:) and a value. 11 12 </head> The style attribute specifies the style for an eleme Some style properties are font-size and color.• The 2nd inline style decl. appears on L.24 and specifies two 13 <body> 14 properties, separated by a semi-colon (;) 15 <p>This text does not have any style applied to it.</p> 16 17 <!-- The style attribute allows you to declare -->• NB Inline styles override any other styles applied using 18 19 <!-- inline styles. Separate multiple styles <!-- with a semicolon. --> --> other techniques we will discuss later. 20 21 <p style = "font-size: 20pt">This text has the <em>font-size</em> style applied to it, making it 20pt. 22 </p> 23 24 <p style = "font-size: 20pt; color: #0000ff"> 25 This text has the <em>font-size</em> and 26 <em>color</em> styles applied to it, making it 27 20pt. and blue.</p> 28 IS 1103 Sect. WWW 23 IS 1103 Sect. WWW 24 29 </body> Development - CSS 30 </html> Development - CSS 4
  5. 5. 1.3.1 CSS Inline Styles 1.3.2 Internal (Embedded) Styles – Example 2: • In this section we will present a 2nd technique for using style sheets called embedded style sheets. • Embedded style sheets enable a web developer to embed the CSS style declaration in an XHTML document’s head section. IS 1103 Sect. WWW 25 IS 1103 Sect. WWW 26 Development - CSS Development - CSS 1.3.2 Internal (Embedded) Styles 1.3.2 Internal (Embedded) Styles – Example 1: – Example 1: EXAMPLE (css1.html) <html> <head>• An internal style sheet should be used when a single <title> … </title> document has a unique style. You define internal styles <style type="text/css"> in the head section by using the <style> tag, like this: h1{ color: red; border: thin groove; text-align: center; } </style> </head> <body> <h1> Simple Style – Internal/Embedded CSS </h1> </body> </html> IS 1103 Sect. WWW 27 IS 1103 Sect. WWW 28 Development - CSS Development - CSS 1.3.2 Internal (Embedded) Styles 1.3.2 Internal (Embedded) Styles – Example 1: – Example 2:• In the above example the style was declared in the • The style element L.13-24 defines the CSS. Styles placed in the head <head> section of the document. apply to matching elements in the entire document, not just to a• The declaration (h1) is the name of the element which is single element. • The type attribute specifies the Multipurpose Internet Mail to be changed & an associated definition which is Extension (MIME) type that describes a files content. CSS doc.s everything inside the braces. Within the braces the use the MIME type of text/css. attributes are placed in a name value pair list & separated • L.15-22 declares the CSS rules for the style sheet – the rules declared in this example are for elements by semi-colons. em (L.15-16) / h1 (L.18) / p (L.20)• Tip – place each attribute (name value pair) on a separate • When the browser renders this doc, it applies the properties defined in these rules to each element to which the rule applies. line for readability/maintenance. • For example the rule on lines 15-16 will be applied to all em• elements. The body of each rule is enclosed within curley braces ( {…} ) • We declare a style class named special in L.22. Class declarations are applied to elements only of that class. IS 1103 Sect. WWW 29 IS 1103 Sect. WWW 30 Development - CSS Development - CSS 5
  6. 6. 1.3.2 Internal (Embedded) Styles 1.3.2 Internal (Embedded) Styles – Example 2: – Example 2:• L.18 specifies the name of the font to use . In this case • The p element and the .special class style are applied to we use arial – if its not found on the client PC the browser the text in lines 42-49. All styles applied to an element will then display the 2nd choice (comma seperated list) i.e. (the parent or ancestor, element) also apply to that the second value supplied - sans-serif (a generic font elements nested elements (decendant elements). family) resulting in a member of this font family such as • The em element inherits the style from the p element helvetica or verdana being displayed. (namely, the 14pt font size in L.20), but retains its italic• L.30 uses attribute class in a h1 element to apply a style style. Importantly however this property overrides the class – in this case class special (declared as .special in color property of the special class because the em the style sheet). When the browser renders the h1 element has its own color property. Rules exist for element, notice that the text appears on screen with both resolving these conflicts. the properties of the h1 element (define in L.18) and also the properties of the .special style class applied (the color blue define on L.22) Sect. WWW IS 1103 31 IS 1103 Sect. WWW 32 Development - CSS Development - CSS 1.3.2 Internal (Embedded) Styles 1.3.2 Internal (Embedded) Styles – Example 2: – Example 2:1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 27 <body>3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 284 29 <!-- This class attribute applies the .blue style -->5 <!-- Fig. 6.2: declared.html --> Declared.html 30 <h1 class = "special">Deitel & Associates, Inc.</h1> 31 Declared.html6 <!-- Declaring a style sheet in the header section. -->7 32 <p>Deitel & Associates, Inc. is an internationally8 <html xmlns = "http://www.w3.org/1999/xhtml"> 33 recognized corporate training and publishing organization9 <head> 34 specializing in programming languages, Internet/World10 <title>Style Sheets</title> 35 Wide Web technology and object technology education.11 Use the style element to 36 Deitel & Associates, Inc. is a member of the World Wide12 <!-- This begins the style sheet section. --> 37 Web Consortium. The company provides courses on Java, create an embedded CSS.13 <style type = "text/css"> 38 C++, Visual Basic, C, Internet and World Wide Web The styles associated with the14 39 programming, and Object Technology.</p> 40 special class are applied to the15 em { background-color: #8000ff;16 color: white } 41 <h1>Clients</h1> header and paragraph elements.17 42 <p class = "special"> The companys clients include many Styles placed in the head apply 43 <em>Fortune 1000 companies</em>, government agencies,18 h1 { font-family: arial, sans-serif }19 to all elements in the document. 44 branches of the military and business organizations.20 p { font-size: 14pt } 45 Through its publishing partnership with Prentice Hall,21 46 Deitel & Associates, Inc. publishes leading-edge22 .special { color: blue } 47 programming textbooks, professional books, interactive23 48 CD-ROM-based multimedia Cyber Classrooms, satellite24 </style> More style properties include font 49 courses and World Wide Web courses.</p>25 </head> 50 type (font-family) and background 51 </body>26 color (background-color). 52 </html> IS 1103 Sect. WWW 33 IS 1103 Sect. WWW 34 A style class named special is created. Development - CSS the Style classes inherit Development - CSS style properties of the style sheet in addition to their own. 1.3.2 Internal (Embedded) Styles 1.3.3 External Styles – Example 2: – Example 1: • An external style sheet is ideal when the style is to be applied to Program Output many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Notice the styles defined • Each web page must link to the style sheet using the <link> tag. in the CSS are applied to The <link> tag is coded in the head section: all paragraphs, headers, and bolded text. EXAMPLE (xxx.html) <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> Elements that have the special class applied have the class’s styles as well as EXAMPLE (mystyle.css) the CSS styles applied. hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} IS 1103 Sect. WWW 35 IS 1103 Sect. WWW 36 Development - CSS Development - CSS 6
  7. 7. 1.3.3 External Styles 1.3.3 External Styles – Example 1: – Example 1: 1 /* Fig. 6.4: styles.css */• The browser will read the style definitions from the 2 3 /* An external stylesheet */ file mystyle.css, and format the document accordingly. 4 5 a { text-decoration: none } Styles.css• An external style sheet can be written in any text editor. 6 a:hover { text-decoration: underline; 7 color: red; The file should NOT contain any xhtml tags. Your style 8 background-color: #ccffcc } 9 sheet MUST be saved with a .css extension. 10 li em { color: red; 11 font-weight: bold; 12 background-color: #ffffff }• Do NOT leave spaces between the property value and the 13 14 ul { margin-left: 2cm } units! 15 16 ul ul { text-decoration: underline; use 17 margin-left: .5cm } margin-left:20px instead of margin-left: 20 px IS 1103 Sect. WWW 37 IS 1103 Sect. WWW 38 Development - CSS Development - CSS 1.3.3 External Styles 32 <p> – Example 1: 33 34 35 <a href = "http://www.food.com">Go to the Grocery store</a> </p>1 <?xml version = "1.0"?> 36 </body> External.html2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 37 </html>3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">45 <!-- Fig. 6.5: external.html --> External.html6 <!-- Linking external style sheets -->7 Program Output8 <html xmlns = "http://www.w3.org/1999/xhtml"> The link element is used to9 <head> reference an external style sheet.10 <title>Linking External Style Sheets</title>11 <link rel = "stylesheet" type = "text/css"12 href = "styles.css" />13 </head> The documents rendered with an14 external CSS should be the same as15 <body> The type attribute those rendered with an internal CSS.1617 <h1>Shopping list for <em>Monday</em>:</h1> defines the MIME type.18 <ul>19 <li>Milk</li>20 <li>Bread21 <ul>22 <li>White bread</li>23 <li>Rye bread</li> The rel attribute is used to24 <li>Whole wheat bread</li> define the linking relationship.25 </ul>26 </li>27 <li>Rice</li>28 <li>Potatoes</li>29 <li>Pizza <em>with mushrooms</em></li> IS 1103 Sect. WWW 39 IS 1103 Sect. WWW 4030 </ul> Development - CSS Development - CSS31 1.3.4 Combined Inline & Internal 1.3.4 Combined Inline & Internal (Embedded) Styles (Embedded) Styles – Example 1: – Example 1: EXAMPLE (css2.html)• ………. <html> <head> <title> … </title> <style type="text/css"> h1{ color: red; border: thin groove; text-align: center; } </style> </head> <body> <h1> Simple Style – Internal/Embedded CSS </h1> <p> This first paragraph is left unaltered </p> <p style="margin-left: 10%; border: ridge; background: #ffffcc"> This paragraph undergoes radical alterations </p> <p> And we finish with an unaltered paragraph </p> IS 1103 Sect. WWW 41 </body> IS 1103 Sect. WWW 42 Development - CSS </html> Development - CSS 7
  8. 8. 1.3.5 Styles using Classes 1.3.5 Styles using Classes – Example 1 : – Example 1 : EXAMPLE (css3.html) <html> <head>• …………. <title> … </title> <style type="text/css"> h1{ color: red; border: thin groove; text-align: center; } h2{ color: green; margin-left: 60%; } .myid1{ text-align: center; color: purple; } .myid2{ text-align: left; color: red; } </style> </head> IS 1103 Sect. WWW 43 IS 1103 Sect. WWW 44 Development - CSS Development - CSS 1.3.5 Styles using Classes – Example 1 : 1.3.5 Styles using Classes – Example 1 :EXAMPLE (css3.html) continued…<body> <h1> a h1 Heading - CSS using classes </h1> • In the above example two classes are declared myid1, <p> This first paragraph is left unaltered </p> myid2. <p style="margin-left: 10%; border: ridge; background: #ffffcc"> But the 2nd paragraph undergoes radical alterations </p> • <p> And this is an unaltered paragraph </p> <h2> Here is a h2 Heading </h2> <p class="myid1"> Followed by a paragraph using class=myid1 </p> <h3 class="myid1"> Another Header h3 using class=myid1 </h3> <p class="myid2"> A paragraph using class=myid2 </p> <p style="margin-left: 30%; color: blue"> And finally a paragraph in the middle of the screen </p></body></html> IS 1103 Sect. WWW 45 IS 1103 Sect. WWW 46 Development - CSS Development - CSS 1.4 Cascading 1.4 Cascading – 1.4.1 Styles can Cascade: - 1.4.2 Cascading Order • What style will be used when there is more than one• Styles can cascade this means that formats override any style specified for an XHTML element? which were defined or included earlier in the document.• E.g. you may include an external stylesheet which • Generally speaking we can say that all the styles will redefines the <p> tag, then code an internal/embedded <p> "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest style in in the head section of your document before priority: finally redefining the <p> tag as an inline style within the body section of your document. 1. Browser default• In the above example the browser will use the inline 2. External Style Sheet style definition when rendering the content. 3. Internal Style Sheet (inside the <head> tag)• Futhermore you can define a style which is applied to all 4. Inline Style (inside XHTML element) instances of an XHTML element (a class selector) so that all h1 headings are changed , or you can alter the • So, an inline style (inside an XHTML element) has the appearance of just specific h1 elements – leaving the highest priority, which means that it will override every style declared inside the <head> tag, in an external style others unchanged. IS 1103 Sect. WWW 47 sheet, and in a browser (a default value). IS 1103 Sect. WWW 48 Development - CSS Development - CSS 8