Agenda. Goal. Applying CSS. Syntax in-line styles. Aniel Bhulai. Inleiding Computergebruik - CSS 1

Transcription

1 Agenda Advantages of CSS In-line styles Embedded styles External style sheets Syntax + examples styles Some CSS properties (font, background, color, etc.) 1 2 Goal Give insight in the advantages of CSS. How to use the different styles? NOT Learn to design web pages with CSS. Advantages of Cascading Style Sheet (CSS) More control of presentation of web documents Usage of styles Usage of downloadable fonts Content positioning Usage of CSS as templates Website is easy to maintain Separated website design and content Makes sites load faster and conserves bandwidth 3 4 In-line styles Embedded styles External style sheets Applying CSS Syntax in-line styles <htmltag style= cssproperty1: value1; cssproperty2: value2; > </htmltag> <p style= font-family: Times New Roman, Times, serif; font-size: medium; line-height: 150%; paddingtop: 0.6em >The white swan swam in the pond.</p> 5 6 Inleiding Computergebruik - CSS 1

2 In-line styles Defined within HTML tags in the body section of an HTML document. Most useful for one time applications. 7 Syntax embedded styles <style type= text/css selector {property: value} <style type= text/css h1 {color:blue;} 8 Embedded styles Defined in the head section of an HTML document. Most useful for single page applications. Some examples body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red} p { text-align: center; color: black; font-family: arial } h1,h2,h3,h4,h5,h6 {color: green} 9 10 Syntax external style sheets <link rel= stylesheet href= mystyles.css type= text/css > body {background-color: white; margin-top: 0px} h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 90%; font-weight: 500}.bodytext {font-family: Times New Roman, Times, serif; fontsize: 80%; color: #990000} External style sheets Referenced in the head section of an HTML document. A text file with a.css extension that contains the style definitions. Called in the body section in the same manner as embedded styles. Take advantage of the full capabilities of CSS Inleiding Computergebruik - CSS 2

3 Class selector (selector {property: value}) p.blauw {color:blue;}.rood {color:red;} p.blauw {color:blue;}.rood {color:red;} <h1 class= rood > Cascading Style Sheet </h1> <p class= blauw >CSS makes maintaining websites easier. </p> <p> This paragraph does not use any classes. </p> Example: classes ID selector element#idname p#exampleid1 { background-color: color: white; } p#exampleid2 { text-transform: uppercase; } Example: IDs p#exampleid1 { background-color: pink; } p#exampleid2 { text-transform: uppercase; } <p id="exampleid1">this paragraph has an ID name of "exampleid1" and has a pink CSS defined background.</p> <p id="exampleid2">this paragraph has an ID name of "exampleid2" and has had its text transformed to uppercase letters. </p> Incorrect class usage Classes vs. IDs Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page Inleiding Computergebruik - CSS 3

4 h1 {color:blue;} <h1> Cascading Style Sheet </h1> <p>css makes maintaining websites easier. </p> Example: CSS With CSS Without CSS font properties font-size (x-small, xx-small, small, medium, large, x-large, xx-large, smaller, larger, pt, %) font-style (normal, italic) font-family (serif, sans-serif, cursive, monospace en fantasy ) font-weight (normal, bold, bolder, lighter, ) Example: font properties p {font-size:12pt;} em {font-size:120%}; blockquote {font-size:medium;} b {font-size:larger;} h2 {font-style: italic;} h1 {font-family:helvetica, arial, sans-serif;} blockquote {font-weight: bold;} text properties text-align (left, right, center, justify) text-transform (capitalize, uppercase, lowercase, none) text-decoration (none, underline, line-through, blink) color and background properties color (color value, name) background-image (url) background-color (color value, name) 23 Some CSS properties: Block-level properties margin-top, margin-right, margin-bottom, margin-left, margin (length, percentage, auto) border-style (none, solid, double, inset, outset, groove, ridge) border-color (none, color value) border-top-width, border-right-width, borderbottom-width, border-left-width, border-width (length) 24 Inleiding Computergebruik - CSS 4

5 Examples: border-style Read further Solid border Double border Groove border Ridge border Inset border Outset border W3Schools Web Design Group W3C.org htmlgoodies.com W3C: CSS Validator Questions??? 27 Inleiding Computergebruik - CSS 5