620 likes | 916 Views
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
E N D
Cascading Style Sheets SWE 444 Internet and Web Application Development Dr. Ahmed Youssef
Markup Languages and Formatting • HTML • XHTML • CSS (Cascading Style Sheets) SWE 444: Internet & Web Application Development
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
Content Description Presentation Description HTML Cascading Style Sheet Browser Improved and Consistent End User Experience Content vs. Presentation SWE 444: Internet & Web Application Development
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
CSS Syntax • The general syntax is: • selector {property: value} or • Selector, …, selector { property: value; . . . property: value} Ahmed Youssef:: SWE444: Internet and Web Application Development
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
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
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
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>
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
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
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
<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
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
<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
CSS Text Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Text • Text Color • Text Alignment • Text Decoration • Text Indentation • Text Transformation Ahmed Youssef:: SWE444: Internet and Web Application Development
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
Text-align • Syntax: • text-align: left|center|right|justify • Example: • h2 {text-align: center}
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
<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
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
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
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
All CSS Text Properties http://www.w3schools.com/css/css_text.asp Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Fonts Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Font • Font-family • Font-style • Font-weight • Font-size
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
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)
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
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
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
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
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
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
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..)
All CSS Font Properties http://www.w3schools.com/css/css_font.asp Ahmed Youssef:: SWE444: Internet and Web Application Development
CSS Background Ahmed Youssef:: SWE444: Internet and Web Application Development
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
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
background-image • Syntax: • background-image:url(image) • Example: • body {background-image:url(paper.gif);} Ahmed Youssef:: SWE444: Internet and Web Application Development
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
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
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
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
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
CSS Links Ahmed Youssef:: SWE444: Internet and Web Application Development
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
<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