1 / 24

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS). Outline Introduction( Working with style sheet) Inline Styles Embedded Style Sheets Linking External Style Sheets CSS Font CSS Text CSS Background More Examples User Style Sheets. CSS. About styles

jeanetteingram
Download Presentation

Cascading Style Sheets (CSS)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Cascading Style Sheets (CSS) Outline Introduction( Working with style sheet) Inline Styles Embedded Style Sheets Linking External Style Sheets CSS Font CSS Text CSS Background More Examples User Style Sheets

  2. CSS • About styles • A style is a set of formatting characteristics identified by a unique name. Styles enable you to quickly format a whole group of page elements in one simple task. • You can apply styles to most page elements in Microsoft FrontPage, including text (individual characters or entire paragraphs), graphics, and tables.

  3. Cascading Style Sheets (CSS) - Styles define how to display html elements, such as (font, color, etc). - Styles are normally saved in external.css files. - Type of cascading styles: Inline style sheet: declare and individual elements format using html attribute style in body section. By using style attribute. Internal style sheet (embedded): Used when a single document has a unique style, you define internal style in head section by using <style> tag. external style sheet: Deals when the style is applied to many pages saved in external.css files. Each page must link to the style sheet using the <link>tag and rel attribute that specify a relationship between the current document and another document.

  4. Cascading Style Sheets (CSS) Note: <link> tag and rel attribute definein <head> section in the html document. href: for referencing to the external file. Example: <Head> <link rel="stylesheet" type="text/css" href="h.css"/> </head> <Body> . . </body>

  5. Cascading Style Sheets (CSS) Syntax CSS syntax: The CSS syntax is made up three parts: Selector {property: value}, where Selector: normally the HTML element you wish to define. (<p>, <h1>, <body>…etc) Property: attribute you wish to change. (Font-size, color, border…etc) Value: is the value for property. Note: property and value are separated by a colon (: ) and surrounded by truly braces ({}). Note: if there is more than one property separated them by semicolon (;).

  6. CSS font: defines the font in text.

  7. CSS text: defines the appearance of the text:

  8. CSS background: defines the background effects of an element.

  9. Examples (CSS) Example 1: P {font-family:" Arial"; font-size:"10px; border-style:" inset"} CSS comment: comments are used to explain your code Comments will be ignored by browser. /*…………..*/ Example 2: <Head> <Style> /* this is comment*/ P {text-align:" center"; /* this is another comment*/ Color:" black"} </style> </head>

  10. Inline style sheet: (in the body section tag) <Html> <Head> <Title> inline style sheet </title> </head> <Body> <p style="color: blue; "> this is the paragraph </p> <h1 style="font-size: 10px; color: red"> header </h1> </body> </html> Note : for using more than one value of the same property use comma (,) between values. <p style="font: blue, Arial, 2px; ">

  11. Internal style sheet: (in the head section tag) <Html> <Head> <Title> internal style sheet> </title> <Style> P {color: blue; margin-left: 20px} H1 {font-size: 10px; color: red} Body {background-image: URL ("images/back. gif")} H1 {color: brown} </style> </head> <Body> <p> this is a paragraph</p> <h1> header one </h1> </body></html>

  12. External style sheet: (in the head section tag) First file: P {color: blue} h1 {font-style: italic} We store this file with extension CSS (file name.css) Second file: <Html><Head> <Title> external style sheet </title> <link rel="stylesheet" href=“file name.css"/> </head> <Body> <p> this is a paragraph </p> <h1> header one >/h1> </body></html>

  13. Grouping You can group more than one element, separate each of them with a comma (,). Example: <html> <head> <style> H1,h2,h3,p {color:blue} </style> </head> <body> <h1> header1 </h1> <h2> header2 </h2> <h3> header3 </h3> <p> welcome </p> </body> </html>

  14. The style attribute specifies the style for an element. Some style properties are font-size and color. <html> <head> <title>Inline Styles</title> </head> <body> <p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt">This text has the <em>font-size</em> style applied to it, making it 20pt. </p> <p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> </body> </html> Inline.html

  15. Program Output

  16. Use the style element to create an embedded CSS. More style properties include font type (font-family) and background color (background-color). A style class named special is created. Style classes inherit the style properties of the style sheet in addition to their own. <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Style Sheets</title> <style type = "text/css"> em { background-color:#8000ff; color:white } h1 { font-family:arial, sans-serif } p { font-size:14pt } .special { color:blue } </style> </head> Declared.html Styles placed in the head apply to all elements in the document.

  17. The styles associated with the special class are applied to the header and paragraph elements. <body> <!-- This class attribute applies the .blue style --> <h1 class = "special">Deitel & Associates, Inc.</h1> <p>Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technologyand object technology education. Deitel & Associates, Inc. isa member of the World Wide Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p> <h1>Clients</h1> <p class = "special"> The company's clients include many <em>Fortune 1000 companies</em>, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p> </body> </html> Declared.html

  18. Elements that have the special class applied have the class’s styles as well as the CSS styles applied. Program Output Notice the styles defined in the CSS are applied to all paragraphs, headers, and bolded text.

  19. User defined style sheets are usually external. A user’s style sheet is not linked to a page, they are set in the browser’s options. body { font-size: 20pt; color:yellow; background-color:#000080 } Userstyles.css

  20. User Style Sheets Setting the user’s style sheet in IE.

  21. User Style Sheets Web page with user styles applied.

  22. <html> <head> <title>User Styles</title> <style type = "text/css"> .note { font-size:.75pt } </style> </head> <body> <p>Thanks for visiting my Web site. I hope you enjoy it. </p><p class = "note">Please Note: This site will be moving soon. Please check periodically for updates.</p> </body> </html> User_relative.html

  23. Program Output Output before relative measurement is used to define the font in the document.

  24. User Style Sheets Using relative measurements in author styles. Output when relative measurement is used. By using relative measurements the user defined styles are not overwritten.

More Related