Scribd
Upload
764 views

HTML and Css Notes

The document provides an introduction to HTML and teaches how to write basic HTML code by hand. It explains important HTML elements like <p>, <h1>, <ul>, <li> and how they are structured and nested within a webpage. It also demonstrates how to save an HTML file and view it in a web browser.

Uploaded by

barry_john06
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
764 views

HTML and Css Notes

The document provides an introduction to HTML and teaches how to write basic HTML code by hand. It explains important HTML elements like <p>, <h1>, <ul>, <li> and how they are structured and nested within a webpage. It also demonstrates how to save an HTML file and view it in a web browser.

Uploaded by

barry_john06
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 59

1

HTML Lesson 1: What is HTML?


Posted on May 4, 2012 by Brad

Are you a graphic designer who needs to convert a Photoshop layout into a dynamic web page? If you want your website to be accessible, quick-loading, and easy-to-edit you will need to learn a computer language named XHTML.

<p> is for Paragraph


XHTML is the language that web pages are written in; it is the code that your web browser uses to assemble the pages you view. For example, you recognize this block of text as a paragraph, but your web browser doesnt understand the word paragraph. Instead, the HTML code for paragraph is <p>. HTML codes (also known as elements) are wrapped in brackets. For example, the HTML code for image is <img>. In short, XHTML is a language used to describe content; we give different types of content their own different and semantically chosen labels. Before we go any further it is important to note that XHTML is NOT for adding style (colors, fonts, sizes, background images, etc) to web pages. That is what Cascading Style Sheets (CSS) are for. XHTML is for raw content and raw content only. This idea of separating content and style (presentation) is important, and will become clearer as you move through these lessons. For now, forget about it, and enjoy the rest of this lesson.

What Does XHTML Look Like?

Lets kick things off by using XTHML code to actually create a couple paragraphs of text. Here is what the code would look like:
<P>This is our first sample paragraph. two sentences.</p> This paragraph has only

<p>This is the second paragraph; with only one sentence!</p>

It is important to note that both of our paragraphs were followed by a </p> code. This end tag corresponds with the opening <p> start tag, and together the two tell the web browser where we want our paragraph element to start and end.

Its (almost) That Simple!

Thats it! You just taught yourself the fundamentals of XHTML! Now you just need to learn the codes for all the different elements that make up a page. For example, aside from paragraphs (<p>) and images, (<img>) what elements do you commonly find on web pages? Below is a short list of some of the most basic HTML codes. Dont worry about memorizing them right now, just take a quick look and notice how intuitive most of the codes are.
<div>Division or Section of Page</div>

<a>Link</a>

<ul>Unordered List</ul>

<li>List Item</li>

<h1>Header (most important header)</h1>

<h2>Header (second most important header)</h2>

<h3>Header (third most important header) etc</h3>

<table>Table</table>

Its not THAT intimidating, right? Now we just need to learn the rest of the elements, how they relate to one another, and how to organize them within a page. In our next

lesson, you will learn how to use XHTML code to create and save a page and view it in your web browser.

HTML Lesson 2: How To Create and Save Your First HTML File By Hand
Posted on May 4, 2012 by Brad

Its time to get your hands dirty and write your first XHTML file. Lets begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (look in your Start Menu for it, or simply hold down the Windows Key on your keyboard and press R, then type notepad into the run command prompt and press enter). If you are using a Macintosh computer, launch the application named TextEdit (which can be found in your Apps folder). As a coder, it is our job to turn this blank canvas of a document into a XHTML masterpiece. Lets begin by entering the following code into our blank text document, (or utilize your computers copy and paste function and lift it directly from below):
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Relax, I dont expect you to understand this code! For now, just know that this code tells the web browser what computer language we are using (XHTML). You will begin every web page you ever create with this code.

Writing XHTML is Like Making Sandwiches


We are now ready to begin the actual structure of our page. Begin by adding the following code to your document, directly below our last piece of code:
1 <html>

</html>

The start-tag <html> tells the web browser that we want to begin our document; similarly the end-tag </html> tells the browser we want to end our document. If our page is a sandwich, the <html> start and end tags are the slabs of bread. Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the <html> start tag:
1 <body>

</body>

The <body> element signifies the portion of our document that will house our actual content (paragraphs, images, etc). You may be thinking But I thought thats what the <html> tags did? In fact, the <html> element houses everything, both our actual content (which goes inside the <body> element) and more complex elements that we will learn about in future lessons. For now, just know that the <body> element goes inside the <html> element. This is what your document should look like so far:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<body>

