1 / 59

Cascading Style Sheets

Cascading Style Sheets. SWE 444 . Internet and Web Application Development. Dr. Ahmed Youssef. Markup Languages and Formatting . HTML XHTML CSS (Cascading Style Sheets). What is CSS?. CSS  stands for  C ascading  S tyle  S heets Styles define  how to display  HTML elements

maitland
Download Presentation

Cascading Style Sheets

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 SWE 444 Internet and Web Application Development Dr. Ahmed Youssef

  2. Markup Languages and Formatting • HTML • XHTML • CSS (Cascading Style Sheets) SWE 444: Internet & Web Application Development

  3. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • External Style Sheets are stored in CSS files Ahmed Youssef:: SWE444: Internet and Web Application Development

  4. Content Description Presentation Description HTML Cascading Style Sheet Browser Improved and Consistent End User Experience Content vs. Presentation SWE 444: Internet & Web Application Development

  5. CSS Observations • It is not HTML • It defines how HTML elements are to be displayed. • It can be integrated into HTML • It can be called by referencing an external file SWE 444: Internet & Web Application Development

  6. CSS Syntax • The general syntax is: • selector {property: value} or • Selector, …, selector { property: value; . . . property: value} Ahmed Youssef:: SWE444: Internet and Web Application Development

  7. Three Ways to Insert CSS There are three ways of inserting a style sheet: • Inline style • Embedded (Internal) style sheet • External style sheet Ahmed Youssef:: SWE444: Internet and Web Application Development

  8. Types of Style Sheets • Inline (add a style attribute to an element): <p style=“font: 13pt verdana”> Text </p> • Embedded (Internal) Style Sheet: <head> <style> P { font: 13pt verdana; } </style> </head> SWE 444: Internet & Web Application Development

  9. Types of Style Sheets • Linked (add an external style definition): <head> <link rel=“stylesheet” href=“./path/file_name.css” type=“text/css”> </head> Ahmed Youssef:: SWE444: Internet and Web Application Development

  10. Must be inside <head> section Note use of brackets Allows one style to be applied simultaneously to many tags Embedded Style Example <head> <title>Cascading Style Sheets</title> <style> h2,h3 {color:green; font-family:sans-serif} h4,h5,h6 {color:blue; font-family:sans-serif} </style> </head>

  11. Resolving Style Preferences • Inline style • If no inline, embedded style is applied • If no embedded, external style sheet applied • Any undefined attributes use web browser default SWE 444: Internet & Web Application Development

  12. Cascading Order • What style will be used when there is more than one style specified for an HTML element? • styles will "cascade" into a new "virtual" Style Sheet by the following rules (number four has the highest priority): • Browser default • External Style Sheet • Internal Style Sheet • Inline Style

  13. CSS Id and Class Selectors • The id selector uses the id attribute of the HTML element and is defined with a "#". #para1{ text-align:center; color:red;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  14. <html> <head> <style type="text/css"> #para1 {text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  15. The class Selector • The class selector uses the HTML class attribute, and is defined with a ".“ .center {text-align:center;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  16. <html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  17. CSS Text Ahmed Youssef:: SWE444: Internet and Web Application Development

  18. CSS Text • Text Color • Text Alignment • Text Decoration • Text Indentation • Text Transformation Ahmed Youssef:: SWE444: Internet and Web Application Development

  19. Text Color The color can be specified by: • name - a color name, like "red" • RGB - an RGB value, like "rgb(255,0,0)" • Hex - a hex value, like "#ff0000“ body {color:blue;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);} Ahmed Youssef:: SWE444: Internet and Web Application Development

  20. Text-align • Syntax: • text-align: left|center|right|justify • Example: • h2 {text-align: center}

  21. Text Decoration • It is used to set or remove decorations from text. • The text-decoration property is mostly used to remove underlines from links for design purposes: • Example a {text-decoration:none;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  22. <html> <head> <style type="text/css"> a {text-decoration:none;} </style> </head> <body> <p>Link to: <a href="http://www.google.com"> Google</a></p> </body> </html> Ahmed Youssef:: SWE444: Internet and Web Application Development

  23. Text Decoration • It can also be used to decorate text: • Example h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  24. Text Transformation • It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. • Example • p {text-transform:uppercase;} • p {text-transform:lowercase;} • p {text-transform:capitalize;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  25. Text Indentation • The text-indentation property is used to specify the indentation of the first line of a text. • Example p {text-indent:50px;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  26. All CSS Text Properties http://www.w3schools.com/css/css_text.asp Ahmed Youssef:: SWE444: Internet and Web Application Development

  27. CSS Fonts Ahmed Youssef:: SWE444: Internet and Web Application Development

  28. CSS Font • Font-family • Font-style • Font-weight • Font-size

  29. Font Settings • Most browsers use the Times New Roman font at 12-point size and color black. • CSS settings permit you to change these default settings to bring a different look to your pages. • There are six font style that can be used: • font-family • font-size • font-style • font-weight • font-variant • font

  30. font-family Property • Five generic font families are supported by Cascading Style Sheets: • Serif (e.g., Times) • Sans-serif (e.g., Arial or Helvetica) • Cursive (e.g., Zapf-Chancery) • Fantasy (e.g., Western) • Monospace(e.g., Courier)

  31. Other Font Family • The following font faces are typical on a Windows-based PC: • arial • arial narrow • comic sans ms • courier new • georgia • impact • tahoma • times new roman • verdana SWE 444: Internet & Web Application Development

  32. Example p{font-family:"Times New Roman", Times, serif;} • Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman". • More than one font family is specified in a comma-separated list Ahmed Youssef:: SWE444: Internet and Web Application Development

  33. Font Style • The font-style property is mostly used to specify italic text. • This property has : • normal - The text is shown normally • italic - The text is shown in italics • Example p.normal {font-style:normal;}p.italic {font-style:italic;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  34. font-weight Property • Specified the degree of “boldness” of the type • Specified from 100-900 in intervals of 100 • 100 is lightest • 900 is heaviest • Example: • p {font-weight: 300} SWE 444: Internet & Web Application Development

  35. Font Size • The font-size property sets the size of the text. • You can use pixels to set letter heights for special styling. h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  36. Relative Unit Examples • As a scalable font: • body {font-size: 150%} • Use descriptive keywords: xx-small through xx-large: • b {font-size: xx-large} SWE 444: Internet & Web Application Development

  37. Text properties • Font-family font-family: “PMingLiu"; • Font-style font-style : italic; (normal) • Font-weight font-weight :bold; (normal) • Font-size font-size : 12pt; (in,cm,px..)

  38. All CSS Font Properties http://www.w3schools.com/css/css_font.asp Ahmed Youssef:: SWE444: Internet and Web Application Development

  39. CSS Background Ahmed Youssef:: SWE444: Internet and Web Application Development

  40. CSS Background • CSS background properties are used to define the background effects of an element. • CSS properties used for background effects: • background-color • background-image • background-repeat • background-position Ahmed Youssef:: SWE444: Internet and Web Application Development

  41. Background Color • Specifies the background color of an element • Example h1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  42. background-image • Syntax: • background-image:url(image) • Example: • body {background-image:url(paper.gif);} Ahmed Youssef:: SWE444: Internet and Web Application Development

  43. Background Image – Repeat Horizontally or Vertically • By default, the background-image property repeats an image both horizontally and vertically. • Some images should be repeated only horizontally or vertically Ahmed Youssef:: SWE444: Internet and Web Application Development

  44. background-repeat • Controls how image is to be tiled • Attribute values: • repeat: fill entire background • repeat-x: tile horizontally for width of element • repeat-y: tile vertically for width of element • no-repeat: show only once SWE 444: Internet & Web Application Development

  45. background-repeat • Image is repeated horizontally by (repeat-x) • Example body{background-image:url(gradient2.png);background-repeat:repeat-x;} Ahmed Youssef:: SWE444: Internet and Web Application Development

  46. background-position • The position of the image is specified by the background-position property • top|center|bottom|right|left body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;} SWE 444: Internet & Web Application Development

  47. Background - Shorthand property • To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property. body { background:#ffffff url('img_tree.png') no-repeat right top; } Ahmed Youssef:: SWE444: Internet and Web Application Development

  48. CSS Links Ahmed Youssef:: SWE444: Internet and Web Application Development

  49. CSS Links • Links can be styled with any CSS property (e.g. color, font-family, background, etc.). • Special for links are that they can be styled differently depending on what state they are in. • The four links states are: • a:link - a normal, unvisited link • a:visited - a link the user has visited • a:hover - a link when mouse over it • a:active - a link the moment it is clicked Ahmed Youssef:: SWE444: Internet and Web Application Development

  50. <a> and CSS Example <style> a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */ </style> Ahmed Youssef:: SWE444: Internet and Web Application Development

More Related