css.md

CSS

Basics

Resource: CSS Basics/Basics/111-html-css-css-cascading-style-sheets-360

1. HTML describes its structures
2. 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

1. order matters
2. the bottom will overwrite the top
3. properties will always overwrite default

---

Selectors

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

---

Box Model

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

---

Background

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;
}

---

Borders

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;
}

---

Page Layout (Float)

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

---

CSS Project

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;
}