Resource: CSS Basics/Basics/111-html-css-css-cascading-style-sheets-360
- HTML describes its structures
- CSS descrive its presentation
Selector
p {
color: red;
font-weight: bold;
}
All the <p> to be Red and Bold
Order matters!
p {
color: red;
}
p {
color: blue;
}
blue would overwrite red
Resource: CSS Basics/Basics/115-html-css-css-including-css-600-534
- order matters
- the bottom will overwrite the top
- properties will always overwrite default
Resource: CSS Basics/selectors/117-html-css-css-basic-selectors-600-534
Universal Selector
* {
color: white;
background-color: black;
}
Type Selector
p {
color: white;
background-color: black;
}
h2 {
color: white;
background-color: black;
}
Descendant Selector
p span {
color: white;
background-color: black;
}
h2 span {
color: white;
background-color: black;
}
ID Selector
Only appear once
`#important_headline {
color: white;
background-color: black;
}
Class Selector
.important_headline {
color: white;
background-color: black;
}
Resource: CSS Basics/selectors/192-html-css-css-more-selectors-part-1-600-534 Resource: CSS Basics/selectors/192-html-css-css-more-selectors-part-2-600-534
Pseduo Class
li:first-child {
background-color: orange;
}
first-child element of an individual group
p:first-child {
color: red;
}
p:nth-child(2) {
color: red;
}
nth child
a:link {
color: orange;
}
a:active {
color: orange;
}
*any link clicked on
a:hover {
color: orange;
}
a:focus {
font-size: 1.5em;
}
*Can also use other elements with active, hover, focus
a:visited {
color: orange;
}
*A visited link.
Child Selector
ul > li {
font-size: 1.5em;
background-color: orange;
}
1. Parent > Child
Adjacent Selector
h2 + p {
font-size: 1.5em;
background-color: orange;
}
1. Match for the element on the right of + p
2. Only if h2 is on top of p
Select every h2 that has a class attribute
h2[class] {
color: white;
background-color: purple;
}
1. Select every h2 that has a class attribute
h2[class="foo"] {
color: white;
background-color: purple;
}
1. Select h2 class attribute of foo
h2[class~="foo"] {
color: white;
background-color: purple;
}
1. Select any h2 class attribute of foo
Resource: CSS Basics/Layout/box_model/119-html-css-css-layout-part-1-600-534 Resource: CSS Basics/Layout/box_model/119-html-css-css-layout-part-2-600-534
div tag division
width
sets the width of a page element in pixels or as a percentage
height
sets the height of a page elemnt in pixels or as a percentage
margin
adds space to the exterior of a element
*invisible space that surrounds the element
padding
adds space to the interior of the element
position
determines the method used to place an element on the page
*content flows from top to bottom
- top, right, bottom, left (used to position the element)
- relative (relative to the box the element is in with coordinate)
HTML
`<div id="wrapper">
<div id="myDiv1">
</div>
</div>
CSS Margin & Padding
`#myDiv1 {
background: #ff9900;
width: 300px;
height: 300px;
margin-left: 25px;
margin-top:25px;
}
-or-
`#myDiv1 {
background: #ff9900;
width: 300px;
height: 300px;
margin: 25px 0px 0px 25px;
}
top right bottom left
-or-
`#myDiv1 {
background: #ff9900;
width: 300px;
height: 300px;
margin: 25px 50px;
}
*25px applies to top & bottom
*50px applies to left & right
-or-
`#myDiv1 {
background: #ff9900;
width: 300px;
height: 300px;
margin: 25px;
}
apply margin to all 4 sides
`#wrapper {
padding-top: 25px;
}
moves content down
CSS Position
`#myDiv1 {
background: #ff9900;
width: 300px;
height: 300px;
position: absolute;
top: 25px;
left: 25px;
}
position element according to absolute coordinate
`#wrapper {
padding-top: 25px;
position: relative;
}
anything that is absolutely positioned inside the wrapper to be positioned relative to the wrapper
Resource: CSS Basics/Layout/box_model/129-html-css-css-backgrounds-600-534
background-color
sets the background of a page element to a solid color.
background-image
sets the background of a page element to an image
background-repeat
sets the repeat behavior of a background image
- no-repeat
- repeat-x (repeat on x axis)
- repeat-y (repeat on y axis)
background-position
sets the position of a background image
- center center
- left right (x axis)
- top bottom (y axis)
HTML
`<div id="wrapper">
<div id="myDiv1">
</div>
</div>
`#myDiv1 {
background-color: #777;
backgorund-image: url('../img/fox.png')
background-repeat: no-repeat;
background-position: center center;
}
image repeats
png background is opaque
-or-
`#myDiv1 {
background-color: #777;
backgorund-image: url('../img/fox.png')
background-repeat: no-repeat;
background-position: -120px 100px;
}
-120 push to the left
100 push downwards
-or-
`#myDiv1 {
background: #777 url('../img/fox.png') no-repeat bottom left;
}
Resource: CSS Basics/Layout/box_model/130-html-css-css-borders-600-534
border-style
sets the style or line-quality of a border
- solid
- dotted
- dashed
- double (at least 3px width)
- groove (needs a border color)
- ridge
- inset (sunken in the page)
- outset
border-width
sets the thickness of a border
border-color
sets the color of a border
border
shorthand to consolidate many boreder related properties
border-left
makes border on leftside
HTML
`<div id="wrapper">
<div id="myDiv1">
</div>
</div>
`#myDiv1 {
background-style: solid;
border-width: 5px;
border-color: #FF9900;
}
-or-
`#myDiv1 {
border: 10px solid #FF9900;
border-bottom: 30px dashed #000;
}
Resource: CSS Basics/Layout/page_layout/1133-html-css-css-floats-600-534
Float
Accepts 3 properties:
- left
- right
- none
list-style
block elements
inline elements
- p are inline elements
- will respect floated element
block elements
- will ignore floated element
Example 1
`#myDiv1 {
float: left;
margin: 30px;
}
p {
diplay: inline;
border: none;
}
no line breaks before or after
Example 2
`#myDiv1 {
float: left;
margin: 30px;
}
p {
width: 300px
float: left
margin-right 20px;
}
no line breaks before or after
Page Style
body {
margin: 0;
background: #90ADB7 url('../images/background.png') repeat-x;
font-family: verdana, sans-serif;
font-size: 0.85em
}
`#wrapper{
width: 960px;
margin: 0 auto;
}
margin: 0 auto automatically centers the element on the page
p {
line-height: 1.5em;
color: #333;
}
a:hover {
text-decoration: none;
}
hovers over link
`#nov {
list-style: none
padding: 0;
float: right;
margin: 40px 0;
}
40 top bottom
0 left right
'#nav li {
float: left;
margin-right: 10px;
font-size: 1.4e,;
font-weight: bold;
}
-header
`#header {
font-style: italic;
float: left
margin: 20px 0;
}
`#header h1 {
font-size: 3em;
margin: 0;
}
`#header h2 {
margin: 0;
color: #888;
font-size: 1.2em;
}
-content
`#content {
float: left;
width: 700px;
margin-right: 20px;
}
`#content .post {
background: #FFF;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #CCC;
}
`#content .post h3 {
margin: 0;
color: #333;
}
.pic {
margin-left: 10px;
float: right;
}
-sidebar
`#sidebar {
float: left;
width: 200px;
background: #FFF;
padding: 10px;
border: 2px solid #CCC;
}
`#sidebar h3 {
margin: 0;
}
`#sidebar .section {
border-top: 2px dashed #CCC;
padding-top: 10px;
}
`#sidebar .section:first-child {
border-top: none;
padding: 0;
}