1 / 19

HTML and CSS Cascading Style Sheets

HTML and CSS Cascading Style Sheets . CSS was invented to control websites design (originally HTML documents) CSS is part of DHTML Technologies DHTML is a mix of technologies used within HTML documents DHTML consists of: Cascading style Sheets (CSS) JavaScript DHTML purpose:

menefer
Download Presentation

HTML and CSS Cascading Style Sheets

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. HTML and CSSCascading Style Sheets Sana.odeh@nyu.edu

  2. CSS was invented to control websites design (originally HTML documents) • CSS is part of DHTML Technologies • DHTML is a mix of technologies used within HTML documents • DHTML consists of: • Cascading style Sheets (CSS) • JavaScript • DHTML purpose: • Creates powerful, interactive and dynamic sites • Provides great control over site design • Position objects in HTML documents • Small file size Cascading Style sheet(CSS) Sana.odeh@nyu.edu

  3. Advantages of Cascading style sheets (CSS) • Consistent design for entire site • Takes control of the appearance of your website • Efficient site management • No redundant design tags • Can use one file to format entire site • When making changes, you only need to make changes in one place (saves time) • Control of document layout and object positioning • Offers many creative solutions to HTML format limitations Sana.odeh@nyu.edu

  4. - CSS is the standard to design HTML documents - CSS is also used also to display and format HTML documents • What is CSS? • Different types of styles used to display layout for XML documents • How to use css to format text in XML • The hierarchy of styles Sana.odeh@nyu.edu

  5. Cascading style sheets (CSS)and HTML • Each rule is referred to as a style that formats an element (tag) of an HTML document • CSS provides rules to format HTML tags: • color: background and text color of elements • Border: border around elements • Spacing around and within an element: margins & padding • Formatting text : font size, type, style and color • Positioning elements Sana.odeh@nyu.edu

  6. Cascading style sheets and browsers support • CSS is a standard supported by the World Wide Web Consortium http://www.w3c.org • Latest browsers IE, Firfox support CSS but not consistent and render different results of same page Sana.odeh@nyu.edu

  7. Styles define a rule which consists of: • Selector: an HTML tag or an arbitrary name Followed by: • A declaration: at least one pair of an attribute and a value separated by a “:”. • Attributes and values should be enclosed within curly braces {}. • You can add more than one attribute but you need to separate them with semi-colon. Selector {attribute: value } ---------------------------------------- Example: H1 {color: red} General Style Sheets syntax in HTML attribute and its value Sana.odeh@nyu.edu Selector

  8. Using two attributes for one Simple selector H1, h2 { color: red ; Font-family: Helvetica, Arial, Times} Sana.odeh@nyu.edu

  9. Using External Style sheet with HTML How to create an external style file: • Create a text file using a simple text editor (WordPad or NotePad) • Style file should have “.css” as an extension • Type all the styles information • Save file • Finally, in your xml document, link to the external style sheet as follow similar to linking with HTML: <link rel=“stylesheet” type=“text/css” href=“externalstyles.css”> Sana.odeh@nyu.edu

  10. CSS:stylefile.css Stylefile.css: p {font-family:arial,sans-serif;color: blue} h1 {24pt; font-weight: bold;color: red} h2 {font-size: 12pt; padding-top: 6pt} tr {font-size: 12pt; padding-top: 6pt;color: silver} Sana.odeh@nyu.edu

  11. Inheritance: -Style properties are passed down from parent tag to children contained within it. -Style applied to body tag for example, will be inherited to all the elements of the page that will occur in between beginning of the <body> and </body> Sana.odeh@nyu.edu

  12. Positioning of elements: You can use styles to control positions elements. Absolute: This technique positions elements according to the browser window. You can use attributes such as "top" and "left" to place an object in the left and top corner of the browser’s window. The top and left attributes can have values in pixels to specify the distance from the top left corner of the browser window to the exact position of the object. left=0 and top=0 places the object on the top and left corner of the window browser.Element {position: absolute; top: 20px; left:10px}Relative position:Positions elements in relation to the content it is within and other elements.Element {position: relative; top: 10px; left:10px} Sana.odeh@nyu.edu

  13. Positioning of elements examples (absolute) p {font-family:arial,sans-serif;color: blue; position: absolute; top: 50px; left: 50px} Sana.odeh@nyu.edu

  14. Measurements used for positioning objects • px stands for pixels • in inches • mm millimeters • cm centimeters Sana.odeh@nyu.edu

  15. h1 {display: block; font-size: 12pt; border: medium dotted red} Boreder location Border Border-top Border-left Border-bottom Border-right Border thickness Thin, medium, 10px border style None, dotted, solid, double, dashed Other options: Border-color:red Border-left:width:3 Border around elements and set thickness Sana.odeh@nyu.edu

  16. Spaces: margins around elements Margin is the amount of invisible spaces between elements h1 {font-size: 12pt; border: medium dotted red; margin-left:5px} Margin location margin-top margin-left margin-bottom margin-right Sana.odeh@nyu.edu

  17. Spaces: padding Padding is the amount of invisible spaces inside border and around the content of an elements h1 {font-size: 12pt;padding:10px} Margin location padding-top padding-left padding-bottom padding-right Sana.odeh@nyu.edu

  18. Element colorsText colorelement background colors (example 6) Text color: Color:silver or #ffffff with no quotations Background: red or #ffffff or url(image.gif) P {font-size: 12pt; padding-top: 6pt;color: white;background:maroon;border:thin solid red} Sana.odeh@nyu.edu

  19. Examples of Attributes used with styles CSS AttributeCSS CodeDescription =========================================================================== Color color="red“ refers to text color background-color background-color="yellow“ creates a background color behind content font-family font-family= courier; sans serif sets font type. You can have more than one font separated by semicolon font-style font-style= italic defines font style "normal; italic font-weightfont-weight: bold applies font formatting Position position: absolute; left:200; top:10 sets element position text-align text-align= center text alignment: center; left and right Display:list-item;list-style element will be part of a list list-style:circle, square, decimal Sana.odeh@nyu.edu

More Related