css

Download
Share  Add to  Flag Embed
Views:
 
Category: Entertainment
     
 
License:   All Rights Reserved

Presentation Description

No description available.

Comments

 

By: pratapujwal (9 month(s) ago)

hey buddy can u mail this presentation to my mail id pratapujwal@gmail.com

 

By: pushpender.singh02 (13 month(s) ago)

fine

Presentation Transcript

Slide 1:

1 Speaker : Peter CH Kwok Cascading Style Sheet Speaker : Peter CH Kwok

Contents:

Contents CSS introduction Type of CSS usage – inline, embedded and external style sheet Common CSS Values Common CSS Styles The Box Model 2

Problem of XHTML page presentation:

3 Problem of XHTML page presentation XHTML/HTML was originally designed as a structural language, but become presentation tools as well Structural : <p><br><a><ol><li>..etc Presentation <font face=xxx> <center> <img align=xxx> e.g. The <h1>, <h2>, <h3>… XHTML tag, representing header of descending importance However, we do not know the look and feel of content in <h1>,<h2>, and is depended on the interpretation of the current web browse r. (e.g. FireFox, IE, Safari ) <h1>MY Website</h1> <h2>About me</h2> <h2>contact me</h2>

Cascading Style Sheet (CSS):

Cascading Style Sheet (CSS) Cascading Style Sheet (CSS) offers a separate means of controlling the display of web page XHTML concentrated on its structural purpose Add CSS styling to each XHTML tag to create consistent format across browser 4 Index.html (XHTML) style.css (CSS) Format <h1 class=“css3” >MY Website</h1> <h2 class=“css1” >About me</h2> <h2 class=“css2” >contact me</h2>

Pros of Cascading Style Sheet :

5 Pros of Cascading Style Sheet Separate content Structure from web page presentation Can create a separate CSS file for presentation (HTML for structure) HTML page more easy to update and manage Web page layout more easily to manage More easily to display differently depends on user preferences and browser differences More interactive and beautiful web page Style Sheet can be shared among the site to reduce redundancy

Way of using CSS:

Way of using CSS Each XHTML element has its default style in different browser CSS allows to specify the presentation of elements on a Web page, separately from the structure of the document Ways of using CSS External Style Sheet – Can be applied to all pages of a Site Embedded Style – a document Inline Style – individual elements 6

1. Inline Style (instant style):

1. Inline Style (instant style) Take any XHTML tag element and add a style to it <tag style=“property01:value01; property02:value02;”> Multiple values of same property are separated by comma (,) e.g. { font-family: arial, sans-serif; } Shortcut values of a property are separated by space (Shortcut mean, combine several property in a spec. ) e.g. { border : 0px solid ; } 7 Multiple properties are separated by semi-colon (;)

Inline Style - Example:

Inline Style - Example We define inline/instant style in <h2> and <h1> XHTML tag 8 <body style="color:#ff0000;"> <h1 style="background-color:#000000;color:#ffffff"> Inline Style Demo</h1> <hr style="color=#0000ff" /> <h2 style=" font-size:18pt;margin-left:25px;font-family:times;"> Chapter 1</h2> <h2 style=" font-size:18pt;margin-left:25px;font-family:arial;"> Chapter 2</h2> <h2 style=" font-size:18pt;margin-left:25px;font-family:times;"> Chapter 3</h2> <h2 style=" font-size:18pt;margin-left:25px;font-family:arial;"> Chapter 4</h2> inline.html

2. Embedded Style:

We create style with “ tag selector ”- any XHTML tag, apply to every tag in that page Notice : when no style are added to a tag, it follows XHTML’s default property values e.g. usually, each tag’s default value for color is #000000 , background-color is #ffffff 9 2. Embedded Style <style type=“text/css”> selector01, selector02 … { property01:value01, value02; property02:value03, value04 ….. selector03 { .... } } </style>

Embedded Style - selector:

Embedded Style - selector Selector declaration can be any XHTML ( tag selector ) or customerized name (class selector), can be applied/mapped to any XHTML tag Property describes the appearance of the element corresponding to a selector Property and value is separated by a colon and surrounded by curly braces Place within the <head> section of an XHTML page 10

Embedded Style – Tag Selector:

Embedded Style – Tag Selector h1 is the XHTML tag used in this case The style is applied to every <h1> defined 11 <head> <title>Embedded Style Title</title> <style type=“text/css”> h1 { color : #ffffff; background-color :#000066; margin-left : 25px; margin-right : 500px; text-decoration:underline; } </style> </head> embedded.html

Grouping Selector:

Grouping Selector Define same properties for a groups of selectors, separated by comma In this case, we group several tag selector <h1>, <h2>, <h3> to share same set of property and values 12 <style> h1, h2, h3, h4, h5 { font-family : verdana, arial; text-indent : 20px; text-align : justify; color : green; } </style> grouping.html

Descendent Selector:

Descendent Selector A Descendent in XHTML is an element that completely contained within another elements’ content <em> is a Descendent of element <p>, so, it inherit the property values from <p> 13 <p> <em>Emphasis Data</em> </p>

Descendent Selector:

Descendent Selector Descendent selectors define rule based on where a given tag appears by combining together selectors, separated by space <h1> is a descendent of tag <div> 14 div h1 { color:#ff0000; } div ul ol li { color :#0000ff; }

Descendent Selector - Example:

Descendent Selector - Example 15 <body> <div> <h1>div h1</h1> <ul> <li>Chapter 1 </li> <li>Chapter 2 <ol> <li>Tables</li> <li>Forms</li> </ol> </li> </ul> </div> </body > descendent.html

Class Selector :

Class Selector When applying different styles for same tags or different tags, we need “class selector” Name of selected is defined by users Can be applied, re-used and share by multiple tags across page tagElement.className { ..... } Single the same XHTML tag with different styles .className {.....} No association with any XHTML tag element selector, style can be used in any tags. ( must start with a “DOT”) 16 <tagElement class=“ className ”>

Class Selector – Example:

Class Selector – Example 17 <head> <style type=“text/css”> h1.rightTxt { text-align:right; } .centerTxt { text-align:center; } </style> </head> <body> <h1 class=“ rightTxt ”>Header1 – rightText</h1> <p class=“ centerTxt ”> This is Paragraph – centerTxt </p> <h1>Header 2 – no class applied</h1> <h1 class=“ centerTxt ”>Header 3 – CenterText</h1> </body> </html> class_selector.html

ID Selector:

ID Selector Always apply to only one element An id attribute must be unique within the document tagName#idName { …….. } In XHTML, element are uniquely identified with the “id” attribute. 18 <p id=“ paragraph1 ”> This is paragraph one </p> <p id=“ paragraph2 ”> This is paragraph two </p >

id Selector – Example:

id Selector – Example 19 <style type="text/css"> style1 { color : rgb(255, 128, 128); } h1#special { color : #0000ff; font-family : times, courier, serif; } </style> … <body> <h1 id=“ special ”>ID selector special</h1> <h1 class=“ style1 ”>Normal Class selector</h1> </body>

3. Linked External Style:

3. Linked External Style Provides a powerful way to create master styles that can apply to entire site Store only the styles in external file with .css extension Any page that links to this .css takes this style CSS Comment Begins with “/*” and ends with “*/” Same syntax as embedded style 20 <link rel=“stylesheet” type=“text/css”> href=“url_of_cssFile.css” /> Place within the <head> section of an XHTML page

Linked External Style – Examples:

21 Linked External Style – Examples <link href="/style.css" rel="stylesheet" type="text/css"> </head> <body> <h2 class=“ smallFont ”>Title of the Page</h2> .smallFont { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 12px; font-weight: bold; text-transform: capitalize; font-style: italic; background-attachment: fixed; background-repeat: no-repeat; background-position: left top; } style.css test.html

Style Inheritance:

Style Inheritance A child element inherited all properties from its parent element. Conflicting Styles When there is Conflicting style defined in a tag, inherited from outside/parent, the priority are : Inline Style (inside XHTML element) > Embedded Style (inside the <head> tag) > External Style sheet Inline Style has the highest priority – that is, it will override property values defined in embedded and external style sheet 22

Style Interitance - Example:

Style Interitance - Example Selector defined in external CSS file Selected defined in page (embedded) Final Styled inherited 23 h3 { color: red; text-align: left; font-size: 8pt } h3 { text-align: right; font-size: 20pt } color: red; text-align: right; font-size: 20pt

W3C CSS Validation Services:

W3C CSS Validation Services http://jigsaw.w3.org/css-validator/ validate external CSS documents 24

CSS Values – uri and color values:

CSS Values – uri and color values When encounter CSS file/url attribute, (e.g “background-image” ), we can use the following values url(file_name) : Examples url(images/bg.jpg) url( ‘http://xxx.xxx.com/xx.gif ’) When encounter CSS color attributes Color values : red | blue | green | …. Color RGB value (r, g, b): rgb(255, 128, 255) Color RGP Percentage : rgb(80%, 40%, 100%); Color RGB HEX #rrggbb : #ff77ff 25

CSS Values – length and size:

CSS Values – length and size Various CSS styles shares the same sets of valid length and size values formats px - pixel values the element takes (e.g. { font-size : 13px } means the height of a text takes 13 pixels) pt - Point values, depends on the current dpi dot per inch (e.g. in a 96 dpi resolution { font-size :13pt } means the text is (13/96) inches long in the monitor em – the emphasis size of its containing tags % - the relative percentage size of its containing tags { width : 95% } cm, mm, in – absolute length values 26

CSS Styles – HyperLink Formats:

CSS Styles – HyperLink Formats As a tag selector with a semi-colons for different link types a:link - unvisited hyperlink a:visited - visited hyperlink a:hover - mouse over a hyperlink a:active - a hyperlink that is clicking or focusing 27 hyperlink.html

XHTML Element – inline and block:

XHTML Element – inline and block Inline element Does not begin and end lines, elements flow one another from left to right without line breaks e.g. <span> <em> <b> <i> <img> <a href.. ></a> Block element Intend to be displayed as a distinct block of content, starting and ending with a new line e.g. <form> <div> <p> <table> <br/> <ol> <ul> <hr> <h1> <h2>… <h6>. Etc We can create CSS style “display” to override inline or block element property 28

CSS Styles – Display Property:

CSS Styles – Display Property display Determine how a browser treat the invisible box that surrounds a particular element. E.g. appear or not, start with a new line or not. etc. block – display with line break before and after inline – display without line break before and after none – hidden and element, collapse its space list-item – display as a list table – display as a table with line breaks before & after Inline-table – display as a table without line break before & after 29

CSS Styles – Display Property:

CSS Styles – Display Property 30 <style> . displayStyle { display:block } </style> <div> <a href= “http://www.cityu.edu.hk “ alt=“”> City University – no line break</a> <a href= “http://www.cityu.edu.hk “ alt=“”> CUHK– no line break</a> </div> <div> <a href=“http://www.cs.cityu.edu.hk“ class=" displayStyle ”>City University – line break </a> <a href=“http://www.cs.cityu.edu.hk“ class=“ displayStyle ”>CUHK– line break </a> </div> </body> </html>

CSS – The Box Model:

CSS – The Box Model Each XHTML element is a invisible box surrounding around it, known as box model There are 4 properties that define the edges of the box margin border padding outline (CSS2 only : IE not support) 31

CSS – The Box Model:

CSS – The Box Model The relationship between margin , border , padding and the content itself is shown below ( outline is between border and margin) 32 Margin Border r Padding Content of the Element

CSS Styles – Padding:

CSS Styles – Padding Represent the space that extends the content box of the element, but excluding the border Padding pick the color and wallpaper of background properties (e.g. background-image , background-color ) padding-top , padding-left , padding-right padding-bottom Integer value of (px, pt, em, cm) Examples padding-top :10px ; padding-left ： 20px 33

CSS Styles – Padding :

CSS Styles – Padding padding (shortcut attribute) One value All four padding edges set to value Two value First value -> top bottom ; Second value -> left right Three value First value -> top ; Second value -> left right ; Third value -> bottom Four value Top, right, bottom and left respectively 34

CSS Styles - Margin:

CSS Styles - Margin The space that extends beyond the border of an element to provide extra empty space between adjacent or nested elements, and the border of the browser window. margin-top , margin-bottom , margin-left , margin-right Examples margin-left : 10px; margin-bottom : 20px 35 HELLO WORLD

CSS Styles - Margin:

CSS Styles - Margin margin (shortcut attributes) One value All four margin edges set to equal value Two values First value -> top bottom ; Second value -> left right Three values First value -> top ; Second value -> left right ; Third value -> bottom Four values Top, right, bottom and left respectively (clockwise) 36

CSS Styles – Margin :

CSS Styles – Margin These shortcut pattern are common for all properties in box model ( padding, border, outline) 37 <style> .class1 { margin : 12px 12px 20px 20px } /* margin-top:12px: margin-right:12px; margin-bottom:20px; margin-left:20px */ .class2 { margin : 40px 20px } /* margin-top:40px: margin-right:20px; margin-bottom:40px; margin-left:20px */ .class3 { margin :40px 20px 10px } /* margin-top:40px: margin-right:20px; margin-bottom:10px; margin-left:20px */ </style>

CSS Styles - Border:

CSS Styles - Border The following 3 attributes applies to all 4 directions border-color : Examples border-color : rgb(244,120,120) border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset; border-width : thin | medium | thick | length border (shortcut attribute) border-width | border-style | color of any sequences e.g. border : #ff00ff solid 1px 38

CSS Styles – Border with Direction:

CSS Styles – Border with Direction Border with direction border-left, border-left-style, border-left-color, border-left-width border-right, border-right-style, border-right-color, border-right-width border-top, border-top-style, border-top-color, border-top-width border-bottom, border-bottom-style, border-bottom-color, border-bottom-width 39

CSS Styles - Background Style:

CSS Styles - Background Style background-attachment Set how the image is attached to the document If configured to be fixed, position related to background-position scroll | fixed Example background-attachment : fixed background-color default is transparent – let next outmost color pass through transparent | color-values background-repeat repeat | no-repeat | repeat-x | repeat-y background-image none | url values : 40

CSS Styles - Background Style:

CSS Styles - Background Style background-position Establish the location of the left and top edges of the background image specified in “background-image” [ percentage | left ] { 1, 2 } [ top | center | bottom ] | [ left | center | right ] Examples background-position : 10px 40% background-position : top | left background (shortcut attribute) Set up the above 5 background-style in one attribute, each delimited by space, in any orders Examples background : url(bg.jpg) repeat-x scroll 41

CSS Style – Width, Height and Overflow:

CSS Style – Width, Height and Overflow width Define the width of a block element excluding padding, border and margin length | percentage | auto height Define the height of block element excluding padding, border and margin Length | percentage | auto overflow Specify whether a element/such as a picture will be clipped if is larger than the width or height Hidden | auto | scroll | visible 42

CSS Styles - Positioning:

43 CSS Styles - Positioning Control the position and visibility of layers: <div> … </div> tag. CSS-P attributes: position : either absolute or relative . left , top : distance from the document (in px) and specify the size of the layer (in px). width , height, overflow z-index : specify the order in multi-layers . visibility : either visible or hidden clip : set the visible part of the element, e.g. clip: rect ( top right bottom left ) < div id ="square" style =" position : absolute; left : 50px; top :100px; width : 200px; height : 100px; visibility : visible ; background-color : red"> Hello! This is an example of layer. < /div > Can be any XHTML object: eg form , image , etc

CSS Styles– Text Style:

CSS Styles– Text Style color Define the text color e.g. color : rgb(244,128,128) text-align left | right | center | justify text-decoration none | blink | underline | overline | line-through text-indent : px, pt, pc, cm em text-transform none | capitalize | uppercase | lowercase 44

CSS Styles– Text Style Example:

CSS Styles– Text Style Example 45 <style> .head1Style{ background-color:#0000FF; color:#FFFFFF; text-align:center; text-decoration:underline; text-transform:capitalize; text-indent:0px; font-size:1.5em; } </style> </head> <body> <h1 class="head1Style">CSS text properties</h1> </body>

CSS Styles– Font Style:

CSS Styles– Font Style font-family times, courier, arial, serif, sans-serif, cursive, fantasy, monospace; font-size : px, pt, pc, cm em font-style normal | italic font-weight normal | bold | bolder | lighter | 100..900; font-variant – use smaller capital letter for lowercase letter none | small-caps 46

CSS Styles – Font Example:

CSS Styles – Font Example 47 body{ color:#000000; /* font color */ font-family:times, courier, serif; font-size:14px; font-weigth:normal; } h1{ background-color:#ff0000; color:#ffffff; text-align:left; text-decoration:underline; text-transform:uppercase; font-family:cursive, monospace; font-size:2em; font-weight:800; }

CSS Styles – List Style:

CSS Styles – List Style change between different list-item markers set an image as a list-item marker list-style-image : none | url(“ path / image”); list-style-position : inside | outside 48

CSS Styles – List Style Type:

CSS Styles – List Style Type Unordered list list-style-type none | circle | disc | square; Ordered list list-style-type none | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha; list-style (shortcut attribute, for all 3 attributes) 49

CSS Style – Cursor Style:

CSS Style – Cursor Style 50 Change the styles of the cursor cursor pointer (look like a hand) progress (look like loading), move , copy , wait , no-drop auto , help, vertical-text , context-menu all-scroll, col-resize, e-resize, ew-resize, ne-resize, nesw-resize, ns-resize, row-resize……

Microsoft's IE Filters:

51 Microsoft's IE Filters Supported by Internet Explorer only, applied to text and images filter : apply filter effects on the images. style=" filter: FlipV " style=" filter: Blur ( Color=#6699CC, Strength=5 ) " style=" filter: DropShadow ( Color=#6699CC, OffX=5, OffY=5, Positive=1 ) " style=" filter: Chroma ( Color=#6699CC ) " 'set transparent color Possible effects: wave , alpha , xray , etc. Further information at msdn

Reference:

Reference CSS Reference http://www.w3.org/TR/1999/REC-CSS1-19990111 Microsoft Visual Filter http://www.ssi-developer.net/css/visual-filters.shtml http://msdn2.microsoft.com/en-us/library/ms532853.aspx Free CSS Templates http://www.freecsstemplates.org/ 52