More with HTML and CSS

More with HTML

We have learned some of the basics of HTML. Here are a few more tips and tags.

1. HTML CSS Links to an external site.: An introduction to Cascading Style Sheets which control how HTML is displayed. Last week we applied some inline styles. This week we will add Internal style sheets.
2. HTML Tables Links to an external site.: Tables in HTML have a formal structure, rows and cells in each row. Here you will learn about the specific tags along with some styles to make sharp tables.
3. HTML Lists Links to an external site.: Here you will learn to build oredered (numbered) and unordered (bulleted) lists.
4. HTML Blocks Links to an external site.: HTML elements are either blocks or inline. Explore the different types.
5. HTML Classes Links to an external site.: Classes allow us to apply the same set of styles to a select group of HTML elements. For example, you may have a page where some paragraphs need to be right aligned with a smaller and different font.
6. HTML Layout Links to an external site.: This is one of the more important topics this week. Here we explore special block tags and how to use CSS to position them well.
7. HTML Responsive Links to an external site.: See how pages are made to adapt in a prescribed way to different screen sizes.
8. HTML iframes Links to an external site.: iframes allow you to embed other media and pages in your HTML document. For example, this is how YouTube videos can be added to a page.
9. HTML5 Style Guide Links to an external site.: Tips on how to write good HTML using the latest wisdom.
10. HTML QUIZ Links to an external site.: See what you have learned so far. This is a recommended preparation for a quiz you will take this week and the final exam you will take in two weeks.

---

CSS

CSS, Cascading Style Sheets Links to an external site., allow us to change the look of aspects of our html pages at three levels, inline, internal, and external. These tutorials from W3 schools will help develop your understanding of CSS basics. Go through each and check out the Try it Yourself examples. There are also some Exercises that you could test yourself with.

Essential Tutorials

•  CSS HOME Links to an external site.: See a short example of an embedded style sheet.
•  CSS Introduction Links to an external site.: What is CSS? What does it stand for? Try their Demo page to see how radically a style sheet can transform the same HTML page.
•  CSS Syntax Links to an external site.: CSS lingo. What is a selector? a declaration? a property? Do I really need all of those { :  ; }?
•  CSS How To Links to an external site.: There are three ways to insert styles. What order are applied in? Read about them and try them out.
•  CSS Colors Links to an external site.: Some colors have names, most don't. Hexadecimal notation is the most common way to reference colors. Try it out here.
•  CSS Backgrounds Links to an external site.: Pages can have background colors or images. Try out the different options. 
•  CSS Borders Links to an external site.: Try out the different border options.
•  CSS Margins Links to an external site.: Play with space around elements on a page.
•  CSS Padding Links to an external site.: Play with space within the box containing your page element.
•  CSS Text Links to an external site.: Text has MANY properties. Have fun with these plethora options.
•  CSS Fonts Links to an external site.: What is your favotite fomt? Arial, Times, Helvetica, Verdona, ... ? Google has Links to an external site. an amazing amount of new and old fonts for the web.
•  CSS Links Links to an external site.: Personalize the thing people click to make things more interesting.

Optional but Cute CSS Stuff

•  CSS Height/Width Links to an external site.: Just about every part of a page has a height and width that can be manipulated using different units.
•  CSS Lists Links to an external site.: Make lists prettier by playing with numbers, letters, and bullets.
•  CSS Tables Links to an external site.: Do you want more attractive tables?
•  CSS Box Model Links to an external site.: More about margins, borders, and padding; if, you want more control.
•  CSS Outline Links to an external site.: Borders beyond margins.
•  CSS Display Links to an external site.: Take a little control of the objects on your page. 
•  CSS Position Links to an external site.: Learn to move things around the screen and window.
•  CSS Float Links to an external site.: More about placing things on the screen
•  CSS Inline-block Links to an external site.: Mixing things up for more control.
•  CSS Align; Links to an external site. Left, right, up, down: Fine tune pacement.
• CSS Navigation Bar ☺ Links to an external site.: Some great examples of CSS for 
• CSS Image Opacity Links to an external site.: Learn to fade images and color for cleverly layered displays and more.

Some sites for colors:

• Color Calculator Links to an external site.
• paletton.com Links to an external site.
• Adobe Color Wheel Links to an external site.
• color-hex.com Links to an external site. 
• Color Picker Links to an external site.
• Color Mixer Links to an external site.
• Named Colors Links to an external site.