Cascading Style Sheets (CSS) - PowerPoint PPT Presentation

cascading style sheets css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets (CSS) PowerPoint Presentation
Download Presentation
Cascading Style Sheets (CSS)

play fullscreen
1 / 20
Cascading Style Sheets (CSS)
60 Views
Download Presentation
aulani
Download Presentation

Cascading Style Sheets (CSS)

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Information Resources and Communication, WS 2013/2014 Cascading Style Sheets (CSS) Jiří Balej, Martin Podborský 10. 10. 2013

  2. What is CSS? • CSS defines how to display HTML elements. • CSS is used for creating formatting of the HTML document and storing it in a separate CSS file. • CSS is supported by all of today’s web browsers. 10. 10. 2013

  3. CSS Syntax • CSS consist of CSS rules. • Each rule has two main parts: • a selector • and one or more declarations in braces • The selector can be the HTML element, the “class” attribute or the “id” attribute. • Each declaration consists of a property and value. • The property is the style attribute. 10. 10. 2013

  4. CSS Syntax examples body { background-color: blue; font-size: 16px} p { text-align: center; } a { font-family: “Tahoma”; } div { width: 100%; height: 40px; } 10. 10. 2013

  5. Ways to insert CSS to HTML Document • There are three common ways: • External style sheet • Internal style sheet • Inline styles 10. 10. 2013

  6. External style sheet • Thisis an ideal way when the style is applied to many pages. • Each page must link to the style sheet using the <link> tag. Example: <head> <link rel = “stylesheet”type = “text/css”href = “mycssfile.css” /> </head> 10. 10. 2013

  7. Internal style sheet • Should be used when a single document has a unique style and styles are relatively short Example: <head> <style type = “text/css”> body{ color: blue; } </style> </head> 10. 10. 2013

  8. Inline styles • Not as good as the internal or external styles sheets. • They loose many of the advantages of the style by mixing content with presentation. Example: <div style =“color: green; font-size: 14px;”>Some fairy-tale.</div> 10. 10. 2013

  9. Basic CSS Selectors • The element selector • Simply a HTML element name. • Declarations will affect all HTML elements of specified name. Example: p { background-color: pink;} 10. 10. 2013

  10. Basic CSS Selectors • The Id selector • is used for specifying a style for a single, unique element • uses the “id” attribute of the HTML element • is defined with a “#” Example: <div id= “my_div”>content</div> #my_div{color: darkblue; } 10. 10. 2013

  11. Basic CSS Selectors • The Class selector • is used for specifying a style for a group of elements which share the same class • uses the “class” attribute • is defined with a “.” Example: <span class= “my_spans”> content </span><span class= “my_spans”> some other content </span> .my_spans{ font-size: 14px; } 10. 10. 2013

  12. CSS Styling –background • There are two main CSS properties for specification of background • background-color – specifies the background color of an element • background-image – specifies an image to use as the background element Examples: p{background-color: red;} body {background-image: url(“my_img.png”); } 10. 10. 2013

  13. CSS Styling – text • CSS has many properties for styling a text. • These properties affect text color, alignment, font size etc. • color: sets the color of the text • text-align: sets the horizontal alignment of text • font-family: sets the font family • font-style: specifies text style • font-size: sets the size of text. 10. 10. 2013

  14. CSS Styling – width and height • With CSS we are able to change width and height of any HTML element. • CSS uses properties called “width” and “height”. • We can specify dimensions in several ways: • in pixels (absolute), ex.: width: 200px; • in percentage (relative), ex.: width: 50%; • or use the value “auto” for automatic width or height. .menu { width: 100px; height: 80%; } 10. 10. 2013

  15. CSS Styling – border • CSS can create many different borders. • Border value consists of three sub values. • border-width: sets the width of a border • border-style: sets the style of a border (ex.: solid, dotted) • border-color: sets the color of a border div{ border: 2px solid blue; } 10. 10. 2013

  16. CSS Styling – displaying an element • We have several ways to display an element. • CSS uses a property called “display” with one of these values: • block: displays the element with line break at the end • inline: displays the element without line break • none: does not display the element at all #hidden_img{ display: none; } 10. 10. 2013

  17. CSS Styling - opacity • CSS can specify a transparency of an element in percentage with property called “opacity” • With value close to 1, the element will be opaque. • With value close to 0, the element will be almost transparent img{ opacity: 0.8; } 10. 10. 2013

  18. CSS Styling - padding • CSS property “padding” is used for setting the internal margin of an HTML element. • The value of this attribute can be set in pixels, in percentage or to “auto”. • The value consists of four numbers for: • upper internal margin • right internal margin • lower internal margin and • left internal margin div { padding: 2px 10px 5% auto;} 10. 10. 2013

  19. CSS Styling - float • CSS has a property called “float” for creating floating elements. • The property can have following values: • none – the element is not floating at all • left – the element is moved to the right and the following text will “float” around it • right – the element is moved to the left and the following text will “float” around it #item { float: right;} 10. 10. 2013

  20. That’s all • For more information visit web page: http://www.w3schools.com/css/ http://www.jakpsatweb.cz (in Czech) • Have a nice day! 10. 10. 2013