CSS -Defines How HTML is Displayed

#goon {background-image: url("pigs.jpg"); background-attachment: fixed;}

"attachment" property sets whether background image is fixed or scrolls with the page. Other values include: scroll

#goon {background-image: url("pigs.jpg"); background-repeat: no-repeat; background-position: right top;}

"positions" the background image to the top-right most area of the web page Values include: combinations of "top, bottom, right, center..." and x% y% (to set x/y coordinates)

block element

A block element is an element that takes up the full width available, and has a line break before and after it. Examples: <h1> <p> <li> <div> element can be set to block with "display: block"

The CSS box model

A box that wraps around a CSS element. from outermost: margin, border, padding, content (HTML)

#goon {background-image: url("corn.jpg"); background-repeat: no-repeat;}

Allows the background image to not be repeated to fill whole page view.

<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> </ul> ul { list-style-type: none; margin: 0; padding: 0;}

Create a Navigation Bar: Use <ul> and <li> elements to create a list. Remove bullets, margin, and padding. Can orient Vertically (a {display:block; width: 80px;} or Horizontally (inline [li {display: inline;}] or floating [li {float: left;} a {display:block; width: 60px})

#home { left: 0px; width: 46px; background: url('img_navsprites.gif') 0 0;}

Create an image map by separating one image into parts #home {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px #home {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)

static positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.

#thatThingINeededToStyle {color: blue; font-size: 24px;} /* HTML Selected: <span id="thatThingINeededToStyle"> */

ID selectors are used to select only a single item on a page. (use # symbol) Like the term ("identification") indicates, ID selectors will ONLY select the first element with a matching ID.

Decendent Selector div p {...;}

Matches all elements that are decendents of specified elements. ex) picks all <p> elements within <div> elements.

a:hover {text-decoration: underline;}

a pseudo selector: Will underline all links when the user puts their mouse over them

p:first-child {color:blue;}

The :first-child pseudo-class matches a specified element that is the first child of another element. In the example, The selector matches any <p> element that is the first child of any element p:last-child also works for last child of an element

#goon {cursor: auto;}

The cursor property makes the user's cursor appear a specified way when it is on the element. Other values: crosshair, move, pointer, progress, s-resize.

div {position: absolute( or relative) ( or fixed)}

absolute (element positions itself relative to its parent element or html) relative ( tells element to move relative to where it would be if it was static) fixed (keeps element in same location on screen regardless if you scroll up/down) (cool!!!)

.goon {position: absolute; left: 100px; top: 50px;}

absolutely placed element in relation to its first parent element that is not "static", or to the whole html page. The document and other elements behave like the absolutely positioned element does not exist. can overlap.

p:first-child i {color:blue;}

The selector matches all <i> elements in <p> elements that are the first child of another element

p i:first-child {color:blue;}

The selector matches the first <i> element in all <p> elements

.goon {vertical-align: bottom;}

The vertical-align property sets the vertical alignment, like top, bottom, or middle.

#gooner {clear: both;}

Use to avoid elements after the floating element to follow around it (they appear on the next line). The clear property specifies on which sides of an element floating elements are not allowed to float. Other values: left, right, both, none.

p::first-letter { color: red; font-variant: small-caps;}

Used to add a special style to the first letter of a text. Only can be applied to block elements. first-line can replace to style first line of text.

.goon {text-indent: 50px;}

Used to indent the first sentence of a paragraph

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Used to make Inline styles. Within HTML (just an attribute). For styling specific HTML elements

<head> <style> body {background-color: linen;} </style> </head>

Used to make internal style sheet. CSS code is put within "style" elements within the HTML file

#home a:hover { background: url('img_navsprites_hover.gif') 0 -45px;} #prev a:hover { background: url('img_navsprites_hover.gif') -47px -45px;}

Used to separate one image into multiple parts. When hover over one part of the image, only that part will change

.goon {text-decoration: underlined;}

Used to set or remove decorations from text. Other values: none, overline, line-through,

.jumbo {text-size: 1000px;}

You can also select HTML elements by their Class name. Unlike ID selectors, Class selectors select all elements with a matching class. Use a period (.) to use class

div { height: 50px; width: 100px; border: 2px solid black; border-radius: 5px; display: inline-block;}

makes a box with width=100, height=50 the border around the box is solid black with thickness of 2 the border radius value of 5 makes box edges slightly rounded display: inline-block makes multiple boxes line up next to each other (horizontally, not vertically)

h1 {font-size: 24px; font-weight: bold;}

makes all <h1> headers big and bold

#mush {background-color: #FF0000;}

makes all elements with id "mush" have a color #FF0000. this is a certain color encoded by 2 letters followed by 4 numbers

div {margin: auto;}

makes element centered

.goon {list-style-image: url("donkey.jpg");}

makes the "bullet point" of a list into a picture

.goon {list-style-type: circle;}

makes the specified list have "circle bullets" Other values: square, upper-roman, lower-alpha. the later are for ordered lists only. prior for unordered lists.

Combinator

something that explains the relationship between the selectors. There are four different combinators in CSS3: decendent selector, child selector, adjacent sibling selector, general sibling selector.

selector: pseudo-class {property: value;}

syntax of using pseudo-class. A pseudo-class is used to define a special state of an element. Pseudo-classes can also be combined with classes: selector .class: pseudo-class {property:value;}

div {clear: (right/left/both)

tells element to stay clear and separate from other elements either stay clear to left, right, or both

#goon { width: 20px; height: 20px; overflow: scroll;}

the overflow property tells the browser what to do if content overflows an element's box. Other values: visible (default; comes outside box), hidden, scroll, auto.

.goon {position: absolute; left: 24px; top: 2oopx; z-index: -1;}

z-index property tells browser which element should overlay others (if 2+ elements overlap each other). 1/2/3/4 overlap -1/-2/-3/-4.

selector::pseudo-element { property:value;}

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: -Style the first letter, or line, of an element -Insert content before, or after, the content of an element

/* This is a single line comment */

A simple CSS comment

inline element

An inline element only takes up as much width as necessary, and does not force line breaks. Examples: <span> <a> element can be set to inline with "display: inline"

.goon {outline: #78GL46 dotted thick;}

An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". The "outline" property sets all other outline properties in one declaration. In order: outline-color, outline-style, outline-width. width values(thin, thick, medium, inherit)

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

Applies an external style sheet (on another text file) named "mystyle.css" Must have the .css extension. Can be created with any text editor

h1, h2, p {text-align: center; color: red;}

Can group selectors together to minimize code

body { background: #ffffff url("img_tree.png") no-repeat right top;}

Can use shorthand for setting properties of background. Use background property, then values in order: ;color;image;repeat;attachment;position

img {opacity: 0.4;}

Change the opacity of images (the transparency) Values below have increasing fade.

p.intro::before { content: url(smiley.jpg);}

Classes can be combined with pseudo-elements. The ::before pseudo-element can be used to insert some content before the content of an element. The ::after pseudo-element can be used to insert some content after the content of an element

selector {property: value;} ex) h1 {color: blue; font-size: 12px;}

Properties are defined within selectors by defining a property and a value. example: selector= h1 ... property= color ... value= red

a.highlight:hover {color: #ff0000;}

Pseudo-classes can be combined with CSS classes. When you hover over this link (a), within the class "highlighted", the element will change color.

::selection { color: red; background: yellow;}

The ::selection pseudo-element matches the portion of an element that is selected by a user. Only color, background, cursor, and outline properties can be applied.

General Sibling Selector div ~ p {...;}

Selects all elements that are siblings of a specified element. Example) selects all <p> elements that are siblings of <div> elements.

Adjacent Sibling Selector div + p {...;}

Selects all elements that are the adjacent siblings of a specified element. Example) selects all <p> elements that are placed immediately after <div> elements

Child Selectors div > p {....;}

Selects all elements that are the immediate children of a specified element. Example) selects all <p> elements that are immediate children of a <div> element.

p:nth-of-type(2) {___;}

Selects every <p> element that is the second <p> element of its parent

input:checked

Selects every checked <input> element

:not(p)

Selects every element that is not a <p> element

#goon {margin: 5px; border: 1px solid blue; padding: 20px;}

Sets a box around html elements with margin, border, and padding.

#goon {background-image: url("bgdesert.jpg";}

Sets the background element of an element. Accepts .png, .jpg, and .gif images. Be wary of image repeats

.goon {font-family: "Times New Roman", Times, serif;}

Sets the font of the specified text. If font-family name is more than one word, it must have "" around it. fonts after comma specify backup fonts in case browser doesn't support first choice.

.goon {list-style: square inside url("bob.jpg");}

Short hand for styling the list elements: Order: list-style-type; list-style-position; list-style-image;

@media screen { p {font-family: verdana, sans-serif; font-size: 17px;} }

The @media rule makes it possible to define different style rules for different media types in the same stylesheet. Other Media types: print - for printers handheld -for handheld devices

a[target] { background-color: yellow;} a[target="_blank"] { background-color: yellow;}

The [attribute] selector is used to select elements with a specified attribute. The attribute selectors can be useful for styling forms without class or ID. The following example selects all <a> elements with a target attribute. The selector can be more specific by selecting attributes with a particular value (as in the second example).

[title~="flower"] { border: 5px solid yellow;}

The [attribute~=value] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a *title* attribute that contains a space-separated list of words, one of which is "flower"

.goon {margin: 25px 50px 30px 25px;}

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The "auto" value lets the browser decide the dimensions. Shorthand margin property (as shown) follows order: top, right, bottom, left. margin: 25px 50px sets top/bottom to 25 and left/right to 50

#box {margin: 10px 5px 10px 5px;}

The margin is the space around the element. We can adjust the margin to move our HTML elements closer to or farther from each other

.goon {padding: 30px 40px 20px 5px;}

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. Shorthand property (shown) uses order: top, right, bottom, left.

.goon tr {padding: 15px;}

To control the space between the border and content in a table, use the padding property on <td> and <th> elements

[class|="top"] [class^="top"] [class$="test"] [class*="te"]

[class|="top"] select elements with the specified attribute starting with the specified value. ... must be the whole word [class^="top"] select elements whose attribute value begins with a specified value. .Doesn't hafta be whole word [class$="test"] select elements whose attribute value ends with a specified value. ... Doesn't hafta be whole word [class*="te"] select elements whose attribute value contains a specified value. Doesn't have to be whole word.

li: first-child {color: red;}

a Pseudo Selectors which can be used to narrow down a selection with certain rules. ex) This selects only <li> elements that have no elements before them <ul> <li>Selected; will be red</li> <li>Not selected</li> <li>Not selected</li> </ul>

#goon {border: 1px solid black; border-style: dotted;}

adds a style to borders. Values include: *none*: defines no border; *dotted*: Defines a dotted border; *dashed*: Defines a dashed border; *solid*: Defines a solid border; *double*: Defines two borders. The width of the two borders are the same as the border-width value;

.dawg {margin-left: auto; margin-right: auto;}

aligns the element(s) to the center. *Can align elements using their margin property*

h1 {text-align: center;}

aligns the text horizontally within the page. Other values: right, left, justified

.gooner {float: right;}

an element can be pushed to the right or left using the float property, allowing other elements to wrap around it. Often used for images. floating property can be aligned horizontally only. Elements before floating element won't be affected.

a[href="http://codecademy.com"] {color: purple;}

attribute selectors

#goon {background-color: #b0c4de;}

background-color attribute sets the background color of an element. Color specified with Hex # or simple color name

div {display: block ( or inline)}

block: element wont sit next to anything on the same line inline: makes element sit next to other things on the same line, but it takes up as much space as it needs

.goon {border-collapse: collapse;}

border-collapse property sets whether the table borders are collapsed into a single border or separated.

body * {color: red;} or div > * {color: red;}

both are examples of the universal selector. 1st: Selects ALL children of the body. 2nd: Selects ALL first-level children of all divs on the page.

.goon { height: 40%; width: 20px;}

dimension properties allow you to set the height and width of an html element. properties: height, width, max-height, max-width, min-height, min-width. Values: none, %, length in px.

#goon {display: none;}

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. Other values: block, inline.

body {background-color: #333;} or h1 {color: blue;}

element selectors. You are able to select HTML elements first by simply using the name of the element.

.goon {position: fixed; top: 30px; right: 5px;}

fixes the position of an element relative to the browser. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements

div {float: (right/left)

floating property tells element where to be on the page. right or left

.goon {font-style: italic;}

italicizes text. "normal" value makes it NOT italic

a:link { background-color: #B2FF99;} a:visited { background-color: #FFFF85; text-decoration: underlined;} a:hover { background-color: #FF704D;} a:active { background-color: #FF704D;}

links can be styled depending on what "state" they're in. (pseudo-class)

div {padding: }

padding is the space between the border and content

#box {padding: 10px;}

padding is the spacing between the content and the border (edge of the element)

.goon {position: relative; left: -20px;}

positions the element relative to where it is normally placed. direction and value indicate where it will be moved. elements can overlap. reserved space for the element is still preserved.

#goon {background-image: url("riceandbeans.png"); background-repeat: repeat-x;}

repeats the background image in the horizontal direction. To repeat in vertical direction use value (repeat-y;)

.goon {border: 1px solid black;}

sets a border for tables

.goon td { border: 1px solid green; background-color: green;}

sets the border and background color of the table element

a {color:blue}

sets the color of all links to blue

.goon {font-size: 16px;}

sets the size of the text. Can use "px" units or "em" units. 16px=1em. em is preferred, because it allows users to resize the text. Also can use 1-100% as a unit.

.goon {color: blue;}

sets the text color of class "goon" to blue

#goon {border-width: 5px; border-color: #98fk37}

sets the thickness and color of the border.

div {margin-top: margin-right: margin-bottom: margin-left:}

sets the top, right, bottom and left margins of an element also can do {margin: 1px 5px 50px 3px} to set the top to 1, right to 5, bottom to 50 and left to 3

.goon {width: 100%; height: 60%;}

sets the width and height of a table.

#goon {border: 5px solid red;}

shorthand property for setting the border style. Order of individual properties: border-width, border-style, border-color.

* {background-color: blue;}

universal selector (*) may be used to select all the elements in a particular range. should be used sparingly. ex) Selects ALL HTML elements in the page.

.goon tr {text-align: left;}

used to align the text in a table to the left or right.

#goon { visibility: hidden;}

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout