Getting Started with HTML and CSS
- Click here to see a very short list of the most basic and important HTML elements and CSS properties. This page has many links to the (fantastic) "Try It Yourself" pages from W3Schools.com.
- Click here for a CSS quick reference (examples of most common CSS properties - you can copy/paste into your web page's style sheet).
- For a complete reference of basic HTML and basic CSS, visit W3Schools
"Try It Yourself"
pages for HTML
and for CSS
The following pages demonstrate how HTML and CSS work together to create simple web layouts. When viewing the pages, right click and "View Source" so you can copy/paste into your own working document.
- Click here for a simple left nav layout from W3Schools.com.
- Click here for a simple (no floating) top nav layout from W3Schools.com.
- Click here for a layout with title and nav on the same line (using CSS float property).
for a layout with a fixed titleNav and footer.
- When an element has fixed positioning (CSS rule), that element is "removed from the normal flow" and placed wherever you specified (top/bottom, right/left) with respect to the edges of the browser window. With fixed elements, various page elements might end up in the same place, so use z-index to control which element you want to be on top. Then apply padding or margin to make sure that (for example) a footer does not cover up the bottom of the content and/or a titleNav does not cover up the top of the content.
Responsive Images, Responsive Design
- Click here for a responsive image (image width changes proportional to browser width).
- Click here for another example of responsive images (whole column of responsive images).
- Click here for an example of responsive design. In addition to having responsive images, when the browser is very narrow, a media query kicks in to change the layout for a mobile device (so that it is a single column).
- Click here for an example of responsive nav bar. When the browser is very narrow, the nav bar turns into a "hamburger menu" that drops down when you click on it.
- Click here for a hero layout (large background image - few words with large font).
- Click here for more ideas for laying out web pages this way.
Drop Down Menus
Drop down menus used to be made using hover techniques, but since there is no hover on mobile devices, we now use click events on menu headings to hide/show it's drop down elements. The examples below use a "transition" (a CSS rule for the "right" property of the .dropDown class) to provide a little animation - when the drop down menu appears, it enters from the right.
- Click here for drop down menus (using icons) on a dark title background.
- Click here for drop down menus (using icons) on a light title background.
Parallax in web design means that an image moves at a different rate that other elements on a page. This can sometimes be used to give a feeling of 3 dimension, for example, if a background image moves more slowly than a foreground image. A current trend in web design is to use parallax to have elements move at different rates when the user scrolls up or down. Here are some parallax examples.
- Click here for a simple parallax demo fixed background-images between text. Scroll up and down to see effect.
- Click here to see the same parallax demo but with a fixed nav bar (scroll up and down to see effect).
- Click here to see parallax with text inside the fixed background images (scroll up and down to see effect).
Single Page Design
Single Page Design is where you place several "Virtual Web Pages" inside of one physical web page and you use internal links for navigation.
Click here for zip file containing all above code examples
Working With Images
- There are three common image file types:
- jpg: 16 million colors (good quality image), but "lossy" compression and large files render line by line.
- png: common format has less colors (but quality still good), "loss-less" compression, supports transparency, large files render blurry to sharp.
- gif: older format, 256 colors (so small files), loss-less compression, supports animation.
- If you page renders too slowly, it may be due to large image files. You may not recognize your problem because of web caching on your development PC/MAC. Click here to learn how to Reduce Image File Size (3 Ways) using MSPaint (PC). On a MAC, you can use the same techniques from terminal - just modify the pixel count.
- Images with transparent background blend in better with your design. To learn how to Make an Image Have a Transparent Background,
Working With Colors:
- To select professional and subtle colors for your website, I recommend that you first select an image that is related to your web site's topic and that has colors that you would like to use for your web sites's look and feel. To extract color codes from an image, use a color picker plug-in like ColorZilla for Firefox and/or ColorZilla for Chrome. Once you have installed the ColorZilla Add-On, you'll see an "eyedropper" icon in the upper right of your browser and you'll be able to hover over and select colors (and copy color codes) from any part of your web page, then paste the color code into your style sheet.
- Once you have selected two or three colors, try to limit yourself to using only these colors on your site -- plus any variations of these colors which you can get by using a Color Blending website like this one. To get a lighter or darker shade, blend the color with white or black. Or you can blend two of your selected colors together. To avoid baby pastel colors, blend light colors with light gray (makes the color "less satuated"). Darker colors look fine more saturated (don't need to be mixed with dark gray).
Color Codes: The web uses an "RGB" color encoding scheme which stands for Red, Green, and Blue
(respectively). The color code can be expressed using a 6 digit hexadecimal number (with # prefix) or in decimal
(using an "rgb" prefix). In either representation, the maximum value for Red, Green, or Blue is 255 (decimal)
or FF (hex). The minimum value is zero. Here are some example color codes.
- #FF0000 or rgb(255, 0, 0): RED (fully saturated). It has maximum red, no green, and no blue.
- #0000FF or rgb(0, 0, 255): BLUE (fully saturated). It has no red, no green, and maximum blue.
- #FF00FF or rgb(255, 0, 255): PURPLE (fully saturated). It has maximum red, no green, and maximum blue.
- #FFFFFF or rgb(255, 255, 255): WHITE, a color with maximum red, maximum green, and maximum blue.
- #000000 or rgb(0,0,0): BLACK, the absence of color. It has no red, no green, and no blue.
- Whenever the red value matches the green and the blue (e.g., #121212), this is some shade of GRAY. Light gray will be closer to white (#FFFFFF). Dark gray will be closer to black (#000000). Any shade between white and black is said to be totally unsaturated. If you are looking for "adult colors", you'll want to blend any light colors with gray (to reduce saturation) - dark colors can be close to fully saturated and look fine.
- OPACITY: Opaque means solid (you cannot see through it). The opposite of opaque is transparent. You can use rgba encoding to represent a color that is partially transparent. To do this, you start out with the rgb encoding, for example purple as rgb(255, 0, 255), then just add one more component to specify opacity. For this last component 1 means solid/opaque and 0 means clear/transparent. You can use any values in between to get partial opacity. Here is a 25% opaque/solid version of purple which means that it is 75% clear: rgba(255,0,255,0.25).