</body>

</html>

Finally, The Fun Part


Now, lets add our first bit of content to our page! How about a big bold heading? Add the following code underneath the <body> start tag:
<h1>This is a big bold heading</h1>

This code raises a good question for the beginning coder: How am I supposed to know what element to use? How did you decide on using the <h1> tag? We decided to use the <h1> element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize <h1>, <h2>, and <h3> tags to create a hierarchy of importance for our content.

Russian Stacking Dolls

At this point, it is helpful to think of XHTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc Our header rests inside our <body> element, which rests inside our <html> element. To fully illustrate this point, lets add a bulleted list to our page. Add the following code directly beneath your</h1> end tag:
1 <ul>

<li>Milk</li>

<li>Bread</li>

<li>Eggs</li>

</ul>

The <ul> element is code for Unordered List and the <li> element is code for list item. Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list.

Saving Your Document


Now is a good time to save our document and then see how it looks in our web browser. From within your text editing program, click File, and then Save. Just so were on the same page, lets agree to name the file test.html. It is very important that our file ends with the .html extension. This tells our computer what type of file our document is (a web page of course!). If youre on a Windows PC, be

sure to click the dropdown box below the file name input, labeled Save as type: and select the option All files. This will insure your document is saved in the correct format. Go ahead and save your document.

Viewing Your File In a Web Browser

Now navigate to wherever you chose to save your file (I recommend creating a new folder on your desktop to store all of your learning files) and double click test.html. This should open our page in a web browser and you should be greeted by a rather simple looking header which reads This is a big bold heading followed by a bulleted list of grocery items.

Giving Your Page a Title


You may have noticed that our page doesnt have a title (usually displayed in the title bar of our web browser). Web page titles are an absolute necessity, as they play a huge roll in search engines being able to find your pages. Now that you are a little more familiar with the syntax of XHTML, lets go ahead and give our page a title. The <title> element should be stored in a new section of the page named <head>. In future lessons you will learn more about the <head> element, but for now just know that it is used to hold our pages title. Add the following code directly below our <html> start tag:
1 <head>

<title>My First Page</title>

</head>

From within your text editing program, save your document, and then switch to your web browser window and refresh the page (pressing Control + R refreshes on a Windows PC, and Cmd + R refreshes on a Macintosh computer). Notice that our page now has a title in the web browser title bar.

Just One Last Step!


Before we finish this lesson, let us add two more bits of code that will help all web browsers better understand our code. First, we are going to edit the start tag for our <html>element to match the code below:
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

Also, insert the following line of code directly below the <head> start tag:
1 <meta http-equiv="Content-Type" content="text/html; charset=utf8"/>

This marks the first time youve seen an equal sign or quotation marks inside an XHTML element. You will learn about this new syntax in the next lesson (XHTML Attributes and Values) but for now just be content with copying and pasting this code and knowing that it makes your page complete! You just wrote a 100% valid web page from scratch! By hand! That is more than some professional web developers can say. Remember, no one ever promised that your first web page would be beautiful! Whats important is that you now know how to write your own XHTML code and create basic web pages. You may think Yes, but I dont know all of the element codes. Without someone telling me which element to use to describe a piece of content Ill be lost! Let me offer you some words of comfort: you already know more than you realize. I would estimate that 95% of websites use the same basic collection of XHTML elements that a beginner can master quickly and easily. Follow the rest of my lessons and you will be completely proficient in writing XHTML in no time! For your reference, here is the code we just put together, in its entirety: view source print?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 4

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My First Page</title>

10

11

</head>

12

13

<body>

14

10

15

<h1>This is a big bold heading</h1>

16

17

<ul>

18

<li>Milk</li>

19

<li>Bread</li>

20

<li>Eggs</li>

21

</ul>

22

23

</body>

24

25

</html>

HTML Lesson 3: Attributes and Values: How to Create a Hyperlink


Posted on May 4, 2012 by Brad

In our previous lesson, you encountered equal signs and quotation marks inside a XHTML element for the first time. In todays lesson, you will learn how to use equal signs and quotation marks to create attributes and values.

Be Sure To Follow Along

11

