Extra-simplified

 Only truly happen when the CSS and HTML are defined as separate files (external style sheet) Introduction The main idea of CSS is to….title { color: blue; font-weight: bold; }.content { color: #aa0000; } intro_css.html stylemain.css Introduction The main idea behind XML is to… intro_xml.html

 Example when the spirit of separation of content & presentation is not applied Introduction The main idea of CSS is to… intro_css.html Introduction The main idea behind XML is to… intro_xml.html

 CSS box model is used to represents and wraps the surrounding area of particular HTML element Content margin border padding height width background-color color

 The width and height box properties are applied to the content area; possible values are integers with the units of px, pt, cm, etc.  The background-color property is applied to both the content and padding areas; red, green, blue, #ff00ff, etc.  The color property is applied to the content and also to the border if the border-color property is not defined

 The margin, border, and padding box properties have their own individual sub-properties ( top, bottom, left, and right )  Below is padding box property with its top, bottom, left, and right sub-properties Hello World padding-top padding-bottom padding-left padding-right

 The margin and padding box properties can have their values be assigned by using mixed-shorthand or separated-individual setting approaches  Mixed-shorthand value settings : property_name: top right bottom left; property_name: top right_left bottom; property_name: top_bottom right_left; property_name: top_right_bottom_left; *** Do aware with the clockwise pattern

 Separated-individual value settings : property_name-top: top; property_name-bottom: bottom; property_name-left: left; property_name-right: right;  The values for margin and padding properties are normally integers with the units of px, pt, cm, etc.

 The border box property can also have its styles be assigned by using shorthand or separated-individual setting approaches  All in one mixed-shorthand value setting: border: width style color;  Mixed-shorthand value settings : border-subtype: top right bottom left; border-subtype: top right_left bottom; border-subtype: top_bottom right_left; border-subtype: top_right_bottom_left;

 All in one separated-individual value setting: border-top: width style color; border-bottom: width style color; border-left: width style color; border-right: width style color;  Separated-individual value settings : border-top-subtype: top; border-bottom-subtype: bottom; border-left-subtype: left; border-right-subtype: right;

 The subtype can be style, width, or color with the possible values are as follows: subtypeValues style solid, dashed, dotted, double width integers with the unit of px, pt, cm, %, etc. color red, green, blue, #ff00ff, etc.  The border-width and border-color properties are only applicable in CSS box model implementations when the border-style property is defined

 The outline property can be used to filled up the blank margin area  All in one mixed-shorthand setting: outline: color style width;  Separated individual value setting: outline-color: color; outline-style: style; outline-width: width;

 Almost all HTML element tags are applying CSS box model  Block element tags: … …, …, … … …, … …  Inline element tags: … … … …

 Example to start experimenting CSS box model b, a, span { border:1px solid red; } div, p, h1, td, li { border:1px solid red; } Bold text Link text Text inside span Text inside P Text inside H1 tag Apple Grape Orange A B C D Text inside DIV

 Exercise

 There are four positioning types in CSS  Static: the default element flow arranged by the browser  Fixed: fixed and relative to browser window  Relative: relative to the normal/default position  Absolute : relative to the first parent element

{ position: relative; top: 100px; left: 50px; } {position: fixed; top: 50px; right: 50px;} { position: absolute; top: 20px; left: 200px; }