Download - CSS
![Page 1: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/1.jpg)
DHTML, CSSINT355 – Internet and Web TechnologyUNIT II
Based on w3 schools
![Page 2: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/2.jpg)
DHTML Dynamic HTML – Dynamically rendering
content of an HTML code
DHTML
CSSCLIENT SIDE
SCRIPTINGDOM
![Page 3: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/3.jpg)
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
![Page 4: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/4.jpg)
CSS Advantages:
Saves time Pages load faster Easy maintenance Superior styles to HTML
Disadvantages Browser compatibility
![Page 5: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/5.jpg)
CSS Two parts: ‘property’ and ‘value’. Syntax
selector {property1: value1; property2: value2}
Comments Begins with /* Ends with */
![Page 6: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/6.jpg)
CSS Example p {color:red;text-align:center;} (or) p{
color:red; text-align:center
}
![Page 7: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/7.jpg)
Adding styles to a page
1. Embedding style sheet within head tags2. Link to an external style sheet from
HTML document3. Import an external style sheet into the
document4. In-line style added in middle of
document
![Page 8: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/8.jpg)
Embedding Styles (Internal Style Sheet)
<head> <style type=“text/css”>
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}
</style>An internal style sheet should be used when a single document has a unique style.
![Page 9: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/9.jpg)
External Style sheet <head> <link
rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css hr {color:sienna;} p {margin-
left:20px;} body
{background-image:url("images/back40.gif");An external style sheet is ideal when the style is applied
to many pages.
![Page 10: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/10.jpg)
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!
![Page 11: CSS](https://reader037.vdocuments.net/reader037/viewer/2022100523/554a1217b4c9058c5d8b4b60/html5/thumbnails/11.jpg)
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.