CSS Web Development

Inline

: Applying sets of styles to individual elements

Margin

: allows you to specify how much margin should be outside the box for an element. i. margin-top, margin-right, margin-bottom, margin-left ii. margin: val: sets it for all sides iii. margin: val1 val2: sets for TB and LR iv. margin: val1 val2 val3: sets for T, LR, and B v. margin: val1 val2 val3 val4: sets for TRBL vi. body { 1. margin: 10px; vii. }

border-width

: values are sizes or percentages

CSS

a style sheet language used to describe the presentation of a document written in a markup language. It is designed primarily to enable the separation of document content from document presentation.

Color descriptions

a. - Using one of the 16 predefined color name values. b. - Using the #rrggbb hexadecimal notation. c. - Using the rgb(r,g,b) notation. d. - Using the rgba(r,g,b,a) notation to specify a transparency percentage for a between 0 and 1.

Implementing CSS

a. Inline, Embedded, and External

line-height

allows you to change how tall a particular line of text is.

float

allows you to specify that an element should allow other content to flow around it. You can float an element to the left or the right. i. #main { 1. float: left; ii. }

text-decoration

allows you to underline, overline, or put lines through text.

padding

attributes allows you to specify how much padding should be inside outside the box for an element. i. padding: val; : sets for all sides ii. padding: val 1 val2: sets for TB and LR iii. padding: val1 val2 val3: sets for T, LR, and B iv. padding: val1 val2 val3 val4: sets for TRBL v. #col2 { 1. padding-top: 10px vi. }

Predefined values

Some CSS properties can only have one of a set of existing values. For example, the float property only has five possible values: left, right, both, none, and inherit.

Lengths or percentages

Some properties can have a length/size/percentage specified, such as 3em or 12px. These values are relative to other values.

tag.className

tag/class combo

tag#idName

tag/id combo

Static

this leaves the element in the document flow, and is the most common method of layout.

text-transform

to capitalize, lowercase, or uppercase letters.

word-spacing or letter-spacing

to change the tracking and kerning of text.

text-indent

to indent the first line of paragraphs

fluid layout

use percentages for measurements to allow the page and elements to adjust themselves to the particular platform the page is being viewed on. They are the foundation for what is known as responsive web design, which allows you to write CSS that adjusts your page automatically for different types of devices such as mobile phones, tablets and computer screens.

elastic layout

uses the em measurement for all sizes to allow the page to scale based on the user's font-size setting. Sometimes preferred by designers because it mixes the two other main layout types. Both elastic and fluid layouts are incredibly similar in appearance, so much so that they are usually confused with each other. However, elastic designs use em's instead of percentages and depend primarily on font size. These designs adjust to the text size that users set for their browser.

border-color

values are a color specified by a color name, hex value, RGB, or RGBA value.

border-style

values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.

display

Allows you to change the way a particular element is displayed i. values are block, inline, inline-block, and none

border

Allows you to decorate your boxes with borders

clear

Allows you to specify that an element should not be allowed to float next to anything. You can clear an element from items floating to the left or the right or both. i. footer { 1. clear: both; ii. }

.className

CSS rule for a particular class

#idName

CSS rule for a particular id

<--[if lt IE 9]>

HTML5 shiv for IE8

Box model

Has four basic areas: the content itself, padding around the content, a border and a margin outside the border.

HTML5 shiv

Helps browsers apply style to unrecognized elements (IE8, for example). Requires a conditional comment tag to be inserted into your web page's <head></head> section that includes some JavaScript in your page that allows IE8 and below to style your pages correctly. i. <!--[if lt IE 9]> ii. 6. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> iii. 7. </script> iv. 8. <![endif]-->

height

How tall the element should be i. max-height, min-height ii. header { 1. height: 75px; iii. }

<link />

Includes an external stylesheet i. <link rel="stylesheet" type="text/css" href="css/wow.css />

pseudo-classes

Modifies common already rendered properties of an HTML page that isn't entirely necessary i. ex: a:link {color:#FF0000;} /*unvisited link*/ ii. a:visited {color#00FF00;} /* visited link */

Normalize

Most browsers start with a fairly common default CSS file so that pages should look nearly identical from browser to browser and operating system to operating system. However, there are enough subtle differences across the browsers' default CSS that it's a good idea to set a normalized standard that your site can use as a baseline. i. Meyer Reset ii. The Gallagher/Neal Normalize

Relative

