Post on 18-Dec-2015
transcript
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS
Cascading Style Sheets
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS
Define style, look and presentation of the website content
The way the content is presented on the page is
determined in presentation rules in a style sheet
layout
background
fonts
margins
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS
HTML
is used to create logical structure of the content
CSS is used to style the structured content
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Styles
Externalreside in a separate style sheet file (.css)
Internallocated inside individual page within <style> tags inside the document’s <head>
Inlinelocated within HTML tags themselves and only apply to the content of that tag
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Style rules Cascade
There are rules to determine which style takes precedence while multiple styles can cover a single element of the page.
When style rules conflict, the laws of the cascade determine how the conflict is settled.
The order of the cascade
1. External
2. Internal
3. Inline
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Style rules Cascade
The closer a rule to the element getting styled, the more power the rule has in the battle of conflicting style rules.
The order of the cascade
1. External
2. Internal
3. Inline
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating CSS
A style rule begins with a selector.
Selector can be a
tag
class
id
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating a style rule for a tag
Redefining the style for a tag gives considerable control, as HTML has a tag for nearly any type of text you need to format.
<body>
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
DW CSS categories
Type
Background
Block
Box
Border
List
Positioning
Extensions
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating a Custom class
Style rule for something that does not have tag as a label.
Custom name for a style when you create a class.
.myclassDo not create classes for something that has a logical tag, like heading <h1, h2, h3, etc>
You can simply redefine one of the heading tags.
HTML is used to create logical structure of the contentCSS used to style the structured content
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating a Custom class
Class is reusable
Many different elements on a page can be assigned to the
same class
Class has a name
A period (.) precedes a class selector
Named elements can be targeted with CSS rules
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating a Custom class
Class style rule must be applied to the
document
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating advanced selectors (IDs, pseudo-class selectors)
An ID can only be used once per page
IDs are unique
Used in addition to CSS rules
A hash or pound sign (#) precedes an id selector.
#subnav
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Creating advanced selectors (IDs, pseudo-class selectors)
ID is another method for assigning names
ID style rule must be applied to the
document
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Pseudo-class selectors
Names so because pseudo-states don’t actually exist in the document
The user must do something to trigger the pseudo-class,such as
Visit a link
Hover over a link
Browse over a visited link
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Pseudo-class selectors L-V-H-A order
LoVeHAte
A: linkA: visitedA: hoverA: active
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
Verification of styles
Previewing in a variety of browsers and browser versions
Sometimes the style rules conflict and you get enexpected results
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Box model
DIV
division
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Box model
Margin
Border
Padding
Content
CSS set rulesFor each element
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Position and float
Static
Relative
Inherit
Absolute
Fixed
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Position and float
Static
Relative
Inherit
Absolute
Fixed
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Float
Left
Right
None
Inherit
AD 206 - Intermediate Computer Graphics | spring 2008 | Daria Tsoupikova | School of Art and Design | UIC
CSS for layout
Elements in HTML can nest.
Inside the body tag might be a div (division) named content with a div named newitem nested inside.
Each of these nested elements exist in a parent-child relationship that allows CSS properties to be inherited.
The child elements are descendants of the parent and inherit properties from them.