4.3 - Organization & Style

Today's lesson is mostly live demo. If you miss class, click the links below to learn independently (and ask a classmate).


Part 1: Organization

Keeping your files organized is very important. Imagine how many files are on Wikipedia.org or Amazon.ca?

Developers use folders and proper naming conventions to make their work easier. Let's look at a typical structure:

Part 2: Style

Modern HTML has three main parts:

At this point we know enough about HTML to get some text and images on the screen. But what if you want to change the font or colour or size? That's where Cascading Style Sheets (CSS) comes in.

Three ways to add Style to our HTML:

It is best practice to use option 3 at all times.

Essentially, HTML is for the content of a page and CSS is for the style of the page. This separation also helps with organization and you can apply the same style on any page you want without having to copy and paste the code!

Learning how to style elements is a very independent thing. The Internet is filled with tutorials and examples. Your best bet is to look it up and try to keep things as simple as possible at first!

Step 1:
Read about the CSS Box Model

Step 2:
Read about CSS Selectors

Step 3:
Just keep practicing and learning...

Practice Time!