HTML: CSS: an overview

index.html

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Plans for World Domination</li>
<li>Contact</li>
</ul>
</div>
<h2>About Me</h2>
</div>
<div id="left">
<img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-main_zps26d178c5.jpg"/>
<p>I am the angriest puppy in the world. This has been scientifically proven in several clinical trials.</p>
</div>
<div id="right">
<table>
<th colspan="3">My Bros</th>
<tr>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-1_zps5666b8e7.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-2_zps1539e6b2.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-3_zps4692eafa.png"/></td>
</tr>
<tr>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-4_zps63ff5aa8.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-5_zps0ee0d2c8.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-6_zpsc4450a60.jpg"/></td>
</tr>
<tr>
<td><img id="bottom_left" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-7_zps26e8a8d9.jpg"/></td>
<td><img src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-8_zps9a1469be.jpg"></td>
<td><img id="bottom_right" src="http://s3.amazonaws.com/codecademy-blog/assets/puppy-9_zps3bab7732.jpg"/></td>
</tr>
</table>
</div>
<div id="footer">
<div id="button">
<p>Send me an <span class="bold">e-mail</span>!</p>
</div>
</div>
</body>
</html>

Stylesheet.css

body {
background-color: #b7d1c4
}

h2 {
font-family: Verdana;
font-weight: bold;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
color: #acd1b2;
}

img {
height: 170px;
width: 170px;
box-shadow: rgba(0,0,0,0.2) 10px 10px;

}

#navbar {
position: fixed;
top:10px;
left:50%;
margin-left:-254px;
}

#header {
position: relative;
top: -10px;
background-color: #3c4543;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

ul{
list-style-type: none;
position: fixed;
margin: -10px;
}

li {
display: inline;
border: 2px solid #000000;
font-family: Futura, Tahoma, sans-serif;
color: #ffffff;
padding: 5px;
border-radius: 5px 5px;
background-color: #cc0323
}

#left{
width: 45%;
float: left;
}

p {
font-family: Tahoma;
font-size: 1em;
}

#right{
width: 45%;
float: right;
}

table {
border: #000000 1px solid;
background-color: #acd1b2;
float: right;
margin-right: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}

td {
height: 75px;
width: 75px;
}

td img {
height: 75px;
width: 75px;
box-shadow: none;
}

th {
font-family: Verdana;
font-size: 1em;
font-weight: normal;
color: #3c4543
}

#bottom_left{
border-bottom-left-radius: 15px;
}

#bottom_right{
border-bottom-right-radius: 15px;
}

#footer{
clear: both;
position: relative;
bottom: -20px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
height: 75px;
background-color: #3c4543;
}

#button{
border: 2px solid #000000;
float:left;
position: relative;
left: 229px;
bottom: -20px;
border-radius: 5px;
background-color: #cc0323;
height: 30px;
width: 150px;

}

#button p{
position: relative;
bottom: 10px;
font-size: 0.8em;
color: #acd1b2;
text-align: center;
}

.bold{
font-family: tahoma;
font-weight: bold;
font-size: 1.2em;
font-variant: small-caps;
color: #ffffff;
}

CSS (which stands for Cascading StyleSheets) is a language used to describe the appearance and formatting of your HTML.

A style sheet is a file that describes how an HTML file should look. That's it!

We say these style sheets arecascading because the sheets can apply formatting when more than one style applies. For instance, if you say all paragraphs should have blue font, but you specifically single out one paragraph to have red font, CSS can do that! (We'll talk more about cascading in section four.)

index.html

<!DOCTYPE html>

<html>

<head>

<title>Fancy Fonts</title>

</head>

<body>

<p>I'm a paragraph written in red font, but one of my words is <span>blue</span>!</p>

</body>

</html>

stylesheet.css

p {
color: red;
}

span {
color: blue;

}

There are two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML):

You can apply the same formatting to several HTML elements without rewriting code (e.g.style="color:red":) over and over
You can apply similar appearance and formatting to several HTML pages from a single CSS file

