CSS integration
CSS components
CSS language structure
The Selectors
Benefit of CSS in external file
Common Question and Misunderstanding
Advanced - CSS Workflow
Example and ready-to-use
CSS template
CSS3
- css3 animation

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:

display: inline; block; list-item; none;
display: none/inline/block/inline-block example: https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock
- examples of block level elements include: div, h1, p, and hr
- (takes the entire row(100%)of the screen ,it is always 100%of the screen size)
- examples of inline level elements include: a, span, strong, em, b, and i, canvas

The Selectors

Class
- Easy to use and wide applicable
- use it when it will be applied very general
tag
- redefine the default properties of html
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

reset CSS script?

 *{  
    margin:0;
    padding:0;
    border-width:0;
 }

CSS with “Web Developer Toolbar”

Example and ready-to-use

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

css override example

clear background-color set by other css

.main-header-bar {
background-color: transparent !important ;
}

form style

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;
 }

table style

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;
}

flex layout for elements

Page Layout

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;}

text background color bar strike through

gradient method

gradient tool: https://cssgradient.io/

// gradient with half transparent way to half BG
<p><span='colorHalfBG'>Text</span></p>
span.colorHalfBG{
  padding-left: 5px;
  padding-right: 5px;
  background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%);
}

:before in absolute position to draw a block behind method

ref: https://codepen.io/OxyDesign/pen/eHAac

.colorHalfBG:before {
  display: block;
  content:'';
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  background:#f66;
  z-index:-1;
  height:50%;
}

Real CSS tricks

google doodle animation : http://devlup.com/javascript/jim-henson-puppetry-doodle-how-did-they-do/2574/
map demo : http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Table of Contents