Overview:
There are 2 important categories in web design:
- HTML- Hyper Text Mark-up Language (I won't ask you to repeat it!)
- CSS- Cascading Style Sheets (It may come up again!)
You use both aspects when designing web pages and there is overlap in the way they can be used to control elements on a page. If you stick with the following 2 principals your web pages will:
- be easier to manage
- look more consistent browser to browser, and
- will continue to work for a longer period of time
#1 CSS
All formatting elements should be controlled by CSS, and most page layout/design
#2 HTML
Control all content using HTML
There are times when you overlap these concepts, but the more you adhere to these 2 principals, the more likely your success in building web pages
Details
CSS
There are 3 types of CSS:
- ID's
- Classes
- HTML tag re-definition
ID's
- Use a # symbol to define. A simple example might be #nav { ... }to control navigational elements on a page
- Notice the use of the brackets. They are very important in CSS
- An ID may be used only once on any web page
Classes
- Use a . symbol to define. A simple example might be .emphasis { ... }to create some text emphasis on a page
- Once again, brackets are important when you build a CSS class
- Classes can be called repeatedly on any web page
Tag redefinition
Is hard to explain without more experience. Suffice it to say that any HTML tag can be defined in CSS to look and act the way you want. Very powerful!
HTML
Things to remember/know:
- HTML "tags" are used to control different elements on a page
- There are thousands of HTML tags and all have an intended purpose
- Designing your web pages with correct tag useage is very important
- All tags use <...> symbols. A simple example is <div>, to create "divisions" on a page
- Tags have an "opening" and a "closing". So, a division on a page would look something like:
- <div> text or other info </div>
- The opening and closing tags are VERY IMPORTANT in HTML
- To complicate matters... some tags are "self closing". A simple example is a line break or <br />.
- We will discuss these specialty cases as they come up
Concluding...
That is enough to get started.
Some simple things to remember...
- When you see #{...} or .{...}, think CSS and formatting/page layout
- When you see <tag>... </tag>, think content
