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: 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
.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/
CSS template
Table Style
CSS3
css3 animation
- animation video 1-3: