Extra-simplified. Only truly happen when the CSS and HTML are defined as separate files (external...

Cascading Style Sheet (CSS)

Extra-simplified

Separation of Content & Presentation Only truly happen when the CSS and HTML are

defined as separate files (external style sheet)

<html><head><link rel=“stylesheet” type="text/css“ href="stylemain.css"></head><body><p class=“title”>Introduction</p><p class=“content”>The main idea of CSS is to…</p></body></html>

.title { color: blue; font-weight: bold; }.content { color: #aa0000; }

intro_css.html

stylemain.css

<html><head><link rel=“stylesheet” type="text/css“ href="stylemain.css"></head><body><p class=“title”>Introduction</p><p class=“content”>The main idea behind XML is to…</p></body></html>

intro_xml.html

Separation of Content & Presentation Example when the spirit of separation of

content & presentation is not applied<html><body><p style=“color:blue; font-weight: bold;”>Introduction</p><p style=“color: #aa0000;”>The main idea of CSS is to…</p></body></html>

intro_css.html

<html><body><p style=“color:blue; font-weight: bold;”>Introduction</p><p style=“color: #aa0000;”>The main idea behind XML is to…</p></body></html>

intro_xml.html

CSS Box Model CSS box model is used to represents and wraps

the surrounding area of particular HTML element

Content

margin

border

padding

height

width

background-colorcolor

CSS Box Model 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

CSS Box Model 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 Worldpadding-top

padding-bottom

padding-left padding-right

CSS Box Model – margin & padding 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

CSS Box Model – margin & padding 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.

CSS Box Model - border 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;

CSS Box Model - border 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;

CSS Box Model - border The subtype can be style, width, or color with the

possible values are as follows:subtype Valuesstyle solid, dashed, dotted, doublewidth 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

CSS Box Model - outline 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;

CSS Box Model – elements Almost all HTML element tags are applying CSS

box model

Block element tags:<p>…</p><h1>…</h1>, <h2>…</h2>, …<div>…</div><ul>…</ul>, <li>…</li><table>…</table>

Inline element tags:<b>…</b><a …>…</a><span>…</span><td>…</td>

CSS Box Model Example to start experimenting CSS box model

<style>b, a, span { border:1px solid red; }div, p, h1, td, li { border:1px solid red; }</style>

<b>Bold text</b><a href="">Link text</a><span>Text inside span</span>

<p>Text inside P</p><h1>Text inside H1 tag</h1>

<ul><li>Apple</li><li>Grape</li><li>Orange</li></ul>

<table width=480><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>

<div>Text inside DIV</div>

CSS Box Model Exercise

CSS Positioning 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

CSS Positioning

CSS Positioning{ position: relative; top: 100px; left: 50px; }

{position: fixed; top: 50px; right: 50px;}

{ position: absolute; top: 20px; left: 200px; }

CSS Positioning

Extra-simplified. Only truly happen when the CSS and HTML are defined as separate files (external...

Documents

Transcript of Extra-simplified. Only truly happen when the CSS and HTML are defined as separate files (external...