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 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
Introduction to CSS (Continued…) Three methods of using CSS Inline Style Document-level Style External Style
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>
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.
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
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>
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
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
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)
Filter Properties filter: glow(color=name, strength=number) filter: gray( ) filter: alpha(opacity=number) filter: shadow(color=name, direction=degree)