Before we continue, I encourage you to follow along by copying and pasting todays code into your own XHTML document (or the page we created in our previous lesson: How To Create and Save Your First XHTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability. We will use a file name of test.htm for our first page in this lesson.

First Look at Attributes and Properties


Lets begin by analyzing a piece of code that makes use of attributes and values. The code used to create a hyperlink (or simply, a link) is the perfect example. Add the following code to your test.htm page between the <body> and </body> tags:
1 <a href="newpage.htm">Our New Page</a>

Lets dissect what is going on in this code. First, <a> is the HTML code for creating a link (or anchor). However, we cannot simply wrap text in <a> start and end tags the way we would if we were creating a paragraph of heading. While that is how we define what the clickable link says, we need to specify the location for our web browser to navigate to when we click the link. Thats where attributes and values come into play.

Link Location

The letters href stand for Hypertext Reference and serve as an XHTML attributewhich contains a custom value; in this case the custom value is the link location. In this example our value is newpage.htm because we are going to create a second page to link to.

First, Create The New Page

Create a new empty XHTML page named newpage.htm in the same directory as your test.htm file and place the following code inside its <body> and </body> tags:
1 <h1>New Page</h1>

2 <a href="test.htm">Back

12

to original page.</a>

The Worlds Simplest Website

When you view test.htm in a web browser, youll notice we have constructed a simple two page website. In a few short lessons youve already learned the essence of the entire internet; pages linking to other pages.

Lets Add Another Attribute


To make sure you understand the syntax and formatting, lets add another attribute to our link on the test.htm page; lets give our link a title. Link titles are seen when you hover your mouse over a link for a second or two (link titles also have much more important purposes that you will learn about in later lessons). We will achieve this by using the title attribute and assigning it a custom value of Our new page is extremely new:
1 <a href="newpage.htm" title="Our new page is extremely new">Our

13

New Page</a>

Now when you view test.htm in a web browser and hover over the link for a few consecutive seconds you will see our title; all thanks to XHTML attributes and values. In our next lesson we will continue our study of attributes and values by learning how to insert an image into a web page.

HTML Lesson 4: How to Insert an Image in HTML


Posted on May 4, 2012 by Brad

As you recall from Lesson 1 (What is XHTML?), adding a paragraph in XHTML is as simple as wrapping text in <p> and </p> tags. Adding an image, however, is a little more complicated.

Follow Along

Before we continue, I encourage you to follow along by copying and pasting todays code into your own XHTML document (or the page we created in Lesson 2: How To Create

14

and Save Your First XHTML File by Hand). This will allow you to edit the text, and refresh the file in your web browser as we make edits. This will greatly enhance your learning ability.

A Funny Dog

Lets pretend we have an image of a dog on our computer saved as funny-dog.jpg and we want to insert it into a webpage; this is the code we would use:
<img src="funnydog.jpg" />

Lets analyze this code. First, <img> is the code for creating an image element. Next, the letters src are used as an attribute (which you learned about in Lesson 3: Attributes and Values) and stand for source. Basically, we need to provide the web browser with avalue to the source of the image. Naturally, the value for the source attribute is funny-dog.jpg. This example assumes your image file is located in the same directory as your XHTML file. If, for example, you had your image file inside a folder named images your code would look like this:
1 <img src="images/funnydog.jpg" />

15

Self Closing Elements


As you can see, in both code examples so far there has not been an ending </img> tag, because the image code is a self closing element. This is because unlike a paragraph, we wont have a plethora of content inside our <img> element, but rather a single image. The/> at the end of the code tells the web browser to end the image element. There is one additional bit of code we must add before we are finished. We must assign an alt attribute and value to our image. The alt attribute stands for alternative and is used to provide a text-based alternative for viewers incase the image will not load, or if they are visually impaired. Here is what our code will look like:
<img src="funny-dog.jpg" alt="A funny dog sitting on the grass. " />

Thats it!

HTML Lesson 5: How to Write HTML Code So Your Pages Can Easily Be Styled Via CSS Later
Posted on May 4, 2012 by Brad

16

If you have followed my first four XHTML lessons you are now familiar with the basic syntax of XHTML. While there are HTML elements that you havent learned yet, it is safe to say that you know the basics and are ready to try something new and exciting.

Wheres All The Style?


You may have noticed that all of the code weve written so far looks incredibly boring when viewed in a web browser. We havent created any elegant layouts with columns, and all of our text is boring and black and rendered in an ugly default font. This is because XHTML is meant to simply markup and describe content elements; it is not intended to add style to a page.

Another Language: CSS


There is a different computer language named CSS (short for cascading style sheet) that is used to add style to pages. We are not going to learn CSS in todays lesson (but when you are ready, visit the CSS Lessons page), instead we are going to learn how to setup our XHTML pages so adding style via CSS will be smooth and painless.

Our Task For Today


For todays project, lets imagine we need to create a webpage that has a heading, 3 columns of content, and a footer.

Meet Your Best Friend; The <div> Element


While there is not a XHTML element for creating a column, the <div> element is used to divide pages into meaningful sections which can then be converted to columns through the use of CSS. Lets begin coding! I urge you to follow along by typing, or copying and pasting todays code as we go (learn how to create an XHTML file). Well start with our typical XHTML starter file that we learned about in Lesson 2:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en">

17

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>My First Layout</title>

</head>

10

11

<body>

12

13

</body>

14

</html>

Time To Add Content Our First Column


Now lets begin adding our content; well start with our first section (or column) of content. Lets place a list of links in this column; add the following code directly below our <body>start tag:
1 <div>

<ul>

18

<li><a href="#">Sample Link One</a></li>

<li><a href="#">Sample Link Two</a></li>

<li><a href="#">Sample Link Three</a></li>

<li><a href="#">Sample Link Four</a></li>

</ul>

</div>

Nothing in this code should come as much of a surprise. You should recognize the format for creating a list from Lesson 2, and the format for creating a link from Lesson 3, and as we learned just minutes ago, the <div> element is used to divide the page into meaningful sections which we can later turn into columns.

19

Our Second Column


Now, lets create our second (middle) column. This column will contain our primary content, which in this case will be a few headlines and sample paragraphs of text:
1 <div>

<h2>Sample Heading</h2>

<p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>

<h3>A Slightly Less Important Heading</h3>

<p> This is a sample

20

paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>

</div>

Our Third Column


Next, our third column will be nearly identical to our first; a simple list of links:
1 <div>

21

<ul>

<li><a href="#">Sample Link Five</a></li>

<li><a href="#">Sample Link Six</a></li>

<li><a href="#">Sample Link Seven</a></li>

<li><a href="#">Sample Link Eight</a></li>

</ul>

</div>

22

Our Footer
Finally, well add a footer.
1 <div>

<p>Copyright 2011 Learn Web Code</p>

</div>

Labeling Our <div> Elements


Now we are now going to label our <div> elements by assigning them specific classes andidentifiers so adding style to our page with CSS will be quick and easy. We will utilize HTML attributes and values (Lesson 3: Attributes and Values) to accomplish this.

Label The Side Column


Well start with our first column; our <div> start tag for the first column will now look like this:

23

<div id="sidecolumn">

We are using the id attribute and assigning it a value of side-column. This will allow us to add style to this column via CSS in our next lesson.

Label The Main Column


We will also edit the start tag for our second <div>:
1 <div id="maincolumn">

Label The Other Side Column


As you might have guessed, well now edit the start tag for our third column:
1 <div id="side-columntwo">

Dont Forget The Footer


Finally, well label our footer section:
1 <div id="footer" >

<p>Copyright 2011 Learn Web Code</p>

</div>

Thats all for today. In our next lesson we will learn the basics of CSS so we can add style to our pages. For your reference, here is the code we put together today, in its entirety: view source print?

24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 5 <head>

<meta httpequiv="ContentType" content="text/html; charset=utf-8"/>

<title>My First Layout</title>

</head>

10

<body>

11

<div id="sidecolumn">

12

<ul>

13

<li><a href="#">Sample Link One</a></li>

25

14

<li><a href="#">Sample Link Two</a></li>

15

<li><a href="#">Sample Link Three</a></li>

16

<li><a href="#">Sample Link Four</a></li>

17

</ul>

18

</div>

19

20

<div id="maincolumn">

21

<h2>Sample Heading</h2>

22

<p>This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>

23

<h3>A Slightly Less Important Heading</h3>

24

<p> This is a sample paragraph for our sample HTML file. In our next lesson we will learn how to style this page. This is a sample sentence to add more content.</p>

26

25

</div>

26

27

<div id="side-columntwo">

28

<ul>

29

<li><a href="#">Sample Link Five</a></li>

30

<li><a href="#">Sample Link Six</a></li>

31

<li><a href="#">Sample Link Seven</a></li>

32

<li><a href="#">Sample Link Eight</a></li>

33

</ul>

34

</div>

35

36

<div id="footer">

37

<p>Copyright 2009 Learn Web Code</p>

27

38

</div>

39

40

</body>

41

</html>

This entry was posted in HTML Lessons. Bookmark the permalink.

CSS Lesson 1: What is CSS?


Posted on May 4, 2012 by Brad

So you want to learn CSS? Great decision; CSS is the language for web and graphic designers to learn. Short for Cascading Style Sheet, CSS is the language used to add style to HTML elements. If you are unfamiliar with HTML (or XHTML) you will have little use for CSS, so I recommend you begin reading my XHTML Lessons.

A World Without Style

Imagine you have a web page written in XHTML with your main heading inside a <h1> element and a few paragraphs in <p> elements. Without any CSS, most web browsers will render your page in a plain black text, with your <h1> in a large, bold font. Your paragraphs will fill the entire width of the browser, resulting in impossible-to-read line lengths (the human eye prefers only around 12 words per line). To put it bluntly; your pages will look horrible.

CSS To The Rescue


We need CSS to add our own custom styles; we need CSS to add color, size, columns, and layout; we need CSS to beautify our typography; we need CSS to add background textures and images. If good HTML is the key to an organized, accessible web, then CSS is the key to a beautiful web. CSS puts the design in Web Design.

28

How It Works
Cascading Style Sheets are simple text files saved in a .css extension which contain styleRules. For example, lets imagine we had a <h1> heading element on a page, and we wanted to make it orange, and center aligned. Here is the code we would add to our .css file:
1 h1 {

color: orange;

textalign: center;

29

Lets Dissect The Code


Relax, I dont expect you to understand this code yet! Although you have zero training to understand the syntax of the code, if you speak English odds are you can make a little sense of it. The following graphic explains the syntax of the code:

Our CSS Rule begins with h1 which is our CSS selector. The selector tells the web browser which XHTML element we wish to style. Next, the word color is a property and orange is its value. A property and value pair together and create a declaration. We create complex style rules by stringing together multiple declarations, which are separated by semicolons. This entire piece of code, including the selector and declarations, is known as a CSS Rule. Finally, directly preceding, and directly following the declarations we enclose our Rule in curly brackets (found on your keyboard by holding shift and pressing the buttons directly to the right of your P key). Thats it for todays lesson. Youve learned a great deal of new material, so lets recap.

CSS styles the HTML elements of a web page Cascading Style Sheets are simple text files Style sheets are made up of Rules Rules are made up of selectors and declarations.

30

Declarations are made up of properties and values. In our next lesson we will learn how to write and save our first CSS file, and more importantly, how to link it to an XHTML page.

CSS Lesson 2: How To Create Your First CSS File


Posted on May 4, 2012 by Brad

Today we are going to write and save our first CSS file. Lets begin by opening a text editing program. If you are on a Microsoft Windows PC open the program named Notepad (hold down the Windows Key on your keyboard and press R, then type notepad and press enter). If you are using a Macintosh computer, launch the application named TextEdit (which can be found in your Apps folder).

Lets Write Our First Bit of CSS

Lets imagine we have a simple web page with a heading, and we want the heading to be orange and center aligned. Add the following code into your new blank text document:
1 h1 {

color: orange;

textalign: center;

Hopefully, you remember this code from our previous lesson. The task for today is to save our CSS file and link it to an XHTML page.

Step 1: Saving The CSS File


Create a new folder on your desktop (or another location you prefer) and name it CSSTest. Now, back in your text editing program save your document as style.css.

31

Linking CSS File to an XHTML Page


Our new CSS file is worthless if we dont apply it to a web page. Lets create a quick XHTML page for this lesson. Create a new blank file in Notepad (or TextEdit) and add the following code:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 5 <head>

32

<meta httpequiv="ContentType" content="text/html; charset=utf-8"/>

<title>CSSTest</title>

</head>

<body>

10

11

<h1>CSSTest</h1>

12

13

<div id="box -one">

14

<p>This is box one.</p>

15

</div>

16

17

<div id="box -two">

33

18

<p>This is box two.</p>

19

</div>

20

21

</body>

22

</html>

If youve read my first few XHTML Lessons, then this code is at least somewhat familiar. Ill explain it as the lesson continues; for now save this document in our CSS-Test folder and name it index.htm.

Linking the Two Files Together

34

We still need to tell the web browser to load our style.css file when the index.htm page is viewed. Add the following code to index.htm directly above our </head> closing tag:
<link rel="stylesheet" href="style.css" type="text/css"media="screen, projection" />

This line of code tells our browser that we want to link a Style Sheet, that its located in the same folder as our XHTML page, and that its named style.css. Now, when you view index.htm page in a web browser you should see a centered, orange heading:

Lets Style Those Two Boxes

35

If you look at the code of our XHTML page, youll see two <div> elements. We added an HTML attribute of id for these two elements and assigned them values of box-one and box-two. We can use an elements id to select and style it with CSS. For example, lets make the first box gray, and the second box yellow. Add the following code to your CSS file, directly below our original <h1> rule:
1 #box-one {

backgroundcolor: gray;

#box-two {

backgroundcolor: yellow;

padding: 10px;

When an element has an id we can access it with a CSS selector by placing a pound sign (#) in front of its id value. So to select the first <div> element we simply type #box-one and then begin our CSS Rule.

Our New Fancy Boxes


When you save your CSS file and refresh our XHTML page in a web browser you should see something very similar to this:

36

Yay For Style


It may not be beautiful, but we styled our first XHTML page with CSS! Lets recap your CSS knowledge so far. You know:

The basic syntax of CSS (covered in our previous lesson) How to link a CSS file to an XHTML page How to select certain HTML elements and style them

CSS Lesson 3: Basic CSS Selectors


Posted on May 4, 2012 by Brad

CSS Selectors allow us to target specific HTML elements with our style sheets. While there are many different types of CSS Selectors, todays lesson focuses on the four essential selectors; Type, ID, Class and Descendant selectors.

First We Need a Page To Style

37

CSS isnt very useful without a page to style. Create a blank text document, and copy and paste the following XHTML:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"lang="en"> 5 <head>

<meta httpequiv="ContentType" content="text/html; charset=utf-8"/>

<title>CSS Selectors</title>

<link rel="stylesheet" href="style.css" type="text/css"media="screen, projection" />

</head>

10

11

<body>

12

38

13

<h1>CSS Selectors</h1>

14

15

<div id="intro" >

16

<p>This is the <em>first</em> paragraph.</p>

17

<p class="important">This is an <em>important</em> paragraph inside the Intro Div.</p>

18

</div>

19

20

<p>This is a regular paragraph.</p>

21

<p class="important">This is an <em>important</em> paragraph that is not in the Intro Div.</p>

22

23

</body>

24

</html>

39

Create a new folder named CSS-Selectors on your desktop or any other location you prefer. Then, save our document in this folder with a file name of index.htm.

The Page Without CSS

Open index.htm in a web browser, and you should see something very similar to this:

Let the CSS Begin


Now, create a new blank text document and save it in our CSS-Selectors folder with the file name of style.css. We are now ready to start styling our page with the four essential Selector types.

1 Type Selector
Type Selectors are very simple. They correspond with any HTML element type. For example, add the following code to your blank CSS file; these are three simple Type Selectors:

40

body {

fontfamily: Arial, sansserif;

fontsize: small;

h1 {

color: green;

10

em {

11

color: red;

12

This code selects and styles our <body> element, as well as all <h1> and <em> elements on our page.

41

2 ID Selectors
If you take a look at the code of our XHTML page, youll notice we have a <div> element with an ID of intro. We assign elements IDs when they are unique on a page; there is onlyone intro section on our page. This is important, because two elements cannot have the same ID. When an element has an ID we can access it with a CSS selector by placing a pound sign (#) in front of its ID value. Add the following code to your CSS file, directly below our <h1> rule:
1 #intro {

fontsize: 130%;

border: 1px solid black;

42

3 Class Selectors
Class Selectors are very similar to ID Selectors. The major difference is that while a certain ID should only be assigned to one element, we can assign the same class to as many elements as we want. If you look at the code of our XHTML page, youll notice that two of our paragraph tags have a class of important. When an element has a class we can access it with a CSS selector by placing a period in front of its class name. Lets add the following rule to our CSS file to make these paragraphs stand out:
1 .important {

backgroundcolor:

43

yellow;

4 Descendant Selectors
Imagine we wanted the important paragraph in the intro Div to look different than the important paragraph at the bottom of the page. We can use a Descendant Selector to achieve this. Add the following CSS rule at the bottom of our CSS file:
#intro .important {

44

backgroundcolor: orange;

Lets dissect how the selector is working. It begins with #intro which selects our Intro Div. This is followed by a space, and then .important. So essentially our selector is telling the web browser to (1) find the element with the ID of intro, (2) go inside that element and find any elements with the class of important.

Notice that within the orange paragraph, the word important is red. Lets imagine we want to change the color, since red text on an orange background is difficult to read. The word important is inside an <em> element, so well use the following code to select and style it;
#intro .important em {

45

color: white;

This code is telling the browser to (1) find the element with an ID of intro, (2) go inside that element and find any elements with a class of important, (3) go inside that element and select any <em> elements.

Thats it for todays lesson. Lets recap: Type Selectors correspond with HTML elements ID Selectors are used by adding # in front of an elements ID Class Selectors are used by adding a period in front of an elements class Descendant Selectors are similar to family trees; you start with the parent element you wish to select, add a space, and continue naming any interior elements until youre arrived at the specific element you wish to select In our next lesson we will begin studying the essence of all CSS Design; The CSS Box Model.

46

CSS Lesson 4: Understanding The Box Model Part 1: Padding


Posted on May 4, 2012 by Brad

In our previous lesson we learned the basic syntax of CSS code. We are now able to apply basic styles like defining a color or center aligning text. But before we can learn advanced CSS techniques we must study what is known as The CSS Box Model.

Elements Are Rectangles

First, you will need to begin thinking of every XHTML element as a rectangle (or box). We style our boxes by assigning properties such as widths, margins, borders and padding. Our goal for today is to understand the CSS property padding and how it affects our elements. I have created a graphic to help visualize the padding property:

As the graphic hopefully conveys, padding is used to create space between the edge of our HTML element, and the content (usually text) that the element houses.

Padding Affects The Width of Elements


One of the trickiest aspects of CSS is keeping track of the true width of your elements. For example, how do things like padding, borders and margins affect the width of an element? Lets begin coding to discover our answer. I encourage you to follow along in your own text editor.

Our First <div> Is Our Base


First, lets create a <div> element with an ID of base and include some text inside of it. Heres the XHTML code well insert into a new web page.

47

<div id="base" >

This is 300 pixels wide.

</div>

Now, lets make our base 300 pixels wide and give it a background color so we can easily see its width in our web browser. Here is the CSS code well insert into our CSS file:
1 #base {

width: 300px;

background-color: yellow;

48

Now if we view our webpage in a web browser well see a yellow box which measures 300 pixels wide.

The Experiment <div>


Lets create a second <div> with an ID of experiment and place it directly below our base. Well use this new <div> to test properties like padding, margin, and border. Here is the XHTML code youll add:
<div id="experiment" >

This is the experiment.

</div>

49

Next, well give our experiment <div> a width of 300 pixels, a background color of orange, and 10 pixels of padding:
1 #experiment {

width: 300px;

background-color: orange;

padding:

10px;

Unequal Widths

50

When we refresh our page in a web browser we see that our new orange <div> is wider than our first <div>. We assigned it the same width of 300 pixels but our 10 pixels of padding tipped the scales. Notice how our text in the orange box is 10 pixels inside the left edge of the <div> element? There is also 10 pixels of padding on the right side of our box, so overall our new box is 20 pixels wider than our gray base.

Making the Widths Equal


Lets pretend we want our orange <div> to match our gray <div> in width. This requires us to lower the width value of the orange <div> by 20 pixels to compensate for the padding we added. Lets edit our CSS width declaration for our experiment <div>:
1 #experiment {

width: 280px;

background-color: orange;

padding:

10px;

51

When we refresh our page in a web browser we see that the two <div> elements are now equal in width. We now have a basic understanding of how the padding property works. It gives the content inside an element, in this case our text, room to breathe from the edge of the element. Padding also changes the width of an element and we learned how to use some basic arithmetic to keep our elements even. In our next lesson we will continue to examine the CSS Box Model by learning about the margin property.

CSS Lesson 5: Understanding The Box Model Part 2: Margin


Posted on May 5, 2012 by Brad

As you begin designing layouts with CSS you will inevitably need to create spacing between elements; thus, todays lesson is regarding the margin property. Lets begin with a quick image to illustrate the margin property in action:

52

Margin is space added to the outside of an element (past the elements edge, or border). In some instances, Padding and Margin can be used to achieve a similar affect, but its important to understand the difference. Padding adds space to the inside of an element, while margin adds space to the outside of an element. Lets code a simple example of margin in action. Begin with the following HTML code, and place it in a blank XHTML starter file.
1 <div id="boxa">

<p>Box A</p>

</div>

<div id="boxb">

<p>Box B</p>

</div>

Next, lets give these two boxes a width, background-color, a border and padding. Add the following code to your CSS file:

53

#box-a {

width: 300px;

padding: 15px ;

backgroundcolor: orange;

border: 1px solid black;

#boxb {

width: 300px;

10

padding: 15px;

11

backgroundcolor: gray;

12

border: 1px solid black;

13

When viewed in a web browser, our example should look like this:

54

Now imagine we want to create 10 pixels of spacing between the two boxes. We would achieve this by adding bottom-margin to box-a:
1 #box-a {

marginbottom: 10px;

width: 300px;

padding: 15px;

background-color: orange;

border: 1px solid black;

When refreshed in our web browser, our page should now look like this:

55

You may wonder, Could we have also added margin-top to box-b? Lets do that now; lets double the space between the boxes by adding another 10 pixels of margin to box-b:
1 #box-b {

margintop: 10px;

width: 300px;

padding: 15px;

background-color: orange;

border: 1px solid black;

When you refresh the page in your web browser, youll notice that the spacing didnt double; it stayed exactly the same. This is because two margins are touching, so onecollapsed. Essentially, when two margins touch the larger margin is used, and the smaller disappears (or collapses).

56

To fully illustrate this point, lets change the margin-top of box-b from 10 pixels to 11. When we refresh the page in our web browser well notice that the spacing hasnt ballooned to 21 pixels, but instead has increased by only one pixel.

The browser uses the 11 pixel margin of box-b and collapses the smaller 10 pixel margin of box-a. Thats all for todays lesson. To recap, you now know:

The difference between margin and padding How to use margins to create spacing around elements How the smaller of two touching margins collapses

CSS Lesson 6: Shorthand Properties (Padding and Margin)


Posted on May 5, 2012 by Brad

The padding and margin CSS properties are essential in building web layouts. Since rectangles (block level elements) have four corners, you will frequently need to assign four different padding properties to one element. If you are a beginner, this is the code you would likely use:
1 #header {

paddingtop: 10px;

paddingright: 15px;

57

paddingbottom: 6px;

paddingleft: 15px;

However, there is a much more efficient (not to mention easier!) way of applying four padding or margin values. Here is your first glimpse of CSS Shorthand in action; the following code achieves the same exact results as the padding example I just provided:

You simply list four values, one directly after the other, and the web browser interprets this as the four (clockwise- top, right, bottom, left) directional values. Similarly, you can also list two values in a row and the browser will interpret the first to be both top and bottom, and the second value to be both left and right.

Using this new knowledge, lets imagine we need to add 10 pixels of right margin and 15 pixels of bottom margin to an element. Heres the code we would use:
1 #header {

margin: 0 10px 15px 0;

58

We used the four-value shorthand syntax, and simply included zeroes for the directions (top and left) we didnt want to apply margin to. Thats it for todays lesson. Hopefully your CSS code will be a little cleaner with these simple shorthand methods.
Reference: http://learnwebcode.com/css-shorthand-padding-margin/

59

List of shortcut keys Shortcut Alt+, Alt+. Alt+End Alt+F4 Alt+F5 Alt+F7 Alt+F8 Alt+Home Alt+Ins BkSp Ctrl+, Ctrl+. Ctrl+/ Ctrl+A Ctrl+Alt+, Ctrl+Alt+. Ctrl+Alt+F5 Ctrl+Alt+Home Ctrl+Alt+I Command Insert start tag -- <_> or <..._> Insert end tag -- </_> or </...>_ Add end tag for the last start tag. Exit HTML-Kit. Edit the current file as a style sheet Toggle spelling error highlighting on/off Open editor content in a new browser window. Go to the matching tag for the current tag. Enclose the selected text with a specified tag... Delete character before caret Go to previous tag... Go to next tag... Unindent selected block. Select the entire file. Insert s start and end tags -- <_></> or <...>_</...> Insert empty tag -- <_ /> or <..._ /> Insert style tag -- <style>...</style> Select content between the current tag and the matching tag. Insert template...

You might also like