30
BASICS OF CSS ART340
| Date post: | 29-Dec-2015 |
| Category: |
Documents |
| Upload: | lisa-simpson |
| View: | 214 times |
| Download: | 0 times |
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
<strong>, <em>, <img>, <span>
<p> vs. <br />
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>
<style type="text/css">hr {color: #000000;}p {margin-left: 20px;}body {background-image:url("images/back40.gif");}</style></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 class=”one”><ul><li>List item</li></ul>
</p><p class=”two”>
<ul><li>List item</li></ul></p>
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
<h2>…</h2>
CSS Box Model <h2>…</h2>
What would it look like?
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.
