Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a...
-
Upload
robyn-palmer -
Category
Documents
-
view
225 -
download
0
Transcript of Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a...
Lesson 03 // Cascading Style Sheets
CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a markup language that lets you control how your web page looks.
How to access elements in CSS?
By element p {}
div {}
span {}
By id p#container {}
div#header {}
By class li.Items {}
div.footer {}
Nested div div#container {}
div#footer p#first {}
In other words:
HTML
<li class=“container”></li>
REFERNECED IN CSS:li.container { }li = element. = dot (references elements by class)container = class name
<li id=“container”></li>
li#container { }li = element# = pound (references elements by id)container = id name
In other words:
HTML
<li class=“container”><a href=“http://www.msu.edu/”></a></li>
REFERNECED IN CSS:
li.container a{ }
li = element. = dotcontainer = class name = space (refers to nested elements)a = element (nested inside the li element)
HTML
<div class=“container” id=“topbox”>
<h1>Hello</h1></div><div class=“container” id=“middlebox”>
<h1>Hello</h1></div><div class=“container” id=“bottombox”>
<h1>Hello</h1></div>
REFERNECED IN CSS:div.container h1 {
font-size: 12px;}
Which of the h1s will have a font-size of 12px?
div#topbox h1 {font-size: 16px;
}
Which of the h1s will have a font-size of 16px?
REPRESENT THE FOLLOWING CSS IN HTML
div.container span#topbox { }
IS THIS HOW THE BELOW CSS IS WRITTEN IN HTML?
div.container div#topbox h1{ }
<div class=“container” id=“topbox”>
<h1>Hello</h1></div>
CSS HTML
VISUALS
font-size
font-weight
font-family
font-style
color
background-color
text-decoration
border-color
border-style
border-left
border-right
list-style-type
list-style
text-align etc
POSITION
float
clear
position
padding
margin
border
display
width
height
etc
Examples of CSS Properties
<ul><li class="stylinglist">About
Us</li><li
class="stylinglist">Products</li><li
class="stylinglist">Services</li><li
class="stylinglist">Research</li><li class="stylinglist">Contact
Us</li></ul>
HTML
li.stylinglist {float: left;padding: 5px 0;width: 120px;background-color: #990066;border-left: 1px dotted #ffffff;list-style-type: none;text-align: center;
}
CSS
li.stylinglist {float: left;list-style-type: none;width: 120px;background-color: #990066;padding: 5px 0;border-left: 1px dotted #ffffff;text-align: center;
}
In the previous example we used text-align to center each word within the 120px list width:
Centering inline and block-level elements:
text-align applies on block containers containing inline-level content. Here the block container is li to which we applied text-align:center to center text (inline-level content) within the block li.
Other text-align values besides center:left, right, justify
text-align could also apply on:• a div (block) containing img (inline)• p (block) containing text (inline)• th (block) containing words (inline) etc
div#container {width: 700px;height: 700px;margin: 0 auto;background-color: #ff0099;
}
Block-level elements however, don’t understand text-align. In order to center them we use margin: 0 auto; on block element itself, not on its parent.
div#bluebox {width: 500px;height: 300px;background-color: #33cccc;padding: 20px;word-spacing: 15px;
}
What about word-spacing? It is applied on ALL elements (block and inline) and specifies spacing behavior between words and other inline-level content, such as images.
15px
P.S. text-align and word-spacing are examples of “inherited” styling attributes.
Ex, If a p with word-spacing nests a span without, the span inherits the word-spacing styling attribute of p.
Examples of properties that can come in shorthand: font:
body {font: bold italic 12px Arial, Helvetica, sans-serif;
}
body {font-weight: bold;font-style: italic;font-size: 12px;font-family: Arial, Helvetica, sans-serif;
}
Examples of properties that can come in shorthand: background:
body {background: #000000 url(images/smile.jpg) no-repeat;
}
body {background-color: #000000;background-image: url(images/smile.jpg);background-repeat: no-repeat;
}
Examples of properties that can come in shorthand: border:
div#container {border: 3px solid green;
}
div#container {border-width: 3px;border-style: solid;border-color: green;
}
Examples of properties that can come in shorthand: list-style:
li.stylinglist {list-style: circle outside;
}
li.stlylinglist {list-style-type: circle;list-style-position: outside;
}
The a element in CSS:
a {font-size: 12px;
}
a:link {color: red;
}
a:visited {color: green;
}
a:hover {color: blue;
}
a:active {color: maroon;
}
a:link = unvisited link
a:visited = visited link
a:hover = mouse over link
a:active = selected link
Different formats for margin/padding representation:
margin: 5px; Applies to all 4 edges
margin: 5px 10px; Applies to top & bottom left & right
margin: 5px 20px 7px; Applies to top left & right bottom
margin: 5px 15px 0 12px; Applies to top right bottom left
P.S. Same for padding.You can choose to be more specific:
margin-top: 5px;margin-right: 10px;padding-left: 7px;etc
The Box Model:
ma
rgin
bor
de
rp
add
ing
• If padding has 0 width, padding edge same as div edge
• If border has 0 width, border edge same as padding edge
• If margin has 0 width, margin edge same as border edge
• The width & height dimensions refer to the inner most box
width
heig
ht
Inheritance:
Under Firefox/Preferences/Content and Safari/Preferences/Appearance are the default font and size that the browser is using.
If font and size not specified in CSS, the text in your webpage inherits those specified in the browser’s default.
In the case of nested elements, the child sometimes inherits properties from its parent, like font, font-size, color, and so forth, unless its own are specified in CSS.
Check W3C for a list of all the properties, including their inheritance http://www.w3.org/TR/CSS2/propidx.html