1 / 8

Cascading Style Sheets CSS

Cascading Style Sheets CSS. CS422 Dick Steflik. CSS. CSS is a style sheet language that allows the seperation of content and the way it is formatted for documents written in some markup language HTML (Hypertext Markup Language) SVG ( Scaleable Vector Graphics)

kevina
Télécharger la présentation

Cascading Style Sheets CSS

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. Cascading Style SheetsCSS CS422 Dick Steflik

  2. CSS • CSS is a style sheet language that allows the seperation of content and the way it is formatted for documents written in some markup language • HTML (Hypertext Markup Language) • SVG (Scaleable Vector Graphics) • X3D (3-Dimensional Graphics) • XUL (XML User Interface Language)

  3. Comment Characters • /* */

  4. elements/tags • selectors:attribute { rules } • selector is an element or an element:attribute • rule is the formatting you wish for that element • Example for HTML body and anchor tag body{ font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px; padding: 0px; } a:visited{ color: #006699; text-decoration: none; }

  5. divs • You can also specify formatting for specific parts of a document such as HTML divs #navBar{ float: left; width: 20%; margin: 0px; padding: 0px; background-color: #eeeeee; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; } where navBar is the id of a div in the document

  6. class • if an element has been assigned to a class the formatting will apply to that class .relatedLinks{ position: relative; margin: 0px; padding: 0px 0px 10px 10px; font-size: 90%; } .relatedLinks h3{ padding: 10px 0px 2px 0px; } .relatedLinks a:link, .relatedLinks a:visited { display: block; } where relatedLinks is a div assigned to the class relatedLinks

  7. positioning • Normal Flow – left to right top to bottom • Float – taken out of the normal flow and shifted to the left or right as far as possible • Absolute exactly where it is positioned and everything else flows around it • values : top, bottom, right, left

  8. cascading priority • (highest to lowest) • 1 – User Defined • 2 – Inline • 3 – Media type • 4 – Media Type • 5 – Selector specificity • 6 – Rule order • 7 – Parent inheritance • 8 – CSS property definition in HTML document • 9 – Browser default

More Related