lis901n: style sheet thomas krichel 2003-01-17. style sheets style sheets are the officially...
TRANSCRIPT
LIS901N: 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:
<h1 style="color: blue">I am so blue</h1>• Such a declaration only takes effect for the
element concerned
Document level style
• Add style tag as part of the header<head><style></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 --print– braille --embossed --aural --all
• 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 {property1: value1; property2: value2 … }
• 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
– h1 { color: grey; text-align: center}– h2,h3 {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
h1 em {color: green}
will set the color green if <em> is used inside <h1>, as is <h1>She is <em>new</em>.</h1>
• "*" is the universal selector, it selects all elements.
Other selectors• tag[attribute] selects only tags that have the
name tag and attribute attribute.• tag[attribute="value"] selects only tags that have
the name tag and attribute attribute that takes the value value.
• tag[attribute~="value"] selects only tags that have the name tag and attribute attribute that contains the value value.
classes
• Classes are defined with special selectors starting with a dot.
.class { property1: value1, property2: value2 …}• Later on, you can apply the class
<tag class="class">
will apply all the attributes of the class class to the tag 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: 3cm;
margin-right: 3cm}• Then if a paragraph is an abstract
<p class="quote">This is a quote.</p>• Class names (“quote" our example) are case-
sensitive. Don't ask me why!
important properties
• We will now look at the properties as defined by CSS. These are the 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 --x-small -- 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 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 "thin think medium 2mm"• border-top-width, border-bottom-width, border-
left-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", "upper-roman", "lower-alpha", "upper-alpha"
http://openlib.org/home/krichel
Thank you for your attention!