index.html

<!DOCTYPE html>

<html>

<head>

<title>Even Fancier Fonts</title>

</head>

<body>

<p>Much of this is regular text, but some of it is <span>fancy</span>!

We can use our <span>newly fancified font</span> to add some

<span>flair</span> to our website. It'd be a <span>royal pain</span>

to make each of these span tags <span>fancy</span> individually,

but it's a cinch with <span>CSS</span>!</p>

</body>

</html>

stylesheet.css

span {

font-family: cursive;

}

We previously showed you how to doinline styling with HTML, like so:

This is a less awesome way to style your website for the reasons we just mentioned: you have to write the same code over and over, and if you want to make a big stylistic change to several elements, you have to change every single style tag. With a single CSS file, you only have to make the change in one place!

There are two ways to put CSS in one place. This first is to put your CSS between <style></style> tags, right in the same file as your HTML. These<style> tags go inside the <head></head> of your webpage; check out the example in the editor to the right.

You do this by putting a <link> tag (as you saw in the first exercise of this course) between the <head></head>tags of your HTML page. Your <link>tag needs three attributes:

A type attribute that should always be equal to "text/css"
A rel attribute that should always be equal to "stylesheet"
A href attribute that should point to the web address of your CSS file

In the editor to the right, you'll see two files: index.html andstylesheet.css.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

</body>

</html>

stylesheet.css

p {
font-size: 44px;

}

PSA: Self-closing tags

This brings us to a quick (but noteworthy!) concept in HTML: theself-closing tag.

Because nothing ever goes between<link></link> tags, it's okay to use a single set of <>s to be the openingand closing tags. You do that like so:

<link type="text/css" rel="stylesheet" href="CSS file address"/>

You may have noticed us do something similar with the <img> tag:

<img src="web address"/>

Most tags are not self-closing, but we'll point out the self-closing ones to help save you time and typing.

CSS syntax is different from the HTML you're used to, but don't worry: it's easy to pick up! The general format looks like this:

selector {
    property: value;
}

A selector can be any HTML element, such as <p>, <img>, or <table>. You just take off the <>s! To make a paragraph's text red with CSS, you'd type:

p {
    color: red;
}

A property is an aspect of a selector. For instance, you can change thefont-family, color, and font-sizeof the text on your web pages (in addition to many more).

A value is a possible setting for a property. color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.

You need to end each property-value with a semi-colon (;). That's how CSS knows you're done with one pair and ready for the next.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<p>You're about to style this paragraph with CSS all on your own!</p>

</body>

</html>

stylesheet.css

p {

color: green;

}

Another cool advantage of CSS is that you can set many properties for one selector. For instance, if you want to set a paragraph's font, font color, and font size, you can simply write:

p {
    font-family: Arial;
    color: blue;
    font-size: 24px;
}

Remember: end each property-value pair with a semicolon!

Please note: If you have adjusted your browser's zoom, tests involving font-size and height will not work correctly. To remedy this, please type Command+0 or Ctrl+0 to reset your view.

stylsheet.css

p {

color: green;

font-family: Garamond;

font-size: 24px;

}

index.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<p>CSS is for styling HTML pages!</p>

<p>It makes webpages look <span>really rad</span>.</p>

<h3>What do I think of it?</h3>

<p>It's awesome!</p>

</div>

</body>

</html>

stylesheet.css

/*You can do this! Write your CSS below.*/

p { font-family: Courier; }

h3 { color: red; }

span { background-color: yellow;}

As you start adding more and more property-value pairs for each CSS selector, it's important to remember to put a semicolon (;) at the end of each line.

The semicolon tells CSS that one property-value pair is over and it's time to move on to the next one. Without semicolons, it'll become confused and your page won't look right.

Also, don't forget: all property-value pairs for a selector are surrounded by curly braces ({}).

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<h3>Recent Projects</h3>

<p>I've started learning HTML and CSS. I hope to create my own website soon!</p>

