Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Session #3: CSS Basics

No description
by

Joel McCandless

on 28 June 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Session #3: CSS Basics

CSS
By Joel McCandless
Crash Course Series
Session 3

CSS: What is it?
Used to describe the presentation of documents written in a markup language

Most commonly used for HTML, but can be used for XML, SVG, XUL, etc.

Designed to enable the separation of document content from document presentation
CSS: Cascading Style Sheets
Usage
Advantages
Separation of Concerns
Separates content from presentation

Allows for different presentation under different circumstances
Desktop
Mobile
Different Browsers
Browser Dimensions
Print
Screen Readers
User Preferences
Geographic Location
Site-wide Consistency
When used properly, global stylesheets can be used to affect the entire site consistently

Many pages can be styled with the same set of rules

Eases maintenance because changes can be made site-wide in one location

Individual pages can have local or page-specific stylesheets to override site defaults
Bandwidth
Without stylesheets, styling information is repeated for every markup element, even when their styling is the same

Stylesheets let you define presentation styles one time for a range of commonly styled elements

This lack of repetition of the same styles makes the size of the content downloaded much smaller

Stylesheets are usually cached by the browser, allowing them to be downloaded once and used on all pages of a site
Accessibility
Without CSS, pages must usually be laid out using HTML tables and other techniques that hinder accessibility for vision-impaired users

CSS allows for separation of presentation from content, so screen readers can ignore CSS, or apply their own CSS rules to make the content more accessible in its presentation
Page Reformatting
With a change to a single line of code, a page can be completely restyled

This allows for:
More print-friendly versions of pages
More accessible documents
Independent styling for different target devices
Independent styling for different target browsers

Devices not able to understand the styling can still render the document
Syntax
CSS has simple syntax
Declaration blocks use English keywords to specify the names of various style properties, and a value is given to style property
Rules and rule-sets consist of one or more selectors and a declaration block

A stylesheet consists of a list of rules and/or rule-sets

CSS: How It Works
Specific Syntax
Rules applied according to priorities
Many Available Style Attributes
Limitations: Structural/Syntactic & Browser
Priorities
Attributes
Limitations
Rules
Selectors
Declaration
Style
div
{
color:red;
text-align:center;
}

Rule
div
{
color:red;
text-align:center;
}
div
{
color:red;
text-align:center;
}
div
{
color:red;
text-align:center;
}
Selector
Selectors define which element(s) the rule applies to
Declaration Block
Blocks
Declarations are a name-value pair
Declaration Blocks are a set of one or more declarations that all apply to the same selector(s)
Declaration
Properties
Property
Name
Property
Value
Document elements may match more than one CSS declaration for the same property. CSS defines a set of priorities to determine which declaration will apply
9) Browser default
8) CSS property definition within the document
internal stylesheet: inline style tags
7) Parent inheritance
Unspecified properties are inherited from parent element
6) Rule order
most recently defined rule applies
5) Selector specificity
least specific: elements (and pseudo-elements)
classes (and pseudo-classes) & attributes
most specific: ids
4) Importance
the '!important' value
3) Media type
media-specific CSS via media queries
2) Inline
element-level declaration via the 'style' attribute
1) User-defined
browser accessibility feature
CSS Priority Rules
Higher Priority
Lower
Priority
No column declaration (CSS 3 has a new column-count module, which is not yet standardized). This usually has to be done using floating elements, which different browsers and devices render differently.
Selectors cannot ascend
Specific text cannot be targeted without modifying the markup (with one exception: the pseudo-element ':first-letter')
Styles cannot be referenced from another rule (styles must be duplicated across rules even when the same)
Rules cannot be names, and thus cannot be referenced by name in scripts
Absence of expressions: property values cannot be calculated
Vertical placement of elements (cettical centering, footer staying at bottom of viewport, etc.)
Positioning/Layout
Box Model
Text
Appearance
Effects
Position
Placement
Sizing
Layering
Floating
Columns
Border
Margin
Padding
CSS 3: Box
General
Variants
Adjacent Borders
CSS 3 Properties
box-align: specifies the vertical alignment of the content (start, end, center, baseline, stretch)
box-flex: specifies how flexible an element's size is, relative to it's siblings
box-orient: specifies if the children should be laid out vertically or horizontally
box-pack: specifies where child elements should be placed when this element is larger than the size of the children (start, end, center, justify)
box-sizing: specifies whether the specified size of this element should include the padding and border or not
box-shadow: adds a drop-shadow to the box
Font
Appearance
Flow
Overflow
Lists
letter-spacing
line-height
word-spacing
Background
Display
Outline
Cursor
cursor: specifies what cursor should be displayed when the mouse pointer is over this element (pointer, text, help, default, etc.) Many values.
display: specifies how the element should be displayed (block, inline, none, etc.) Many values.
visibility: specifies whether or not the element is visible. Hidden elements still take up space in the document flow.
opacity: set the opacity of the element, from 0 (transparent) to 1 (opaque) [CSS 3]
Color
Image
CSS 3
Animation
Transforms
Transitions
div
{
position:absolute;
left:10px;
top:10px;
}
Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_absolute
div
{
position:absolute;
left:10px;
top:10px;
}
top, bottom, left, right

