CSS
- 1. Based on w3 schools DHTML, CSS UNIT II INT355 – Internet and Web Technology
- 2. DHTML Dynamic HTML – Dynamically rendering content of an HTML code DHTML CSS CLIENT SIDE SCRIPTING DOM
- 3. Cascading Style Sheets (CSS) Rules or styles for organizing the layout of an HTML document including its color, typefaces, margins links and other formatting elements. Controlling the style of a web document Separating the visual design elements from structure
- 4. CSS Advantages: Saves time Pages load faster Easy maintenance Superior styles to HTML Disadvantages Browser compatibility
- 5. CSS Two parts: „property’ and ‘value’. Syntax selector {property1: value1; property2: value2} Comments Begins with /* Ends with */
- 6. CSS Example p {color:red;text-align:center;} (or) p{ color:red; text-align:center }
- 7. Adding styles to a page 1. 2. 3. 4. Embedding style sheet within head tags Link to an external style sheet from HTML document Import an external style sheet into the document In-line style added in middle of document
- 8. Embedding Styles (Internal Style Sheet) <head> <style type=“text/css”> hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");} </style> An internal style sheet should be used when a single document has a unique style.
- 9. External Style sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> mystyle.css hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/b ack40.gif"); An external style sheet is ideal when the style is applied to many pages.
- 10. In-line styles <p style="color:sienna;margin-left:20px;">This is a paragraph.</p> An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
- 11. Importing stylesheets To use the @import rule, type: <style type="text/css"> @import url("import1.css"); @import url "import2.css"; </style> @import rules must always be first in a document Finally, you can also import a style sheet for just a specific media: <style type="text/css"> @import url("import4.css") tv, print; </style> This acts the same as if you had defined the media type in the <style> tag.