CSS Tutorial

48
CSS Cascading Style Sheets

description

A tutorial on CSS for a Web Development class.

Transcript of CSS Tutorial

Page 1: CSS Tutorial

CSSCascading Style Sheets

Page 2: CSS Tutorial

Parts of a CSS rule

h2 {color: #000000;}

Page 3: CSS Tutorial

Parts of a CSS rule

h2 {color: #000000;}

SELECTOR

Page 4: CSS Tutorial

CURLY BRACKETS

Parts of a CSS rule

h2 {color: #000000;}

Page 5: CSS Tutorial

PROPERTY

Parts of a CSS rule

h2 {color: #000000;}

Page 6: CSS Tutorial

Parts of a CSS rule

h2 {color: #000000;}

VALUE

Page 7: CSS Tutorial

Parts of a CSS rule

h2 {color: #000000;}

START WITH SELECTOR

Page 8: CSS Tutorial

Three Kinds of Selectors

TYPE SELECTORS

div

p

h2

strong

CLASS SELECTORS

.headlines

.paragraphs

.bylines

.summary

ID SELECTORS

#container

#first-­‐article

#footer

#sidebar

Page 9: CSS Tutorial

Type Selectors

h2 {

font-style: bold;

}

p {

font-family: Helvetica;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 10: CSS Tutorial

Type Selectors

h2 {

font-style: bold;

}

p {

font-family: Helvetica;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 11: CSS Tutorial

Class Selectors

.headline {

text-decoration: underline;

}

.byline {

font-size: 8px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 12: CSS Tutorial

Class Selectors

.headline {

text-decoration: underline;

}

.byline {

font-size: 8px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 13: CSS Tutorial

ID Selectors

#container {

font-size: 30px;

}

#sidebar {

font-size: 8px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 14: CSS Tutorial

ID Selectors

#container {

font-size: 30px;

}

#sidebar {

font-size: 8px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h2>Side Bar Story</h2><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 15: CSS Tutorial

More ways to use selectors

Page 16: CSS Tutorial

More Selector Options

.headline{

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 17: CSS Tutorial

More Selector Options

h2.headline {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 18: CSS Tutorial

More Selector Options

#sidebar p {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

A space means descendant.

Page 19: CSS Tutorial

More Selector Options

#container #sidebar h3 {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 20: CSS Tutorial

More Selector Options

#container #sidebar h3 {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 21: CSS Tutorial

More Selector Options

#container #sidebar h3 {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 22: CSS Tutorial

More Selector Options

#container #sidebar h3 {

font-size: 30px;

}

<body><div id=“container”>

<h2 class=“headline”>Hello World</h2>

<p class=“byline”>By Jeremy Rue.</p>

<p>In todayʼs news, a class at UC Berkeley learned the importance of CSS in designing and building webpages.</p>

<div id=“sidebar”><h3 class=“headline”>Side Bar Story</h3><p class=“byline”>By John Doe.</p><p>This is a related story.</p>

</div>

</div></body>

Page 23: CSS Tutorial

NOT to be confused with...

Page 24: CSS Tutorial

HTML vs CSS

HTML CSS

<div class=“headline lead-story article”> .headline p {

}

These spaces give multiple classes This space means a <p> tag inside another tag with class .headline

Page 25: CSS Tutorial

Example from Richmond Site

<div id="post-38661" class="hentry p1 post publish author-lexi-pandell category-education category-featured category-front tag-big-brother-big-sister tag-mentoring tag-nonprofit tag-youth y2012 m02 d07 h13">

Page 26: CSS Tutorial

A few others

h3, p { color:orange; } <div id=“container”><h3>Here is one headline</h3>

<div><h3>Another</h3><p>Some text here</p>

</div>

<p>Another paragraph.</p><h3>Last graph.</h3>

</div>

Page 27: CSS Tutorial

A few others

#container > h3 { color:orange; } <div id=“container”><h3>Here is one headline</h3>

<div><h3>Another</h3><p>Some text here</p>

</div>

<p>Another paragraph.</p><h3>Last graph.</h3>

</div>

Page 28: CSS Tutorial

A few others

h3 + p { color:orange; } <div id=“container”><h3>Here is one headline</h3>

<div><h3>Another</h3><p>Some text here</p>

</div>

<p>Another paragraph.</p><h3>Last graph.</h3>

</div>

Page 29: CSS Tutorial

A few others

h3:first-child { color:orange; } <div id=“container”><h3>Here is one headline</h3>

<div><h3>Another</h3><p>Some text here</p>

</div>

<p>Another paragraph.</p><h3>Last graph.</h3>

</div>

Page 30: CSS Tutorial

The Cascade

Page 31: CSS Tutorial

What happens if there is a conflict?

The more specific rules take precedence.

External Style Sheet Embedded Style Sheet Inline Styles

<head><style>

.headlines {color:black;

}

</style></head>

<div style= “color:black;”>

Page 32: CSS Tutorial

Which rule wins out?

#container {

font-size: 30px;

}

#headline {

font-size: 10px;

}

<div id="container">

<div id="headline">

<p>My headline</p>

</div>

</div>

Page 33: CSS Tutorial

<div id="container">

<div id="headline">

<p>My headline</p>

</div>

</div>

Which rule wins out?

#container {

font-size: 30px;

}

#container {

font-size: 10px;

} Because it comes last

Page 34: CSS Tutorial

Cascade Recap

Stylesheet Order

1. External

2. Embedded (<head>)

3. Inline

Last Rule

Rules that come last

Inheritance

Specificity

Page 35: CSS Tutorial

Properties

Page 36: CSS Tutorial

Text Color

COLOR NAMES

147 predefined names

DarkCyanPurpleBlackRed

color:  #ee3e80;

RGB VALUES

Values for red, green and blue

rgb(100,100,90);rgb(255,255,255);rgb(0,0,0);rgb(30,44,200);

Hexadecimal

Six or three digit alpha-numeral.

#FFFFFF;#000000;#000;#AF0;

Page 37: CSS Tutorial

Backgroundsbackground-­‐color:  #ee3e80;

background:  url(‘path_to_image.jpg’)  no-­‐repeat  0px  0px;

background-­‐image:url(‘image.jpg’);background-­‐position:0px  50%;background-­‐repeat:repeat;

Short code

Page 38: CSS Tutorial

Font Family

FALL BACK

A comma separated list of fonts to use if the system doesnʼt have the font installed.

font-­‐family:  Helvetica,  Arial,  san-­‐serif;

QUOTES

Use quotes when a font is multiple words, like “Times New Roman.”

END WITH GENERIC

End with a generic font, like serif or san-serif. This way the browser will pick for you.

Page 39: CSS Tutorial

Font Size

PIXELS

Pixels are considered a fixed font size. Fonts will appear at this size relative to the screen size.

font-­‐size:  12px;

PERCENTAGES

Percentages are relative from the default size of the text. 100% means the default size.

EM

EM is another way of doing relative measurement. Varies only slightly from %.

Page 40: CSS Tutorial

Othersfont-­‐weight:  normal;font-­‐weight:  bold;

font-­‐style:  normal;font-­‐style:  italic;font-­‐style:  oblique;

text-­‐transform:  uppercase;text-­‐transform:  lowercase;text-­‐transform:  capitalize;

line-­‐height:  1em;line-­‐height:  1.4em;

letter-­‐spacing:  1em;word-­‐spacing:  1em;text-­‐decoration:none;

text-­‐align:  left;text-­‐align:  right;text-­‐aling:  center

Page 41: CSS Tutorial

Linksa:linka:visiteda:hovera:active

a:link

Before a user clicks on a link.

a:visited

After a user clicks on a link.

a:hover

When a user hovers over a link.

a:active

When the user clicks down on a link.

Page 42: CSS Tutorial

Border, Margin and Padding

he l loMargin Border Padding

Width

margin-­‐top:10px;margin-­‐right:10px;margin-­‐bottom:10px;margin-­‐left:10px;

margin:5px  10px  6px  5px;

Page 43: CSS Tutorial

borders

border-­‐style

soliddotteddashedgroove...

border-­‐colorborder-­‐width

border:1px  solid  #000000;

border-­‐top-­‐color:#ffffff;border-­‐left-­‐width:  20px;

Combined

Single sides

Page 44: CSS Tutorial

Inline vs Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<img><span><strong><em>

Inline

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<p><div><li><h1>

block

List of the best pies• Apple• Cherry• Pumpkin

Page 45: CSS Tutorial

Inline vs Block

display:inline;display:block;display:none;

• Apple• Cherry• Pumpkin

display:block;

• Apple • Cherry • Pumpkin

display:inline;

Page 46: CSS Tutorial

Visibility

visibility:visible; visibility:hidden;

Hi Mom!

Page 47: CSS Tutorial

CSS Reset

Page 48: CSS Tutorial

CSS Reset

html,  body,  div,  span,  applet,  object,  iframe,  h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre,  a,  abbr,  acronym,  address,  big,  cite,  code,  del,  dfn,  em,  img,  ins,  kbd,  q,  s,  samp,  small,  strike,  strong,  sub,  sup,  tt,  var,  b,  u,  i,  center,  dl,  dt,  dd,  ol,  ul,  li,  fieldset,  form,  label,  legend,  table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td,  article,  aside,  canvas,  details,  embed,  figure,  figcaption,  footer,  header,  hgroup,  menu,  nav,  output,  ruby,  section,  summary,  time,  mark,  audio,  video  {   margin:  0;   padding:  0;   border:  0;   font-­‐size:  100%;   font:  inherit;   vertical-­‐align:  baseline;}