Moving the element in relation to its position in the normal flow of the page.

Values

The ______ that you supply for properties can be one of a few different types. The most common types are predefined values and lengths/percentages.

Style attribute

The easiest way to apply style to HTML5 elements and tags is to do it inline. When you add the style attribute to a tag, you specify one or more property: value pairs, with each pair terminated with a semicolon (;).i. <p style="property-one : value; property-two: value:"> Hello, I'm a paragraph with some sort of styles applied.</p>

Fixed

This is exact coordinate positioning in relation to the browser window. Isn't used very often.

fixed layout

Use pixel-based measurements to precisely define how wide and tall specific elements are and where particular elements should be placed on the page.

@charset"UTF-8";

Used if you use non-ASCII characters in your CSS file

Cascading Style Sheets

What is CSS?

color

You can change the color of the elements on your page. The most common color that is changed is the color of the font. You can change it with either #rrggbb, rgb (r, g, b), or using the rgba (r, g, b, a) notation i. p { 1. color: rgba (0, 0, 255, 0.7); ii. }

font-varient

You can specify if the font being displayed will be displayed in small caps or not. i. Three values you can specify are normal, small-caps, and inherit ii. h1, small { 1. font-variant: small-caps; iii. }

white-space

changes how to process white spaces

font-family

changes the displayed font, as long as it's installed on the system that's displaying the text. i. ex: <p style="color: teal; ii. font-family: "Palatino Linotype';">

Embedded

created a <style></style> section in the <head></head> tag of your HTML5 document that creates rules that apply to particular types of HTML5 tags.

External

creating a separate file that defines all of the CSS rules that then get applied to one or more HTML5 pages via linking.

inline-block

displays the element inline but allows you to add properties such as height, width, margin, and padding.

em

equal to the element's font size, so 3em is 3 times the size.

background

for changing the background images of elements

none

hides the element completely from displaying on the page.

width

how wide the element should be i. max-width, min-width ii. #main { 1. width: 68%; iii. }

/* */

if you wish to put a comment in the code

Color property

one of the most basic properties you can set for an element is the ____ property, which affects the color of the text inside that particular element. i. <p style="color: teal;">

px

one screen pixel.

block

which is like using a sectioning element, where the element takes up an entire chunk of the browser from the left to the right side, and unless you move it around with positioning, blocks are stacked on top of blocks, like our original page at the very beginning of this example.

font-weight

you can change the bold text that wouldn't normally be bolded such as with h1-h6 tag or with a strong or b tag in HTML5. Has the following values i. 100, 200, 300, 400, 500, 600, 700, 800, 900 ii. normal, bold iii. lighter iv. bolder 1. small { a. font-style: italic; b. font-weight: bold; 2. }

font-style

you can change the font to italics if it normally wouldn't be, such as with cite, em, or i HTML5 tags. Has four values that can be specified i. normal, italic, oblique, and inherit ii. h1, small { 1. font-style: italic; iii. }

text-align

you can change the justification of your text in an element i. Four predefined values you can choose from: left, right, center, justify ii. h1 { 1. text-align: right; iii. }

font-size

you can change the size of the font being displayed, you can either specify an exact size, usually in pixels or as a relative size compared to the default size for that element. Exact sizes are specified using the px notation, such as 16px. Relative sizes are usually either specified as a percentage (such as 112.5%) or as an em(such as 1.125em) i. p { 1. font-size: 16px; 2. font-weight: bold; ii. }

font:

you can set all of the properties for the font at once. To do this, you need to at least specify the font size as well as the font family. You can optionally specify the style, weight, and variant. The format of the font specification is as follows, with optional values in italics: i. font: style weight variant size families; ii. p { 1. font: italic bold small-caps 75% "Times New Roman", serif; iii. }

background-image

you can specify an image that you would like to apply to specific elements in your page. Only takes one value which is url (), inside the parentheses for the url(), you put the path (relative or absolute) to the ______________ you would like to use inside that element. i. body { 1. /* bg image from http:example/ */ 2. background-image: url("../images/back.hog"); ii. }

background-repeat

you can specify which direction the background image that you're using should tile, if at all. i. Possible values: repeat-x, repeat-y, repeat, none ii. body { 1. background-image: url(.."/images/back.jpg"); 2. background-repeat: repeat-x /* repeat horizontally */ iii. }

Absolute

you remove the element from the flow and position it in exact coordinates with respect to its parent element. This is not used that often.