</body>

</html>

stylesheet.css

h3 {

font-family: Verdana;

color: blue;

}

p {

font-family: Garamond;

font-size: 16px;

}

While it's important to get all your syntax down correctly, it's also a good idea to write comments as you go along. Good comments will help remind you why you did something a certain way (or will help someone else out if they're reading your code without you there to explain it).

As you've seen, HTML comments look like this:

<!--I'm a comment!-->

CSS comments, on the other hand, look like this:

/*I'm a comment!*/

Remember: the computer doesn't look at comments when figuring out what your HTML and CSS should do, but writing good comments is a good habit you want to pick up!

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<p>I'm currently red, but I'm about to become black!</p>

</body>

</html>

stylesheet.css

/* p {
color:red;

} */

Because nothing ever goes between<link></link> tags, it's okay to use a single set of <>s to be the openingand closing tags. You do that like so:

<link type="text/css" rel="stylesheet" href="CSS file address"/>

You may have noticed us do something similar with the <img> tag:

<img src="web address"/>

Most tags are not self-closing, but we'll point out the self-closing ones to help save you time and typing.

index.html

!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

</body>

</html>

Add a <link> to stylesheet.cssbetween your <head></head> tags.
Change the <h1> header's font to Verdana. (Make sure Verdana is capitalized as shown!)
Change the <h3> header's font to Courier. (Make sure Courier is capitalized as shown!)
Make the paragraph text colorpurple.
Add a comment to the CSS tab! It can say anything you like. (Remember: HTML comments and CSS comments are written differently

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<h1>Change me to Verdana.</h1>

<h3>Change me to Courier.</h3>

<p>Make me purple!</p>

</body>

</html>

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<h1>Change me to Verdana.</h1>

<h3>Change me to Courier.</h3>

<p>Make me purple!</p>

</body>

</html>

stylesheet.css

h1{ font-family: Verdana;

}

h3{ font-family: Courier;

}

p { color: purple;

</*-- comment */>

}

You've noticed that when we've asked you to set color properties using CSS, we've been having you type things likecolor:red. You may have asked yourself: what if I want maroon? Or fire engine red? Or more of a red-orange? Does CSS know all those words?

The answer is no. It can, however, understand millions of colors in the form of hexadecimal values.

You're already extremely familiar withdecimal values: it's everyday counting! You know when you see a number (e.g.1,432) that each digit can only be the ten values 0 through 9. Because there are only ten possibilities, we say that regular counting is base-10.

Hexadecimal counting is base-16. Each digit can be the numbers 0 through 9or the letters a through f! Crazy, right? Check it out:

index.html

<!DOCTYPE html>

<html>

<head>

<title>Result</title>

</head>

<body>

<h1>I'm maroon!</h1>

<h2>I'm coral!</h2>

<h3>I'm goldenrod!</h3>

<h4>I'm sea green!</h4>

<h5>I'm royal blue!</h5>

</body>

</html>

stylesheet.css

h1 {

color: #8B1C62;

}

h2 {

color: #FF7256;

}

h3 {

color: #FFC125;

}

h4 {

color: #54FF9F;

}

h5 {

color: #530EE8;

}

h6 {

color: #8B668B;

}

There are a lot of tools available on the Internet for looking up hexadecimal (or simply hex) color values.

Search for "hex color palette" or "hex color picker" with your favorite web browser to find a bunch of options!

Hex values always start with a pound sign (#), are up to six "digits" long, and are case-insensitive: that is, they don't care about capitalization.#FFC125 and #ffc125 are the same color.

index.html

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>Result</title>
</head>
<body>
<h3>Roses are red.</h3>
<h2>Violets are blue!</h2>
</body>
</html>

stylesheet.css

h3 { color: #cc6666;
/*Add your CSS hex color here!*/
}

h2 { color: #8a2be2;
/*Add your CSS hex color here!*/

}

HTML

Monday, September 2, 2013

CSS: an overview

No comments:

Post a Comment