1 / 11

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS). Introduction to CSS Inline Style Document-Level or Embedded Style External Style Font Properties Color and Background Properties Text Properties Filter Properties. Introduction to CSS.

merlet
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) Introduction to CSS Inline Style Document-Level or Embedded Style External Style Font Properties Color and Background Properties Text Properties Filter Properties

  2. Introduction to CSS • Style Sheet is an advanced way of presenting things; It embellishes the appearance of tags. • What makes CSS better? • Management is easier. • CSS effects multiple tags and documents. Thus, reducing writing extra code. • Access to features that HTML doesn’t allow us to do

  3. Introduction to CSS (Continued…) • Three methods of using CSS • Inline Style • Document-level Style • External Style

  4. Inline Style • Uses style attribute, list of style properties, and its values with any tag. • Allows maximum control over precise tag • Difficult to maintain • Usage: <tagname style=“property1:value1; property2:value2”> <h1 style=“color: blue;text-indent:20px;”>header</h1>

  5. Document-Level or Embedded Style • Enclosed between the head tag, type starting <style> and ending </style> tag • Allows control of full document. Effects multiple tags of the same tag element, except for tags that contain inline style.

  6. Document-Level or Embedded Style • tagname {property1:value1;property2:value2;} <head> <style type=“text/css”> <!-- h1 {color:red;text-indent:20px;} --> </style> </head> <body> <h1>header </h1> <h1>header again</h1> </body> Effects both text since it uses h1 tag

  7. External Style • Allows one Style Sheet to effect multiple documents • Write Style Sheet in a separate file and connect to it. Save it with .css extension. • Use link tag to connect to External Style Sheet <head> <link type=“text/CSS” rel=“Stylesheet” href=“file.css”> </head>

  8. Font Properties • font-family: name • font-style: normal, italics, oblique • font-weight: normal, bolder, lighter, 100 - 900 • font-size: xx-small, x-small, etc. (numbers, %) • font: shorthand for all the font properties mentioned above

  9. Color and Background Properties • color: name, hexadecimal value, rgb(rv, gv, bv) • background-color: name, hexadecimal value, rgb(rv, gv, bv) • background-image: url(filename.gif”) • background-repeat: repeat-x, repeat-y, repeat, none • background: shorthand for all the properties in this category

  10. Text Properties • text-decoration: underline, line-through, none • text-transform: capitalize, uppercase, lowercase • text-align: right, left, center • text-indent: number • line-height: number • vertical-align: top, bottom, middle, etc. (percentage value)

  11. Filter Properties • filter: glow(color=name, strength=number) • filter: gray( ) • filter: alpha(opacity=number) • filter: shadow(color=name, direction=degree)

More Related