View
5
Download
0
Category
Preview:
Citation preview
3/7/2013
1
CSS - Cascading Stylesheet
What is CSS?
3/7/2013
2
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles are normally stored in Style Sheets
Styles were added to HTML 4.0 to solve a problem
Can apply to multiple sites
External Style Sheets can save you a lot of work
External Style Sheets are stored in CSS files
Multiple style definitions will cascade into one
What is CSS?
3/7/2013
3
Cascading Order What style will be used when there is more than
one style specified for an HTML element? Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. Browser default 2. External style sheet 3. Internal style sheet (inside the <head> tag) 4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).
Why CSS?
3/7/2013
4
To separate presentation from content
Without CSS: content and presentation are combined
Content +
Presentation
Example:
<font color=“red”>
Welcome to the world
of CSS
</font>
Code for
Presentation
Content
Why CSS?
3/7/2013
5
With CSS: content and presentation are separated
Content
HTML
Presentation
CSS
Why CSS?
3/7/2013
6
By using CSS, the same content can be presented in different appearances
http://www.csszengarden.com/
Content (HTML)
Presentation 1 (CSS)
Presentation 2 (CSS)
Presentation 3 (CSS)
3/7/2013
7
Why CSS? Separating presentation from contents
Example: http://www.csszengarden.com/zengarden-sample.html
3/7/2013
8
Why CSS? Separating presentation from contents
Example:
3/7/2013
9
Why CSS? Separating presentation from contents
Example:
3/7/2013
10
Why CSS? Separating presentation from contents
Example:
Why CSS?
3/7/2013
11
To standardize the coding style
In HTML, different objects have different styles of coding or different property for the same presentation settings.
Example:
Setting the color of table borders and text are different
<table border=“1” bordercolor=“red”>
………..
</table>
<font color=“red”>
……………..
</font>
Why CSS?
3/7/2013
12
An HTML tag has limited attributes
Example:
What HTML CAN do What HTML CAN’T do
Setting borders individually
Why CSS?
3/7/2013
13
What HTML CAN do What HTML CAN’T do
Putting icon on a button
Setting colors, font, etc of
form elements
Cascading Stylesheet
3/7/2013
14
Activity 1
External/Linked Stylesheet
An external style sheet is nothing more than a text file containing all your CSS rules
As in Activity 01
Anatomy of Style
3/7/2013
15
Internal/Embedded Stylesheets - a collection of styles that's part of the Web page's code, using <style> tag, located between <head> tag
Anatomy of Style 16
3/7/2013
Internal/Embedded Stylesheets – continue
The <style> tag is HTML, not CSS. But its job is to tell the Web browser that the information contained within the tags is CSS code and not HTML
Activity 2
Anatomy of Style 17
3/7/2013
Inline Stylesheets
Typing the CSS rule directly into the HTML tag <h1 style="color: red;">
<p style="color: sienna; margin-left: 20px">
Inline styles offer none of the time-and bandwidth-saving benefits of style sheets, so the pros hardly ever use them
Last option when have to edit a single CSS rule without wanting to edit the whole CSS stylesheet
Activity 03
Activity 04 – Tutorial3a
Anatomy of Style 18
3/7/2013
CSS Syntax
3/7/2013
19
The CSS syntax is made up of three parts:
a selector, a property and a value:
selector {property: value}
body {color: black}
p {font-family: "sans serif"}
p {text-align:center;color:red}
p {
text-align: center;
color: black;
font-family: arial
}
CSS Selectors
3/7/2013
20
Tag Selectors: Page-Wide Styling
Efficient styling tools
Apply to the whole html doc.
Previous examples/activities are using tag selector except inline
Class Selectors: Pinpoint Control
When you don't want every instance of a paragraph or heading tag to get the same styling, CSS lets you create a class selector
CSS Selectors - cont
3/7/2013
21
ID Selectors: Specific Page Elements
CSS reserves the ID selector for identifying a unique part of a page like a banner, navigation bar, or the main content area
ID or Class?
To use a style several times on a page, you must use classes
Use IDs to identify sections that occur only once per page
Your CSS is still valid if you not followed the rules, but it’s an accepted standard
CSS - ID Selectors
3/7/2013
22
To define styles, the selector names use prefix # character followed by the preferred name
To apply the styles, set the ID attribute with the name
Define
#red {color:red;}
Apply
<b id=“red”> This is a red bold text </b>
CSS - Class Selectors
3/7/2013
23
To define styles, the selector names use prefix . (dot) character followed by the preferred name
To apply the styles, set the CLASS attribute with the name
Define
p.first{ color: blue; }
p.second{ color: red; }
Apply
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!</p>
CSS - Tag-Spesific Selector
3/7/2013
24
Style can only be applied to elements which defined it.
Selector name:
tag_name.style_name or tag_name#style_name
Define
font.redbold {color:red; font-weight:bold;}
Apply
<font class=“redbold”> This is a red bold text</font>
<b class=“redbold”> redbold style has no effect here</b>
CSS - Grouping Selector
3/7/2013
25
• Define the same styles to a group of tags.
Define
h1,h2,h3 {background-color: orange;}
/*sets the background color of all h1,h2,and h3 elements to orange */
CSS - Contextual Selector
3/7/2013
26
• Applies to descendent tags
Example
Define
p b{color:red; text-decoration: underline;}
Apply
<b>CSS has no effect here</b>
<p>CSS has no effect here</p>
<p>
<b>CSS has effect here. This is a red underlined text </b>
</p>
CSS - Pseudo-class Selector
3/7/2013
27
Ability to apply certain styling rules on specific states of an element – an <a> tag for hyperlink
a:link - specifies the unvisited links
a:hover - specifies the link as mouse cursor is hovering on it
a:active - specifies the link as it is being clicked
a:visited - specifies the link after being clicked
CSS - Pseudo-class Selector
3/7/2013
28
Example Define
a:link {font-weight: bold;} /* makes unvisited links bold */ a:hover {text-transform: uppercase;} /* makes links uppercase as mouse cursor is hovering on*/ a:active {color: red;} /* makes links red as they are clicked */ a:visited {text-decoration: underline;} /* makes visited links underlined*/
3/7/2013
29
Only for block level elements – start at new line
Inline elements – don’t start at new line
Reference:
Inline elements - http://www.htmlhelp.com/reference/html40/inline.html
Block-level elements –
http://www.htmlhelp.com/reference/html40/block.html
Pseudo elements
http://www.w3schools.com/css/css_pseudo_elements.asp
:first-letter, :first-line, :before & :after
CSS – Pseudo Elements
3/7/2013
30
:first-line properties:
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
CSS – Pseudo Elements
3/7/2013
31
:first-letter properties: font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if 'float' is 'none') text-transform line-height float clear
CSS – Pseudo Elements
CSS - Measurement
3/7/2013
32
Unit
Description
Example
%
Defines a measurement as a percentage relative to another value, typically an enclosing element.
p {font-size:
14pt; line-
height:
150%;}
cm
Defines a measurement in centimeters.
div {margin-
bottom: 1cm;}
em
A relative measurement for the height of a font in em spaces. Because an em unit is equivalent to the size of a given font, if you assign a font to 12pt, each "em" unit would be 12pt; thus, 2em would be 24pt.
p {letter-
spacing:
5em;}
ex
This value defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x.
p {font-size:
14pt; line-
height: 2ex;}
CSS - Properties
3/7/2013
33
Properties for CSS element tag (font, text, bg)
http://www.blooberry.com/indexdot/css/index.html
font-family
font-size
font-size-adjust
font-size-stretch
font-style
font-variant
font-weight
text-align
text-decoration
text-indent
text-shadow
text-transform
background-attachment
background-color
background-image
background-position
background-repeat
3/7/2013
34
Activity 6: Tutorial – CSS Selectors
CSS – Box Model
3/7/2013
35
CSS1 – requires that borders be available for any html document element (p, h1, img, table etc.)
Even <hr /> have box!!!!
Border have various style such as color, width and border-style
CSS – Box Model
3/7/2013
36
Padding is the space between the content and the content's border.
Border is the line that's drawn around each edge of the box. You can have a border around all four sides, on just a single side, or any combination of sides,
The same rules also apply with border width. Unlike HTML table, there is no cell spacing as box model only
count for one cell for each HTML tag that can be presented in the html document
Background-color fills the space inside the border, including the padding area.
Margin is what separates one tag from another. The space that commonly appears between the tops and bottoms of paragraphs of text on a Web page, for example, is the margin.
CSS - Properties
3/7/2013
37
Properties for CSS element tag (border)
http://www.blooberry.com/indexdot/css/index.html
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
CSS – Box Model
3/7/2013
38
3/7/2013
39
Coming soon….
CSS – Positioning <div> & <span>
Recommended