BASICS OF CSS ART340. Quick Review 2 types of HTML tags: Block-level: Occupy their own line in...

transcript

BASICS OF CSS

ART340

Quick Review

2 types of HTML tags: Block-level: Occupy their own line in normal flow.

Headings <h1>, paragraphs <p>, lists, divs Inline-level: Occurs inside block-level tags

A <p></p> tag is a paragraph tag. It is a block-level element, meaning that it puts the content on its own line.

Rule of thumb: If it is a paragraph, wrap it in a <p></p> tag.

<p> tags give you much more control in terms of CSS. A <br /> tag is a line break or “carriage return.”

What is CSS?

If HTML is the skeleton, CSS is the skin. Stands for “Cascading Style Sheets”. Robust and powerful design tool that defines how

each element should be rendered. Has a separate language with its own syntax. Separates content/structure

(HTML) from formatting/ styling/presentation (CSS).

Reduces time for edits.

Image Source: http://www.gpforums.co.nz/attachment.php?s=&postid=6413613

What can CSS specify?

Typefaces Spacing: line-height [leading], letter-spacing [tracking] Colors Borders Background color images Margins Padding Width and height

Benefits of CSS

Superior control over type, backgrounds and layout. Less work. Smaller documents and faster downloads. More accessible sites by separating presentation and

content. Reliable browser support.

HTML Defaults

Browsers have default styles for the nearly 100 HTML tags that exist.

What this means – if you do not use CSS – the content will be formatted in a certain way.

Dependant on the browser, and browser version. http://www.w3.org/TR/CSS21/sample.html *Important to test for browser compatibility.*

Common HTML Defaults

Background – white color, transparent. Headings – bolder and left-aligned. Body text – text aligns to the left and top. Fonts – black color, typeface specific by browser. Margins – many HTML elements feature some form

of margin spacing. Padding – no element features default padding.

3 Methods to Apply CSS

Inline: Not best method. Mixes content and presentation. <p style="color: #000000;margin-left:20px">This is a paragraph.</p>

Embedded: Via an internal style sheet inserted in the <head> of your document. <head>

External or Linked: Best method! Via an external style sheet linked in the <head> of your document. <head><link rel="stylesheet" type="text/css" href="mystyle.css"

/></head>

http://www.w3schools.com/css/css_howto.asp

External Style Sheets

A separate, text-only document that contains the style rules for the document.

Named with a .css suffix. The .css document is then linked to one or more of

the XHTML documents. All files in a web site may share the same style sheet.

CSS Examples

1. Style Sheet Example2. Internal Embedded CSS3. External Style Sheet [View Source]

Understanding the “rules”

A CSS formatting instruction is called a rule. A rule consists of two parts:

a selector – identifies the element or elements (two types of custom selectors: class and ID).

one or more declarations – contains the formatting specifications. Made up of a property and a value.

p {property: value; property: value;}div p {font-weight: bold; margin-top: 5px;}

Selector

Declaration 1 Declaration 2

The div, short for division, is used to indicate a generic block-level element.

Declarations

Made up of the property/value pair. There can be more than one declaration in a single

rule. Each declaration must end with a semicolon to keep

it separate from the following declaration. Web designers typically write each declaration on its

own line.

4 Types of Selectors

Tag: Targets all specified elements. p {} [ A L L PA R A G R A P H S ]

img {} h2 {}

Compound: Combines two or more selectors to target a specific element inside of another. p img {} [ A L L I M A G E S I N S I D E A PA R A G R A P H TA G ]

4 Types of Selectors

Class [.]: Most Versatile. May be applied to any number of elements on a page. .intro {text-size: 12em;} <p class=“intro”>Hello</p>

ID [#]: “Building Block Selectors.” May only appear once. Points to specific components in a page layout. #header {width: 300px;} <div id=“header”></div>

Example: http://www.htmlandcssbook.com/code-samples/chapter-10/css-selectors.html

4 Big Ideas of CSS

What happens if 2 rules conflict? Do rules higher up or lower down on the style sheet

take precedence? Is it necessary to repeat styles on every tag nested

inside of another tag? 4 theories:

Cascade Inheritance Descendant Specificity

Cascade Theory

The last rule declared, also known as the rule closest to the actual content, takes priority.

When trying to determine which CSS rule will be honored, browsers typically use the following hierarchy (from least to most powerful): Browser defaults External or embedded style sheets. Inline styles

Example: http://www.htmlandcssbook.com/code-samples/chapter-10/cascade.html

Which rule would win?

E X A M P L E 1 :

h1 { color: red ;}h1 { color: blue;}

E X A M P L E 2 :

h1 { color: red !important; }h1 { color: blue;}

Inheritance Theory

Just like children inherit their smashing good looks from their parents, nested items inherit some styles from their parents.

Rule of thumb: properties related to text –font size, color, style, etc. are passed down.

div {font-family: Verdana; font-size: 12em;}h1 {color: #FFFFFF;}

<div><h1>Hello</h1></div>Example: http://www.htmlandcssbook.com/code-samples/chapter-10/inheritance.html

Descendant Theory

All the elements contained within a given element are said to be descendants. An element that is directly contained within another element (without

another intervening level), is said to be a child of that element. The containing element is said to be the parent.

Allows you to selectively apply styles to a particular element, by using two or more selectors, to target elements contained within other elements.

p.one ul { border-bottom: solid 5px #ccc; }

</p><p class=”two”>

Specificity Theory

How browsers determine what formatting to apply when two or more rules conflict.

The type of selector is used to determine the winner. The more specific the selector, the more weight it is

given to override the conflicting declaration.

Grouping Selectors

If you ever need to apply the same style property to a number of elements, you can group the selectors into one rule by separating them with a comma.

h1, h2, p, em, img { border: 1px solid blue; }

CSS Box Model

Essentially, understand that browsers see every element on the page as being contained in a little rectangular box.

Because this box exists, you can format almost every aspect of how that box and its contents are displayed.

Using this understanding, you can format, or redefine the default settings of any HTML element.

Example: http://www.htmlandcssbook.com/code-samples/chapter-10/thinking-inside-the-box.html

CSS Box Model <h2>…</h2>

What would it look like?

CSS Units of Measurement

Relative vs. Absolute Absolute units have predefined meanings or real-world

equivalents. pt (1/72 in.)

Relative units are based on the size of something else, such as the default text size, or the size of the parent element. em: a unit of measurement equal to the current font size

(usually 16px) px: varies with display resolution %: percentages

CSS Reset

Unlike the <div> element, text elements, such as <p>, <h1> through <h6>, <ol>, and <ul> already have margin settings applied to them.

Because they look different in different browsers, many designers reset these styles through this technique.

p, h1, h2, h3, h4, h5, h6, li {margin: 0px; padding: 0px;}

Positioning

Specifies the location of an element on a page in the creation of a page layout. Block-level elements exists on their own line. In-line elements exist at the point of insertion.

CSS can break all these defaults and let you place anything where you want it to be.

Can be specified: Relative: left, right center, etc. Absolute: specific coordinates measured in pixels, in.,

cm., etc.

Floats

There are several methods that can be used to position elements in a layout, but the float method is by far the most popular.

Floating an element moves it to the left or right, and allows the following text to wrap around it. float: left;

Think of a float like an island in a stream. The water has to run around it.

BASICS OF CSS ART340. Quick Review 2 types of HTML tags: Block-level: Occupy their own line in...

Documents