CSS classes

© 2013
[go to next slide] 


						p {
							font-size: 18px;
							font-family: Georgia;
						}

All right, so you've done some CSS. This looks pretty familiar doesn't it? Easy peasy.

What you've been doing, is using CSS to order around the HTML tags you've written, like "p" or "h1".

But you can have multiple paragraphs on a page right? What if you want to style one p tag, but not the rest? Think of your byline, or your photo captions. They shouldn't look like the main article text.

That’s where CSS classes come in. They let you make up names for individual html tags. [PAUSE] Think of styling HTML like talking to people. You can talk to a group of people at once, or you can talk to a specific person by using his or her name.

Any mentors in the house?

Have a few mentors come up. They'll each hold up a sheet of paper with some attributes. We'll ask them to do different things like: turn around, jump, hide.

index.html
styles.css

  <p>By David Foster Wallace</p>
  <p>Lobsters are basically giant sea-insects.</p>

					
p {
					  text-decoration: 
					  underline;
					}

How do I create a CSS class?

Give any HTML tag a name by adding
<p class="make-up-a-name">

How do I tell it what to do?

Refer to any class in your CSS by typing
.make-up-a-name{}

index.html
styles.css
<html>
   <head>
	  <title>Consider the lobster</title>
	  <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
	  <h1>Consider the lobster</h1>
	  <p>By David Foster Wallace</p>
	  <p>The point is that lobsters are basically 
giant sea-insects.</p>
   </body>
</html>	
					
p {
   font-size: 24px;
}

Consider the lobster

By David Foster Wallace

The point is that lobsters are basically giant sea-insects.

index.html
styles.css
<html>
   <head>
	  <title>Consider the lobster</title>
	  <link rel="stylesheet" href="css/styles.css">
   </head>
   <body>
	  <h1>Consider the lobster</h1>
	  <p class="byline">By David Foster Wallace</p>
	  <p>The point is that lobsters are basically 
giant sea-insects.</p>
   </body>
</html>	
					
p {
   font-size: 24px;
}

.byline {
   font-size: 20px;
}

Consider the lobster

By David Foster Wallace

The point is that lobsters are basically giant sea-insects.

index.html
styles.css
<body>
	<h1 class="green">Consider the lobster</h1>
	<p class="byline">By David Foster Wallace</p>
	<p>The point is that lobsters are basically giant sea-insects.</p>
</body>
					
p {
   font-size: 24px;
}

.byline {
   font-size: 20px;
}

.green {
	color: green;
}

Consider the lobster

By David Foster Wallace

The point is that lobsters are basically giant sea-insects.

index.html
styles.css
<body>
	<h1 class="green">Consider the lobster</h1>
	<p class="byline">By David Foster Wallace</p>
	<p class="green">The point is that lobsters are 
basically giant sea-insects.</p>
</body>
					
p {
   font-size: 24px;
}

.byline {
   font-size: 20px;
}

.green {
	color: green;
}

Consider the lobster

By David Foster Wallace

The point is that lobsters are basically giant sea-insects.

index.html
styles.css
<body>
	<h1 class="green">Consider the lobster</h1>
	<p class="byline green">By David Foster Wallace
	</p>
	<p class="green">The point is that green lobsters are basically
	giant sea-insects.</p>
</body>

Consider the lobster

By David Foster Wallace

The point is that lobsters are basically giant sea-insects.

p {
   font-size: 24px;
}

.byline {
   font-size: 20px;
}

.green {
	color: green;
}

HTML elements can also have multiple classes! And it doesn't matter what order you write them in.

styles.css

p {
   font-size: 20px;
}

.byline{
	font-size: 30px;
}

By David Foster Wallace

By David Foster Wallace

If you have an HTML element like this:

<p class="byline">By David Foster Wallace</p>

What's the font size? 20px? or 30px?

[Explain top]

[So, what happens, when they all pointed to the same element? PRESS ENTER. ]

styles.css

p {
   font-size: 20px;
}

.byline {
	font-size: 30px;
}

By David Foster Wallace

By David Foster Wallace

If you have an HTML element like this:

<p class="byline">By David Foster Wallace</p>

What's the font size? 20px? or 30px?

propublica.org

Seeing cascades with the inspector

With your mentors: