1 / 20

Understanding Cascading Style Sheets (CSS) for Web Design

Learn how CSS defines and styles HTML elements, ways to apply CSS to documents, selectors, styling text, background, size, borders, and display options, enhancing your web design skills.

aulani
Télécharger la présentation

Understanding Cascading Style Sheets (CSS) for Web Design

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. 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

More Related