css

Introduction to Cascading Style Sheets (CSS)

Open an online editor with direct preview, e.g. http://htmledit.squarefree.com/.

Agenda

  1. What is CSS?
  2. Where to go next?
  3. Begin with an HTML page
  4. CSS syntax and CSS selectors
  5. External, internal, inline
  6. CSS color
  7. Default HTML tags, TRBL in margins, font styles
  8. The box model
  9. Table style
  10. Navigation lists
  11. Div and centering divs
  12. Floating divs
  1. What is CSS? Says who? The W3C maintains the CSS specification and browsers individually choose to comply to the standard and support each CSS feature.
  2. w3schools.com is a good place to start learning CSS.
  3. Begin with a default HTML page,
    (more…)

CSS Tip: styling lists

To create horizontal tabs from a unordered list, you can style your list as follows:

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
display: inline;
}

The above creates the horizontal list without bullet points. The below will set the height of the bar and synchronizes the height of the list with the height of the bar.
(more…)

CSS: Basic Project Structure

~/css
~/css/color.css
~/css/font.css
~/css/html.css
~/css/layout.css
~/css/style.css
~/imgs
~/imgs/logo_large.png
~/imgs/logo_small.png
~/js
./index.html
./index.php
.htaccess

color.css
All color information goes in the color.css file, so that it is easy to just change the color appearance of your site.

font.css
The font file contains font family and font size information. The font color goes in the color.css file.

html.css
The html file contains the styling of default HTML tags.

layout.css
The layout file contains the box structure of your site. You should be able to draw the site on a sheet of paper with solely boxes and a keyword for each box’s content.

style.css
The style file contains information for div tags like margins, padding, borders, list style. The style creates the rough look and feel for your site.

%d bloggers like this: