Download presentation
Presentation is loading. Please wait.
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, 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)
Similar presentations
