Css (Cascading Style Sheets)

Front 1

Purpose of CSS

Back 1

To apply visual styles/presentation to the HTML code and affect the presentation of the content.

Front 2

Styles

Back 2

Sets of name/value pairs representing visual attributes to apply to one or more HTML elements.

For example:
Background, color, font, size, etc.

For example:
h1
{
font-size: 3em;
font-weight: heavy;
font-color: red;
line-height: 10px;
}

Front 3

CSS

Back 3

Nature of how styles that are applied

Front 4

Formatting CSS

Back 4

h1
{
font-size: 3em;
font-weight: heavy;
font-color: red;
line-height: 10px;
}

OR (on one line):

h1 {font-size: 3em; font-weight: heavy; font-color: red; line-height: 10px;}

Alphabetic, Technical, By Function

Front 5

Defining styles

Back 5

External: use <link> to reference.
1. In-line: add style to any given HTML code.
For ex:
Name: value;

2. On-page: CSS with HTML code.

3.

Front 6

Link to styles

Back 6

<link rel="stylesheet" href="styles.cs" type="text/css" media="all">

Front 7

Import Style Sheets in HTML file

Back 7

@import url(main.css);

Front 8

Browsers have a built-in style sheet that you are overriding with your styles

Back 8

(reset.css solves this... kind of)

Front 9

Code comments in CSS

Back 9

/* This is a comment */

/* The following code will be ignored because it is a comment:
h1
{
color: red;
}
*/

Front 10

CSS Selectors

Back 10

Attaches a style to one or more HTML elements.

If two or more selectors apply to the same element, an order of precedence determine which style is applied.

Front 11

Different types of CSS Selectors

Back 11

Tags -- h1 {}

ID -- #firstParagraph {}

Class -- .importantMessage {}

Front 12

Multiple classes applied to an element

Back 12

<div class="myClass1 myClass2 myClass3">

Front 13

akwh

Back 13

a;kdjs

Front 14

Other Selectors

Back 14

article span {} -- descendent
a*b -- universal, b within a regardless of b's parents
a>b -- b direct child of a
a+b -- b sibling of a immediately following a
a-b -- b is a "general" sibling

Front 15

Inheritance of styles

Back 15

Parent's styles affects child's style

Front 16

Controlling inheritance

Back 16

Use these values for a given property instead of a specific value:

Inherit
none
normal
auto

Front 17

Important

Back 17

Gives maximum weight

For ex:

h1
{
color:red !important;
}

Front 18

Order of precedence

Back 18

User
Inline
Media
!Important
Specific
Order
Inherited from Parent
Browser Default