css
Post on 06-May-2015
222 Views
Preview:
DESCRIPTION
TRANSCRIPT
DHTML, CSSINT355 – Internet and Web TechnologyUNIT II
Based on w3 schools
DHTML Dynamic HTML – Dynamically rendering
content of an HTML code
DHTML
CSSCLIENT SIDE
SCRIPTINGDOM
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
CSS Advantages:
Saves time Pages load faster Easy maintenance Superior styles to HTML
Disadvantages Browser compatibility
CSS Two parts: ‘property’ and ‘value’. Syntax
selector {property1: value1; property2: value2}
Comments Begins with /* Ends with */
CSS Example p {color:red;text-align:center;} (or) p{
color:red; text-align:center
}
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
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.
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.
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!
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.
top related