For absolutely positioned elements, these properties set the edge of an element to a unit relative to its containing element.

For relatively positioned elements, these properties set the edge of an element to a unit relative to its normal (static) position.
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_top
p
{
width:50%;
min-width:50px;
max-width:100px;
}
width, height, max-width, max-height, min-width, min-height

Specify the desired, minimum, and maximum dimensions of a block element
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_dim_max-width
img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}
clip
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_clip
Lets you specify the dimensions of an absolutely positioned element that should be visible, and the element is clipped into this shape, and displayed. Useful for images larger than their containing element.
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order, provided they sre within the same stacking context.
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
img
{
float:left;
}
p.clear
{
clear:both;
}
float: specifies whether or not a block should float, and whether it should float to the left or right

clear: indicates which sides of an element do not allow floating elements. (left, right, both, none)
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_class-clear
.newspaper
{
column-width:200px;
column-count:3;
column-gap:40px;
column-rule:4px outset #ff00ff;
}
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-rule
column-rule
column-gap
column-width
p {
border-width:5px;
border-style:solid;
border-color:red;
}
p {
border:5px solid red;
}
Specifies the properties for a border: width, style, and color.
border is a shortcut property to specify all 3 at once
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border
Each border side can be specified individually, if desired, using shortcuts: border-top, border-right, border-bottom, border-left
You can also work with individual properties on each border side, for example:

border-top-width
border-left-style
border-right-color
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_border-right-color
table
{
border-collapse:collapse;
}
table
{
border-collapse:separate;
border-spacing:10px 50px;
}
border-collapse specifies whether table borders are collapsed into a single border or detached into two separate borders
border-spacing specifies the horizontal and vertical spacing between separated borders
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_border-spacing
div
{
border:2px solid;
border-radius:25px;
}
border-radius is a shortcut that allows you to set the rounded-corner radii of all four corners of a border, in the following order:
border-top-left-radius,
border-top-right-radius,
border-bottom-left-radius,
border-bottom-right-radius
CSS 3 also includes a new border-image property, but it's a bit complicated, so we will save that for the advances CSS session
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-radius
p
{
margin:20px 40px 30px 40px;
}
margin is a shortcut for, in order:
margin-top margin-right margin-bottom margin-left
Specifies the minimum distance between this element and the elements around it's edges
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_margin
p
{
padding:5px 10px 5px 20px;
}
padding is a shortcut for, in order:
padding-top padding-right padding-bottom padding-left
Specifies the minimum distance between this element's border and it's content
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_padding
New CSS 3 properties allow finer control of layouts and box model of block elements
p
{
font:italic small-caps bold 12px/30px Arial serif;
}
font is a shorthand property that specifies all of the font properties at once, in the following order:
font-style font-variant font-weight font-size/line-height font-family
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf');
}
@font-face allows you to import a new font into the browser
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_font
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule
h1
{
color: red;
text-decoration: overline;
text-shadow: 2px 2px 5px red;
text-transform: uppercase;
}

color: the foreground (text) color
text-decoration: underline, overline, line-through,
blink, none
text-shadow: drop-shadow, format is: horizontal
vertical blur color
text-transform: uppercase, lowercase, capitalize,
none
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-shadow
word-break
text-wrap
text-overflow
white-space
Specifies the direction that the text should flow. Either ltr (left-to-right) or rtl (right-to-left)
Direction
div
{
direction:rtl;
}
.article {
width:150px;
height:150px;
overflow:scroll;
}
.section {
width:150px;
height:150px;
overflow-x:hidden;
overflow-y:auto;
}
Specifies what happens if content overflows the element's box size. (visible, hidden, scroll, auto)
overflow is shorthand to specify a single value for both overflow-x and overflow-y
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_text_direction
Alignment
p
{
text-indent:50px;
text-align:right;
vertical-align:middle;
}
text-indent: specifies how much text should be indented, either in units (px, pt, etc.) or as a percentage of the parent element's width
text-align: specifies the horizontal alignment of text content (left, right, center, justify)
vertical-align: specifies the vertical alignment of an element. Many value types.
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align
Wrapping
ul
{
list-style:square inside url("dot.gif");
}
list-style is shorthand to define together, in order:
list-style-type list-style-position list-style-image

list-style-type: the type of marker (circle, upper-roman, etc.) Many types available.
list-style-position: whether the marker is inside the text flow, or outside.
list-style-image: allows for custom marker images
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_list-style
body {
background-color:yellow;
}
h1 {
background-color:#00ff00;
}
p {
background-color:rgb(255,0,255);
}
background-color specifies the background color to use for an element
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-color
body
{
background: url('smiley.gif') no-repeat fixed center;
}
background is shorthand to specify all background properties at once

