CSS integration

  • in head tag
    • only usable in the single page containing the code
  • inline
  • external link file
  • import

CSS components

  • style
  • placement
  • cascading method

CSS language structure

terms and concepts

  • syntax:
    Name {attr1:value1;attr2:value2;attr3:value3;}
    /* comment */
  • name type (selector type)
    • class : embed into any tag (must be started with “.”)
       .myText{}
    • tag : for html predefined tag (must be a html tag name)
      h1{} 
    • advanced : for id, pseudo-class selector (must begin with “#”)
       a:link{}

Learn css property by demo:

The Selectors

  1. Class
    • Easy to use and wide applicable
    • use it when it will be applied very general
  2. tag
    • redefine the default properties of html
  3. ID (pseudo-class)
    • use it when it will be applied only to one element or one location, with special purpose; (like navigation bar, content area)
    • for structure setup

Benefit of CSS in external file

  • make editing separated and easy
  • make it dynamically switchable
  • make style reusable crossing multiple pages

Common Question and Misunderstanding

  • Div Tag vs Table tag
    • table are always aligned, and placed horizontally and vertically
    • div can be positioned any where in the web with its attributes

Advanced - CSS Workflow

  1. reset CSS script?
     *{  
        margin:0;
        padding:0;
        border-width:0;
     }
  2. CSS with “Web Developer Toolbar

Example and ready-to-use

pre-defined color table in CSS: http://www.w3schools.com/cssref/css_colornames.asp

  • input style
    input[type="text"]
     {
     width:150px;
     display:block;
     margin-bottom:10px;
     background-color:yellow;
     }
    /* class "in" special change overide */
    input[type="text"].in {
    background-color:red;
    }
    /* under id "col-4", class "in" special change override*/
    .col-4 input[type="text"].in {
    width: 150px !important; 
    }
     
     input[type="button"]
     {
     width:120px;
     margin-left:35px;
     display:block;
     }

Here is a interactive style play tool: http://www.somacon.com/p141.php

  • border
    table, th, td
    {
    border: 1px solid black;
    }
    /* or */
    table{
    border-collapse:collapse;
    empty-cells:show;
    }
    td{
    	border-width: 1px;
    	padding: 1px;
    	border-style: inset;
    	border-color: gray;
    }

ref: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

  • show empty cell
    table{
    border-collapse:separate;
    empty-cells:show;
    }
  • top bottom main + panel
    <head>
    <?php include("e_header.htm"); ?>
    <?php include("e_javascript.htm"); ?>
    </head>
    <body>
    <div id="wrap">
    	<div id="header">
    		<?php include("e_menu.htm"); ?>
    	</div>
    	<div id="main">
    	</div>
    	<div id="sidebar">
    	</div>
    	<div id="footer">
    		<? include("e_footer.htm"); ?>
    	</div>
    </div>
    </body>
    <link rel=StyleSheet href="style.css" type="text/css" media=screen>
    body,
    html {
    	margin:0;
    	padding:0;
    	color:#000;
    	background:#FFFFFF;
    }
    p{
    	font-size:14px;
    }
     
    /* layout */
    #wrap {
    	width:750px;
    	margin:0 auto;
    	background:#FFF;
    }
    #header {
    	padding:50px 10px;
    	color:#FFF;
    	background:#FFF;
    	background-image:url('image/banner.png') ;
    	background-repeat:no-repeat;
    	background-position:right;
    }
    #main {
    	float:left;
    	width:480px;
    	padding:10px;
    	background:#fff;
    }
    #sidebar {
    	float:right;
    	width:210px;/*230*/
    	padding:10px;
    	background:#fff;
    	border-width:2px;
    	border-style:solid;
     
    }
    #footer {
    	clear:both;
    	padding:5px 10px;
    	background:#ddd;
    }
    #footer p {
    	margin:0;
    }
    * html #footer {
    	height:1px;
    }
     
    /* element */
    h1 {
    	margin:0;
    }
    h2 {
    	margin:0 0 1em;
    }
     
    #nav {
    	padding:5px 10px;
    	background:#ddd;
    }
    #nav ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav li {
    	display:inline;
    	margin:0;
    	padding:0;
    }
     
    /*My Style*/
     
    TD{font-family: Arial; font-size: 8pt;}

CSS template

CSS3