1 / 15

Cascading Style Sheet CSS

Cascading Style Sheet CSS. CS1520 Ali Alanjawi. TA Information. Ali Alanjawi Homepage: www.cs.pitt.edu/~alanjawi Email : alanjawi@cs.pitt.edu Office: 5404 Sennott Sq. Tel: x4 1185 Office Hours: M/W: 3-5. Style sheets types. Types: inline , document , external inline : within a tag

levi
Download Presentation

Cascading Style Sheet 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 Sheet CSS CS1520 Ali Alanjawi

  2. TA Information • Ali Alanjawi • Homepage: www.cs.pitt.edu/~alanjawi • Email : alanjawi@cs.pitt.edu • Office: 5404 Sennott Sq. • Tel: x4 1185 • Office Hours: M/W: 3-5

  3. Style sheets types • Types: inline, document, external • inline: within a tag ex: <p style = "color=red;font-family:Arial;font-size:10pt;"> • document: within the header of a document. ex: <head><title>example ...</title> <style type = "text/css"> selector {prop:value;....} .... </style>

  4. external: as a separate file for more than one document. ex: the header must contain a link to the style file.. <link rel="stylesheet" type="text/css“ href="doc_style.css"/> the style file can contain <style type="text/css"> lists of styles.. </style>

  5. Selector • it can be as a named element .. h1 {color:red;} nested named elements b i {font-size=20pt;} • or as a class.. p.red {color=red;} p.big {font-size=20pt;} ... <p class= "red"> ...</p> <p class = "big"> ... </p> * by omitting the element it can be general for any element..

  6. or by using the id.. #midline4 {font-size:12pt;} ... <h3 id = "midline4"> ..... </h3>

  7. font • set the font properties: font-family: Arial font-size: 10pt font-style: italic font-weight: bold font: bold 14pt Arial courier text-decoration: line-through , overline , underline or none.

  8. list change the list style. (disc/square/circle) or even put an image instead. ex: <style type= "text/css"> ul {list-style-type: square} ul ul {list-style-image: url(im2.gif);} ol {list-style-type: upper-roman;} ol ol {list-style-type: upper-alpha;} </style>

  9. color • set the color of an element. use named color "red or blue.." or #hex-number of a color or rgb(255,244,213). ex: <style type= "text/css"> p.color1 {color: #00ffff; background-color: red;} </style> .. <p class = "color1> this is an aqua colored text on a red background. </p>

  10. Background-image • set an image as a background for an element ex: <style type="text/css"> body {background-image: url(image1.jpeg); background-repeat:repeat-y;} </style>

  11. text alignment • set by text indent and align e.g. text-indent: .75in; text-align= right float is used for images and tables to set the text floating around them.. ex: <style type="text/css"> img {float:right} </style> ... <img scr= "img3.jpeg" alt= "image of ..." />

  12. border • set a border style for an element.. ex: <style type="text/css"> p.b12 {border-style:double; bordercolor:blue;} </style> ... <p class= "b12"> .... </p>

  13. Span • Span: set style for a part of a paragraph.. e.g. a word. ex: <style type="text/css"> p.sp1 {font-size:24pt;} </style> ... <p> This is a <span class ="sp1">Big</span> word </p>

  14. Div • Div : set a style for a part of a document, more than one paragraph.. • Ex: <div class = “newd”> <p> ….</p> <p> …</p> </div>

  15. <style type="text/css"> A:visited { color : #00008b; } A:link { color : #00008b; } A:hover { background : #FFFF00;} A.nohover:hover { background : #FFFFFF;} b {font-weight: bold} .banner-top { font-family: arial, verdana, helvetica, sans-serif; font-size: 14px;} .banner-main { font-family: arial, verdana, helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #000066;} Example of a style file .highlight { font-family: arial, verdana, helvetica, sans-serif; font-size: 18px; color: #000066; background: #FFFF00;} .heading { font-family: arial, verdana, helvetica, sans-serif; font-size: 22px; color: #000066; font-weight: bold;} .menu { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px;} .ltext { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px;} .lbtext { font-family: arial, verdana, helvetica, sans-serif; font-size: 16px; font-weight: bold;} .text { font-family: arial, verdana, helvetica, sans-serif; font-size: 14px;} </style>

More Related