LIS 901 N Style sheet Thomas Krichel 2003

Style sheets • Style sheets are the officially sanctioned way to add style to

inline style • You can add a style attribute to a tag <tag style="style">

Document level style • Add style tag as part of the header <head><style></head> •

linking to an external style sheet • <link rel=stylesheet type="text/css" href="URL"> • where URL

importing an external style sheet • Within a style sheet, for example the contents

media dependent styles • CSS knows about the following media – tty --tv --projection

basic style syntax • selector {property 1: value 1; property 2: value 2 …

more selectors • You can require to apply a style only if one element

Other selectors • tag[attribute] selects only tags that have the name tag and attribute.

classes • Classes are defined with special selectors starting with a dot. . class

style classes • You can attach classes to elements by appending the class to

important properties • We will now look at the properties as defined by CSS.

font properties I • font-family: accepts a comma-separated list of font names • font-size:

font properties II • font-variant: can be either "normal" or "small caps" • font-weight:

color & background properties • background-repeat: can take the value "repeat" (default), "repeat-x", "repeat-y",

text properties I • line-height: sets the distance between several lines of a tag's

text properties II • vertical-align: can take the values "baseline", "middle", "sub", "super", "text-top",

box properties • they derive from the assumption that there is a conceptual box

box properties II • border-color: can hold up to four colors, separated by blanks

list properties • list-style-position: can take the value "inside" or "outside". • list-style-image: define

http: //openlib. org/home/krichel Thank you for your attention!

Slides: 22

Download presentation

LIS 901 N: Style sheet Thomas Krichel 2003 -01 -17

Style sheets • Style sheets are the officially sanctioned way to add style to your document • We will cover Cascading Style Sheets CSS version 2. • This is a new lecture.

inline style • You can add a style attribute to a tag <tag style="style"> where style is a style specification • Example: <h 1 style="color: blue">I am so blue</h 1> • Such a declaration only takes effect for the element concerned

Document level style • Add style tag as part of the header <head><style></head> • <style> admits the attributes – dir – lang – media • "screen" is the default • other values are available – title – type • always "text/css"

linking to an external style sheet • <link rel=stylesheet type="text/css" href="URL"> • where URL is a URL. • The link tag must appear in the <head>, it can not appear in the <body>, sorry!

importing an external style sheet • Within a style sheet, for example the contents of a <style> tag, you can import another file using the @import command @import url(http: //www. art. org/kitsch. css); • or @import "http: //www. art. org/kitsch. css"; • these two ways appear to be equivalent

media dependent styles • CSS knows about the following media – tty --tv --projection --handheld – braille --embossed --aural --all --print • Using @import, you can import different types for different media @import "URL" medialist where medialist is a list of one or more media, separated by comma • Example @import “challenged. css" embossed, braille

basic style syntax • selector {property 1: value 1; property 2: value 2 … } • selector is a comma-separated list of tag names property is the name of a property value is the value of a property • all names and values are case-insensitive • Examples – h 1 { color: grey; text-align: center} – h 2, h 3 {color: blue}

more selectors • You can require to apply a style only if one element appers within another, by listing several tags without comma separation. • Example h 1 em {color: green} will set the color green if <em> is used inside <h 1>, as is <h 1>She is <em>new</em>. </h 1> • "*" is the universal selector, it selects all elements.

Other selectors • tag[attribute] selects only tags that have the name tag and attribute. • tag[attribute="value"] selects only tags that have the name tag and attribute that takes the value. • tag[attribute~="value"] selects only tags that have the name tag and attribute that contains the value.

classes • Classes are defined with special selectors starting with a dot. . class { property 1: value 1, property 2: value 2 …} • Later on, you can apply the class <tag class="class"> will apply all the attributes of the class to the tag.

style classes • You can attach classes to elements by appending the class to the selector. Suppose you want to define a paragraph in quote style • p. quote {font-style: italic; margin-left: 3 cm; margin-right: 3 cm} • Then if a paragraph is an abstract <p class="quote">This is a quote. </p> • Class names (“quote" our example) are casesensitive. Don't ask me why!

important properties • We will now look at the properties as defined by CSS. These are things that you can set using CSS. • We group properties into six groups – – – fonts colors, and background text boxes and layout lists tag classification • We can not be exhaustive here

font properties I • font-family: accepts a comma-separated list of font names • font-size: accepts sizes as npt, n%, +npt, where n is a number, or some sizes like – xx-small -- medium – large --x-large -- xx-large --larger --smaller incremental font sizes may not be handled properly by the browser. • font-style: can be either "italic", "oblique" or "normal"

font properties II • font-variant: can be either "normal" or "small caps" • font-weight: is a number between 100 for the thinnest and 900 for the boldest. 400 is the normal • (there are other properties that are not well supported by browsers) • (Thomas advises to go easy on fonts. )

color & background properties • background-repeat: can take the value "repeat" (default), "repeat-x", "repeat-y", and "no-repeat". • background-color: gives the color of the background • background-image: url(URL) places a picture found at a URL. • color: sets the foreground color of an element.

text properties I • line-height: sets the distance between several lines of a tag's contents, in pt, %, with a number or the word "normal" • text-align: can take the values "left" "right" "center" and "justify". • text-decoration: can take the values "underline", "overline", "line-through" and "blink". • text-indent: , margin-left: take length units but are best expressed in the relative "em" unit. • float: can be set to "left", "right" and "none". • width: and height: can also be set.

text properties II • vertical-align: can take the values "baseline", "middle", "sub", "super", "text-top", "text-bottom" "top" "bottom", as well as percentages. • text-transform: can take the value "uppercase", "lowercase", "capitalize" and "none".

box properties • they derive from the assumption that there is a conceptual box around the element contents • the total width of a box is the sum of – – left and right margin left and right borders left and right padding the width of the box' contents • A similar reasoning holds for the height of a box.

box properties II • border-color: can hold up to four colors, separated by blanks • border-with: can hold up to four widths, for example "think medium 2 mm" • border-top-width, border-bottom-width, borderleft-width and border-right-width also exist. • same properties exists for margin- and padding • border-style: can be "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset" • height and width can also be set

list properties • list-style-position: can take the value "inside" or "outside". • list-style-image: define the bullet point of a list. • list-style-property: – takes the values "disc", "circle", "square", "none" with an unordered list – takes the value "decimal", "lower-roman", "upperroman", "lower-alpha", "upper-alpha"

http: //openlib. org/home/krichel Thank you for your attention!