Cascading Style Sheets CSS

What is it? Another file format ! its not like html Describes the looks of “selectors” in a.css file (example.css) in the of html in the tag in the style attribute of almost any html tag (style=””)

Why ANOTHER format? Conceptual History Purpose more flexible than html works like a tree...

Styles The basic idea: Classify text by its appearance give common classifications a name use the name to refer to them and apply attributes to them, such as type size

CSS Concept Documents are formatted based on the meaning Assign the look for a meaning not the content! CSS is used outside HTML too! Concept is from the Publishing World

Style Sheets “Styles” or Style sheets are commonplace in publishing software Print industry used Style Sheets to streamline workflow A “Style” is shorthand for a set of attributes, such as typeface (font,) size, spacing, kerning

Cascading Style Sheets Used in computer style sheets for publishing software (initially) Vague incomplete styles could allow another style’s attributes to be used Allow more complex mixing of styles Saves work, you don’t have to create a new style for each minor variation

Inheritance Styles based upon existing styles NOT directly in CSS, but some software (Adobe PageMaker) it is Essentially, it is an automated “dynamic” template system COPY some style’s attributes then add & override new attributes

Inheritance When a conflict occurs, the child wins Tree structure, similar to a family tree- properties are passed down; “inherited” red parent + bold child = red & bold child red parent + green child = green child

Cascading a “Cascade” of style attributes passes on down the tree to the decedents Style is calculated based on the child’s position in the whole family tree The resulting style does not exist as a “style” but as a mix of all the other styles above it in the tree

Cascade vs Inherit +=

Selectors terminology to remember! Selectors “select” items on the page such as: all H1 tags & all H2 tags 1 tag with the ID “fred” all tags classified “cats”

CSS use in html Internally … …css… … Externally

Selectors = What/how to “select” the tags you want to apply style attributes to 3 CSS Selectors tagname (aka element name).classname (class attribute) #idname (id attribute) 3 ways to apply a style

SillyPhrase Animal The fox jumped over the lazy dog

Selectors: (3 ways to apply a style) IDs - can only be used ONCE per HTML file Class - can be used many times tag - all tag, so all tags could be made italic! SillyPhrase Animal The fox jumped over the lazy dog

Attribute / Property list is similar to Java/C/JavaScript in syntax Selector {property: value;} is a tagname, #idname, or.classname /* block comments */ Selector1 selector2 selector3 {…} CSS Syntax

The fox jumped over the lazy dog SillyPhrase Animal The fox jumped over the lazy dog.animal { color: black;font-weight: bold;} #sillyphrase { color: gray; }

SillyPhrase Animal The fox jumped over the lazy dog.animals is applied to everything that has the class= “animals” #sillyphase could be made RED, and then the fox and dog (animals) would inherit the RED color.animals are black, no matter what color #sillyphrase is The fox jumped over the lazy dog

Typical use classes are the most flexible often multiple situations are used:.classname h1 {…} class “.classname” can have any number of tags or classes inside the tag-- inside one of those an will still match

Backgrounds background-color: #ff00ff background-image: url( ) background-repeat: repeat-x, repeat- y, repeat, no-repeat, inherit background-position: x y; background-attachment: scroll, fixed

Relative Units Save YOU time long-term % percentage of available size em 1= size of 1 (one) line of parent’s text ex 1= half of em = 0.5 em

example h1{ font-size: 0.5em; } will be HALF the size of whatever the parent’s font size is works on everything; but is text height based

pseudo-class selectors selector:pseudoClass used for generic situations and events :link :visited :hover :active :focus :first-child :lang etc a:visited anchor tags the user clicked on before

text pseudo-element selectors :before = before the content :after = after the content {content: “text”} = lets you insert text! :first-letter :first-line

event pseudo-element selectors :visited (visited anchor link) :active (working anchor link) :hover (mouse over) :focus (forms)

Example.myclass:hover the pseudo-class is PART of the selector this example is also a “trick” The 1 st selector’s :hover event will still find the 2 nd selector and change those! A mouse over a parent could change just the children (the 2 nd selector)

Example.myclass:hover the pseudo-class is PART of the selector this example is also a “trick” The 1 st selector’s :hover event will still find the 2 nd selector and change those! A mouse over a parent could change just the children (the 2 nd selector)

See the example CSS web page on the class website. Use CSS references / tools Most HTML tags come with built-in properties, which you can override with CSS, like making Use LIVE CSS editor to learn (Firefox) Next…