Post on 27-Mar-2015
LIS900C: Style sheet
Thomas Krichel
2003-05-14
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 the default style sheet language.
setting the style sheet language• You can set the default style sheet through http: <META http-equiv="Content-Style-Type"
content="text/css">• Thus the rules for setting the style sheet
language are as follows – If any <META> tag specify the "Content-Style-Type",
the last one determines the default style sheet language.
– Otherwise, if any HTTP headers specify the "Content-Style-Type", the last one in the character stream determines the default style sheet language.
– Otherwise, the default style sheet language is "text/css"
Cascading
• The idea of cascading is that – The style sheet is written as a set of rules– Each rule is read in sequence– If a rule recently read is in contradiction with an earlier
rule, it overrides the earlier rule.
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• You can add a style tag as part of the header <head><style></style></head>• <style> admits the usual suspect attributes.• It also admits the "media" attribute for the intended
media– "screen" is the default value – ttv – projection – handheld – print – braille --embossed– aural – all
• It also admits a "type" attribute, "text/css" is the default
linking to an external style sheet
• This is the best way! Use the same style sheet file for all the pages in your site.
• <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• Remember the media CSS knows about ?• 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" braille,handheld
basic style syntax• selector {property1: value1; property2: value2
… }• selector is a selector (see following slides)
property is the name of a property
value is the value of a property• note colon and semicolon use! • all names and values are case-insensitive• Examples
– h1 { color: grey; text-align: center}– h2,h3 {color: blue}
comments
• You can add comments is the style sheet by enclosing the comment between /* and */.
• This comment syntax comes from the C programming language.
• This technique is especially useful if you want to remove code from your style sheet temporarily.
basic selector
• the basic selector is a comma-separated list of elementary selectors.
• Often, the elementary selectors are HTML tags, e.g.
h1, h2 {text-align: center}
will center all h1 and h2 tag contents• but the selectors can be more precise
more selectors
• * selects any tag.• E selects any tag called E• E F selects any F tag that is in the contents of an
E tag• E > F selects any F tag that is a child of an E
tag. This is more restrictive.• E:first-child selects E when E is the first child of
its enclosing tag• E:link selects an E tag if it is in the contents of
an <a> tag
more selectors
• E:visited select tag E if E if it is in the contents of <A> and the link has been visited.
• E:active, E:hover, E:focus selects tag E during certain user actions.
• E:lang(c) selects tag E if it is in the human language c
• E + F selects any F tag immediately preceded by an E tag
more selectors
• E[a] selects any E element with an attribute "a", whatever the value
• E[a="v"] select any E tag whose "a" attribute value is exactly equal to "v".
• E[a~="v"] selects any tag E whose "a" attribute value is a list of space-separated values, one of which is exactly equal to "v".
• E:first-letter selects the first letter in the content of tag E
more selectors
• E:first-word selects the first word in the contents of tag E
• E[lang|="en"] selects any E tag whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".
• E.m convenient shorthand for E[class~="m"]• E#myid convenient shorthand for E[id="myid"]
classes• Classes selectors use special selectors starting
with a dot.
.class { property1: value1, property2: value2 …}• Recall HTML, when you have set the you can
apply the class
<tag class="class">
will apply all the attributes of the class class to the tag tag. Note that you can place an element into several classes, use a "," to separate them.
tricky examples
• A[rel~="copyright"] • A[href="http://openlib.org/home/krichel"]• DIV > P:first-child • A:focus:hover • P > * > A• div[class~="ny"][id="albany"]
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
• there are five generic names, one should be quoted last as a fall-back – serif --sans-serif --cursive – fantasy --monospace
• example• *:lang(ja-jp) { font-family: "Heisei Mincho W9",
serif }
font properties II
• 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 III
• font-variant: can be either "normal" or "small caps"
• font-weight: can be – a number between 100 for the thinnest and 900 for
the boldest. 400 is the normal.– "normal" --"bold" --"bolder" --"lighter"
• font-stretch: can be any of – ultra-condensed --extra-condensed --condensed – semi-condensed --normal --semi-expanded – expanded --extra-expanded --ultra-expanded
other font properties• There is a whole host of other properties
– unicode-range -- units-per-em– panose1 -- stemh– stemv -- baseline– centerline --mathline– topline --bbox– stroke --ascent– dscent --widths– definitions-src
• There also is a font property that allows you to put several of the previous properties together.
• But all that is not worth learning. Keep fonts simple.
colors• they follow the RGB color model. • expressed as three hex numbers 00 to FF.• The following standard color names are defined
– Black = "#000000" Green = "#008000" – Silver = "#C0C0C0" Lime = "#00FF00" – Gray = "#808080" Olive = "#808000" – White = "#FFFFFF" Yellow = "#FFFF00"– Maroon = "#800000" Navy = "#000080"– Red = "#FF0000" Blue = "#0000FF" – Purple = "#800080" Teal = "#008080"– Fuchsia = "#FF00FF" Aqua = "#00FFFF"
• other names may be supported by browsers.
color & background properties
• color: sets the foreground color of an element. • background-color: gives the color of the
background• background-image: url(URL) places a picture
found at a URL URL. • background-repeat: can take the value "repeat"
(default), "repeat-x", "repeat-y", and "no-repeat".• background-attachment: can take the value of
"fixed" or "scroll" (default) to say if the image scrolls with the viewport (obscure)
background-position properties
• places the background image• can take values
– '0% 0%' to '100% 100%'– 'length length' to put length of offset from top left– mixing both is allowed– top bottom center and left right center can be used
too
text properties I
• letter-spacing: set the spacing between letters, takes a length value or the word 'normal'
• word-spacing: same as for letter-spacing• line-height: sets the distance between several
lines of a tag's contents, – in pt or px numbers– % age (referring to a percentage of current font size)– with a number (referring to a multiplicity of the size of
the text)– 'normal'
text properties II
• 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.
• text-shadow: color horizontal-offset vertical-offset blur-radius. Example span.glow { background: white; color: white; text-
shadow: black 0px 0px 5px; }
text properties III
• float: can be set to "left", "right" and "none". • width: and height: can also be set.• 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".
the box model
• It derives from the assumption that there is a conceptual box around the element contents.
• The total width of the 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 I• border-color: can hold up to four colors,
separated by blanks– one value means: all borders have the same color– two values mean: first number for top and bottom,
second for left and right– three values mean: first sets top, second left and
right, third bottom– four values mean: first sets top, second sets right etc.
• border-width: can hold up to four widths, for example "thin think medium 2mm"
box properties II
• border-top-width, border-bottom-width, border-left-width and border-right-width also exist.
• same properties exists for margin-top, margin-bottom etc and padding-top, padding-bottom etc.
• border-style: can be "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"
• float: can be one of 'left', 'right' or 'none' which is the default. If a float is set, the text near the tag floats on the left or right site of the tag contents. You can use this to create run-in headers.
box properties III
• width: sets the total width of the box• height: sets the total height of the box• both take a dimension or the word 'auto' e.g.
img {width: 100px; height auto}
box properties IV
• position: lets you set control the positioning.• the default is 'static'• if set to 'absolute' the tag is removed from
normal flow and placed using position properties– top: --bottom: --left: --right:
which accept length or percentage values• 'fixed' is the same as 'absolute' but the element
is repeated on every page if paged media is used.
box properties V
• z-index let you set and integer value for a layer on the canvas where the tag will appear.
• Thus if tag 1 has z-index value 1 and tag 2 has z-index value number 2, they are laying on top of each other.
• (this is the same thing as the "layer" from photoshop)
• browser support for this property is limited.
• the clear: property tells the user agent whether to place the current element next to a floating element or on the next line below it.– value 'none' tells the user agent to put contents on
either side of the floating element– value 'left' means that the left side has to stay clear– value 'right' means that the right side has to stay clear– value 'all' means that both sides have to stay clear
box properties VI
box properties VII
• The clip: and overflow: properties let you specify how large the box of contents is
• Example
p {overflow: hidden;
clip: rect(15px, -10px, 5px, 10px)}• when the overflow: property is not set to 'hidden' it will
take no effect.• otherwise, it displays the start of the paragraph in the
rectangular box.• overflow: can also take value "scroll" to add a scroll bar
and "auto" to add a scroll bar only when needed.• browser support is not sure
list properties
• list-style-position: can take the value "inside" or "outside". The latter is the default, the property refers to the position of the list item start marker
• list-style-image: define the bullet point of a list as a graphic, use url(URL) to give the location of the graphic.
• 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" with ordered list.
table properties I
• border-collapse: allows to choose the fundamental table model. It can take two values– 'separate' implies that each cell has its own box. – 'collapse' implies that adjacent cells share the same
border
table properties II
• The properties on this slide are only useful if you choose the separated border model.
• You can set the distance between adjacent cells using the border-spacing: property. Set it to two distances to specify different horizontal and vertical values
• empty-cells: can be set to– 'show' shows empty cells with their border – 'hide' does not show the border around an empty cell
• there are some other table properties
classification properties I
• These are the most powerful ones that CSS has to offer. They invite puerile monkey business.
• display: sets the display type of an tag– 'block' displays the tag contents as a block– 'inline' displays it as inline contents– 'list-item' makes it an item of a list, you can then
attach list properties to it– 'none' does not display it
classification properties II
• the whitespace: property controls the display of white space in a block level tag.– 'normal' collapses white space– 'pre' value similar to <pre> tag– 'nowrap' ignores carriage returns only
generated contents properties• generated contents is, for example, the bullet
appearing in front of a list item.• the content: property can be used with
the :before and :after selectors. Example• p.note:before {content: "note"} will insert the
string "note" before any paragraph in the class 'note'.
• The content can be– a text string– a url(URL) where the contents is to be found– a attr(att) where att is the name of the attribute, the
content of which is being inserted
generated contents properties II
• counter-reset: property resets a counter• counter-increment: increments a counter• counter(counter) uses the counter, example h1:before {counter-increment: chapter_counter;
counter-reset: section_counter;content: "Chapter " counter(chapter_counter) ":"}and then we can use h2 for the sections, of course!
• browser support uncertain!
conclusions
• These are not all the properties.• But I am not sure if I should go into more.
http://openlib.org/home/krichel
Thank you for your attention!