![Page 1: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/1.jpg)
Dreamweaver -- CSS
![Page 2: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/2.jpg)
Dreamweaver -- MX
![Page 3: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/3.jpg)
Dreamweaver -- MX
• New icons are added in MX• Most of the features commonly used in web design, and are same as FrontPage.• New feature used in Dreamweaver is CSS styles
![Page 4: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/4.jpg)
DHTML
Create Dynamic Behavior– Desire to change content or appearance by
scripting language– Appearance can be modified by changing
CSS
![Page 5: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/5.jpg)
CSS – Inline styles
Inline styles – Individual element’s style declared using
the STYLE attribute– Each CSS property followed by a colon
and the value of that attribute– Multiple properties separated by
semicolons<P STYLE = “font-size: 20 pt; color: #0000FF”>
– Inline styles override any other styles
![Page 6: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/6.jpg)
Inline styles
<HTML><HEAD><TITLE>Inline Styles</TITLE></HEAD><BODY>
<P>Here is some text</P><P STYLE = "font-size: 20pt">Here is some more text</P><P STYLE = "font-size: 20pt; color: #0000FF">Even more text</P>
</BODY></HTML>
![Page 7: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/7.jpg)
CSS – External style sheet External style sheet
– Embedded within the HTML header section • Begins with <STYLE TYPE = “text/css”>
– Or Create the style sheet as an individual file with .css extension and link it to the HTML file using• <LINK REL = “stylesheet” TYPE = “text/css” HREF = “filename.css”>
– Styles placed here apply to the whole document– Without style sheets
• Browser completely controls the look and feel of Web pages
– With style sheets• Designer can specify the look and feel of Web page
![Page 8: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/8.jpg)
External style sheet
Example of style sheet embedded within the HTML
<HTML><HEAD><TITLE>Style Sheets</TITLE>
<!-- This begins the style sheet section. --> <STYLE TYPE = "text/css">
em { font-size: 20pt color: #00FF00 }a.nodec {color: brown}a:hover {color: red; background-color: black}.blue { color: #0000FF }
</STYLE> </HEAD>
<BODY><P>Here is some text</P><P> Here is some <em> more text </em> </P><p><a CLASS = "nodec" href = "http://www.abc.com"> Here is hover effect </a></p><P CLASS = “blue">Even more text</P>
</BODY></HTML>
![Page 9: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/9.jpg)
External style sheet (Con’t)
![Page 10: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/10.jpg)
External style sheet (Con’t)
Example of individual style sheet file– Style Sheet file: styles.css
P { font-size: 20pt }.blue { color: #0000FF }
– HTML file<HTML><HEAD><TITLE>Style Sheets</TITLE><LINK REL = ”stylesheet” TYPE = "text/css” HREF = ”styles.css"> </HEAD>
<BODY><P>Here is some text</P><P> Here is some more text</P><P CLASS = ”blue ">Even more text</P>
</BODY></HTML>
![Page 11: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/11.jpg)
Other features
Position, dimensions, box model– Position: <p><img src = “xxx.gif” style = “position: absolute; top: 0px; left:
0px; z-index: 1” /></p>
• Z-index: 1 for the lower layer (background)• Position: absolute, relative• Relative: top, bottom, left, right (relative position
ing keeps elements in the general flow of elements on the page, so positioning is relative to other elements in the flow)
![Page 12: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/12.jpg)
Other features (Con’t)
– Span: grouping element, no formatting to contents, for apply CSS rules or id attributes to a block of text
– Dimensions: <div style = “width: 10em; overflow: scroll; text-ali
gn: right”> … </div>• Widht equals to 10 times the font size• background-color, margin-top, margin-bottom,
margin-right, margin-left
![Page 13: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/13.jpg)
Other features (Con’t) Box
– Border-width: think, medium, thin– Border-style: none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, outset– Border-color– Padding-top, padding-bottom, padding-
right, padding-left
Content
Margin
Border
Padding
![Page 14: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/14.jpg)
Style sheets
Three possible sources for style sheets– Browser defaults– Preset user styles– Author styles
Styles allow inheritance and specificity When conflicting styles:
– Author styles have a greater precedence than preset user styles
![Page 15: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/15.jpg)
Style sheets (Con’t)
Users can define their own user style sheets CSS specification gives precedence to author
styles over user styles Use relative measurements Add a user style sheet in IE5
– Tools menu Internet Options…• Accessibility…
– Check Format documents using my style sheet
![Page 16: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/16.jpg)
Style sheets (Con’t)
![Page 17: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/17.jpg)
Dreamweaver – insert CSS
![Page 18: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/18.jpg)
New CSS style sheet
Insert external CSS in the document
Create a new file to add external CSS
![Page 19: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/19.jpg)
CSS style sheet
Custom CSS styles, also called class styles, let you set style attributes to any range or block of text.
HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.
CSS selector styles redefine the formatting for a particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) or for all tags that contain a specific id attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle").
![Page 20: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/20.jpg)
Dreamweaver -- CSS
![Page 21: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/21.jpg)
Code added in CSS
Code added
![Page 22: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/22.jpg)
Dreamweaver – other featureAnimation the
position of various
document elements can be done by putting
the elements onto a layers
and using scripting
language to change the layer
position
![Page 23: Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature](https://reader033.vdocument.in/reader033/viewer/2022051620/56649e215503460f94b0e143/html5/thumbnails/23.jpg)
Dreamweaver – Timeline