background-image: the image to use for the background
background-repeat: whether or not the image should repeat itself, both horizontally and vertically
background-attachment: whether the background has a fixed position, or scrolls with the rest of the page
background-position: the placement of the image withing the element
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background
div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
background-size:80px 60px;
background-clip:content-box;
}
background-origin: whether the background is positioned relative to the padding-box, border-box, or content-box
background-size: the size of the background image, either static or based on some metrics of the element
background-clip: the painting area of the background - padding-box, borer-box, or content-box
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size
h1 {
display:none;
}
h2 {
visibility:hidden;
}
div {
opacity:0.5;
}
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity
p
{
outline:#00FF00 dotted thick;
outline-offset:15px;
}
outline: shorthand to set the properties (in order) outline-color outline-style outline-width
outline-offset: the distance that the outline is offset from the border edge
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset
span.crosshair {
cursor:crosshair;
}
span.help {
cursor:help;
}
span.wait {
cursor:wait;
}
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
div {
animation:mymove 5s linear 1s infinite alternate;
-webkit-animation:mymove 5s linear 1s infinite alternate; /* Safari Chrome */
}
animation is shorthand for the properties: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

animation-name: the name you are giving your animation
animation-duration: the length of time your animation should take
animation-timing-function: indicates which function should control the speed of the animation
animation-delay: how long before the animation begins
animation-iteration-count: how many times should the animation be played
animation-direction: whether the animation should be played forwards, backwards, or both in alternation
@keyframes mymove {
0% {top:0px;}
50% {top:200px;}
100% {left:50px;}
}
/* Safari and Chrome */
@-webkit-keyframes mymove {
0% {top:0px;}
50% {top:200px;}
100% {left:50px;}
}
@keyframes specify the CSS to be gradually applied at different timings within the animation
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
transform allows you to specify transformations such as rotation, scaling, moving, skewing, etc. Many functions available. [CSS 3]
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transform
div {
width:100px;
transition: width 2s ease 0.2s;
-webkit-transition: width 2s ease 0.2s; /* Safari */
}
div:hover {width:300px;}
transition is used to gradually animate a change in a single property and is shorthand for:
transition-property transition-duration transition-timing-function transition-delay
Try it: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
Specificity
1) Specificity determines, which CSS rule is applied by the browsers.
2) Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.
3) Every selector has its place in the specificity hierarchy.
If two selectors apply to the same element, the one with higher specificity wins.
4) There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes+attributes and elements.
5) When selectors have an equal specificity value, the latest rule is the one that counts.
6) When selectors have an unequal specificity value, the more specific rule is the one that counts.
7) Rules with more specific selectors have a greater specificity.
8) The last rule defined overrides any previous, conflicting rules.
9) The embedded style sheet has a greater specificity than other rules.
10) ID selectors have a higher specificity than attribute selectors.
11) You should always try to use IDs to increase the specificity.
12) A class selector beats any number of element selectors.
13) The universal selector and inherited selectors have a specificity of 0, 0, 0, 0.
14) You can calculate CSS specificity with CSS Specificity Calculator.
Calculating approximate specificity:
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
Selector Semantics
Description
Selects all elements with class="intro"
Selects the element with id="firstname"
Selects all elements
Selects all <p> elements
Selects all <div> elements and all <p> elements
Selects all <p> elements inside <div> elements
Selects all <p> elements where the parent is a <div> element
Selects all <p> elements that are placed immediately after <div> elements
all elements with a target attribute
Selects all elements with target="_blank"
Selects the active link
Selects links on mouse over
Selects the input element which has focus
Selects the first letter of every <p> element
Selects every <p> element that is the first child of its parent
Insert content before the content of every <p> element
Insert content after every <p> element
Selector
.class
#id
*
element
element,element
element element
element>element
element+element

[attribute]
[attribute=value]
:active
:hover
:focus
:first-letter
:first-child
:before
:after
Example
.intro
#firstname
*
p
div,p
div p
div>p
div+p

[target]
[target=_blank]
a:active
a:hover
input:focus
p:first-letter
p:first-child
p:before
p:after
NOTE: This is not an exhaustive list of selectors, and does not include any of the new selectors that CSS 3 is bringing
CSS Value Units
Unit
%
in
cm
mm
em



ex

pt
pc
px
Description
percentage
inch
centimeter
millimeter
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
one ex is the x-height of a font (x-height is usually about half the font-size)
point (1 pt is the same as 1/72 inch)
pica (1 pc is the same as 12 points)
pixels (a dot on the computer screen)
Colors
Method
Hexadecimal colors
RGB colors
RGBA colors
HSL colors
HSLA colors
Predefined/Cross-browser color names
Example
#FF0000
rgb(255,0,0)
rgb(255,0,0,1)
hsl(0,100%,50%)
hsla(o,100%,50%,1)
red
All of the following methods specify the same color: red
Browsers are not yet all standardized on CSS 3 properties
Reference chart: http://www.w3schools.com/cssref/css3_browsersupport.asp
Standards
CSS 1 and CSS 2 were each single specifications.

Unlike previous versions, CSS 3 is not a single global specification. CSS 3 was broken up into modules, of which there are more than 50. Each module has its own specification, and levels independently. Some modules are actually at CSS 4 level at this time.

Additionally, each browser has it's own level of conformance to specifications, and often their own implementations of features that do not yet have final specifications.
Thank
You

Questions?
Full transcript