Your First Web Site: The Basics Introduction to CSS Part III

In Part II the focus was on how HTML described content. A very simple primitive web page was created with no styling applied to the web page. The output to the browser window looks more like something that you would see in a word processor, something very generic like a letter or essay.

Part III builds upon part II. In this part cascading style sheets will be introduced at the most basic level

Three different ways of using style sheets will be discussed and they are:

1. External Style Sheets
2. Internal Style Sheets
3. Inline Style Sheets.

Each Style sheet has its own use, if you’re setting up multiple pages then the external style sheet is the better choice, on the other hand, if you are creating a single page then the internal style sheet is the best choice. If you are just intending of change the style inside a previously declared id or a single occurrence of a style the inline style sheet may be worth consider. All three are discussed in the video.

Selectors have three main components to them and they are

1. declaration
2. Property
3. value

There are three types of selectors;

1. The Element Selector
2. The Class Selector
3. The Id Selector.

Selectors are talked about in greater details in the video and the notes.

To conclude style sheets determine the appearance, feel and layout of your webpage or websites.

---

files for this tutorial can be downloaded here click here to download

Advertisement

Your First Web Site: The Basics Part II

Part II is a continuation from part one before the basics.  The video demonstrates how to build a very basic primitive web page. The div, span, hr, and br tags are introduced.  Once the tutorial is completed you should be able to replicate the page.

When you display the page on your browser all you will see is the content, it will not look pretty because all that has been accomplished is that the Markup language (HTML) has only described the content to be displayed.

In Part III CSS2 & 3 will be introduced to demonstrate how you can change the appearance of your page, like all the videos you learn by doing.
Each video has the accompanying working files and notes for those who wish to have some theory to what they are doing.

The corresponding files and notes to the video can be found here. You will need an unzipping program like winzip, or 7-zip. You can download 7-zip for free at http://www.7-zip.org/

In the demonstration, I use the opensource text editor brackets here is the link where you can download this editor: http://brackets.io/

---

 

Your First Web Site: Before The Basics Part I

This series of HTML tutorials are for those who have absolutely no experience with HTML (HyperText Markup Language) or with CSS (Cascading Style Sheets). Each Tutorial includes a Video, Notes and Skeleton files. The Video focuses on learning by example and learns by doing, while it is not necessary to read the notes the notes may be helpful for those who likes written instruction.
This first tutorial “Your First Web Site: Before The Basics” discusses and demonstrates;

The four essential HTML tags to technically produce a web page.

1. Tags without content will produce a blank web page.
2. The Structure and Format of the four essential tags.
3. The why its is good practice to include the DOCTYPE declaration on line 1
4. The use of meta tags to let the browsers know what Character set that will be used and to tell the browsers that your page is scalable to the view port of any devices which may view your web page.
5. A demonstration of the  <h1, h2, h3> Tags and the <p> tags.

---

Link to notes and files used in video click here