LIS901N: Style sheet Thomas Krichel 2003-01-17
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.
Mar 27, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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!
Related Documents
