Web Development Using CSS3

Web Development Using CSS Anjan Mahanta LCCT - International Education Institute anjan_mahanta@hotmail.com

What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem • External Style Sheets can save a lot of work • External Style Sheets are stored in CSS files 2Copyright - Anjan Mahanta

Web Concept Copyright - Anjan Mahanta 3

CSS Demo Simple HTML Page Copyright - Anjan Mahanta 4 Page with CSS

CSS Demo CSS Style Sheet • CSS saves a lot of work • It defines how HTML elements are to be displayed • They are normally saved in external .css files • External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file Copyright - Anjan Mahanta 5

CSS Syntax A CSS rule set consists of a selector and a declaration block: Copyright - Anjan Mahanta 6 • The selector points to the HTML element you want to style. • The declaration block contains one or more declarations separated by semicolons. • Each declaration includes a property name and a value, separated by a colon.

CSS Example • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: Copyright - Anjan Mahanta 7 p {color:red;text-align:center;} <!DOCTYPE html> <html> <head> <style> p {color:red; text-align:center;} </style> </head> <body> <p> Hello..!!</p> <p> Welcome to IEI..</p> </body> </html> Code: Output:

CSS Comment • Comments are used to explain your code. • It may help you when you edit the source code at a later date. • Comments are ignored by browsers. • A CSS comment starts with /* and ends with */. Copyright - Anjan Mahanta 8 Example : /*This is a multiple lines comment*/ p { color:red; /*This is another comment*/ text-align:center; }

CSS Selectors • CSS selectors allow you to select and manipulate HTML element(s). • CSS selectors are used to "find" (or select) HTML elements based on their : – Id – Classes – Types – Attributes – values of attributes and much more. Copyright - Anjan Mahanta 9

The element selector • The element selector selects elements based on the element name. • You can select all <p> elements on a page like this: (all <p> elements will be center-aligned, with a red text color) Copyright - Anjan Mahanta 10 <!DOCTYPE html> <html> <head> <style> p {color:red; text-align:center;} </style> </head> <body> <p> Hello..!!</p> <p> Welcome to IEI..</p> <p> Lampang, Thailand..</p> </body> </html> Code: Output:

The id Selector • The id selector uses the id attribute of an HTML tag to find the specific element. • An id should be unique within a page, so you should use the id selector when you want to find a single, unique element. • To find an element with a specific id, write a hash character, followed by the id of the element. • The style rule below will be applied to the HTML element with id="para1": Copyright - Anjan Mahanta 11

The id Selector Copyright - Anjan Mahanta 12 Code: Output: <!DOCTYPE html> <html> <head> <style> #para1 {color:red; text-align:center;} </style> </head> <body> <p id="para1"> Hello..!!</p> <p> Welcome to IEI..</p> <p> Lampang, Thailand..</p> </body> </html>

The Class Selector • The class selector finds elements with the specific class. • The class selector uses the HTML class attribute. • To find elements with a specific class, write a period character, followed by the name of the class: • In the example below, all HTML elements with class="center" will be center-aligned: Copyright - Anjan Mahanta 13

The Class Selector Copyright - Anjan Mahanta 14 <!DOCTYPE html> <html> <head> <style> .center {color:red; text-align:center;} </style> </head> <body> <h1 class="center"> LCCT </h1> <p class="center"> Hello..!!</p> <p> Welcome to IEI..</p> <p> Lampang, Thailand..</p> </body> </html> Code: Output:

Grouping Selector • In style sheets there are often elements with the same style. • To minimize the code, you can group selectors. • To group selectors, separate each selector with a comma. Copyright - Anjan Mahanta 15

Grouping Selector Copyright - Anjan Mahanta 16 Code: Output:<!DOCTYPE html> <html> <head> <style> h1,h2,p {color:red; text-align:center;} </style> </head> <body> <h1> LCCT </h1> <h2 > Hello..!!</h2> <p> Welcome to IEI..</p> <p> Lampang, Thailand..</p> </body> </html>

CSS How To .. ?? • There are three ways of inserting a style sheet: – External style sheet – Internal style sheet – Inline style Copyright - Anjan Mahanta 17

External Style Sheet • An external style sheet is ideal when the style is applied to many pages. • With an external style sheet, you can change the look of an entire Web site by changing one file. • Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section. • An external style sheet can be written in any text editor. • The file should not contain any html tags. • The style sheet should be saved with a .css extension. Copyright - Anjan Mahanta 18

External Style Sheet Copyright - Anjan Mahanta 19 Example: Create a CSS file save as, external.css h1 {color:sienna;} h2 {color:blue;} p {color:red;} Create a html file save as, External.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="external.css"> </head> <body> <h1> LCCT </h1> <h2 > Hello..!!</h2> <p> Welcome to IEI..</p> <p> Lampang, Thailand..</p> </body> </html> OUTPUT:

Internal Style Sheet • An internal style sheet should be used when a single document has a unique style. • We define internal styles in the head section of an HTML page, by using the <style> tag. Copyright - Anjan Mahanta 20 <!DOCTYPE html> <html> <head> <style> p {color:red;} </style> </head> <body> <p> International Education Institute</p> </body> </html> Example: OUTPUT:

Inline Styles • To use inline styles you use the style attribute in the relevant tag. • The style attribute can contain any CSS property. Copyright - Anjan Mahanta 21 <!DOCTYPE html> <html> <body> <p> International Education Institute</p> <p style="color:blue";>Lampang Thailand</p> </body> </html> Example: OUTPUT:

CSS Background • The background-color property specifies the background color of an element. • The background color of a page is defined in the body selector. Copyright - Anjan Mahanta 22 <!DOCTYPE html> <html> <head> <style> body {background-color:#ffff00;}</style> </head> <body> <h3>International Education Institute</h3> <p>Lampang Thailand</p> </body> </html> Example 1: OUTPUT:

CSS Background Copyright - Anjan Mahanta 23 <!DOCTYPE html> <html> <head> <style> h1{background-color:#ffff00;}</style> <style> h3{background-color:#ff0022;}</style> <style> div{background-color:#ffff77;}</style> <style> p{background-color:#ffff33;}</style> </head> <body> <h1> LCCT</h1> <h3>International Education Institute</h3> <div> This is Div Element 1 <p>Lampang Thailand</p> This is Div Element 2 </div> </body> </html> Example 2: OUTPUT:

CSS Background Image Copyright - Anjan Mahanta 24 <!DOCTYPE html> <html> <head> <style> body {background-image:url("background1.jpg");} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as background1.jpg in the same folder as the html file

Background Image Repeat Horizontally or Vertically Copyright - Anjan Mahanta 25 <!DOCTYPE html> <html> <head> <style> body {background-image:url("background3.jpg");} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as background3.jpg in the same folder as the html file By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Background Image Repeat Horizontally or Vertically Copyright - Anjan Mahanta 26 <!DOCTYPE html> <html> <head> <style> body {background-image:url("background3.jpg"); background-repeat:repeat-x;} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as background3.jpg in the same folder as the html file If the image is repeated only horizontally (repeat-x), the background will look better:

Background Image Set position and no-repeat Copyright - Anjan Mahanta 27 <!DOCTYPE html> <html> <head> <style> body {background-image:url("Web.png"); background-repeat:no-repeat;} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as Web.png in the same folder as the html file Showing the image only once is specified by the background-repeat property:

Background Image Set position and no-repeat Copyright - Anjan Mahanta 28 <!DOCTYPE html> <html> <head> <style> body {background-image:url("Web.png"); background-repeat:no-repeat; background-position: right top; margin-right:200px;} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as Web.png in the same folder as the html file The position of the image is specified by the background-position property:

Background Image Shorthand Property Copyright - Anjan Mahanta 29 <!DOCTYPE html> <html> <head> <style> body {background:#ffffff url("Web.png") no-repeat right top; margin-right:200px;} </style> </head> <body> <h1> Hello</h1> </body> </html> Example: OUTPUT: Note: Save an image as Web.png in the same folder as the html file The position of the image is specified by the background-position property:

Text Color Copyright - Anjan Mahanta 30 Example: OUTPUT: • The color property is used to set the color of the text. • With CSS, a color is most often specified by: • a HEX value - like "#ff0000" • an RGB value - like "rgb(255,0,0)" • a color name - like "red" <!DOCTYPE html> <html> <head> <style> body {color:red;} h1 {color:#00ff00} p.ex {color:rgb(0,0,255);} </style> </head> <body> <h1> Welcome..to</h1> <p>International Education Institute</p> <p class="ex"> Lampang Thailand</p> </body> </html>

Text Alignment Copyright - Anjan Mahanta 31 OUTPUT: • The text-align property is used to set the horizontal alignment of a text. • Text can be centered, or aligned to the left or right, or justified.

Text Alignment Copyright - Anjan Mahanta 32 CODE: <!DOCTYPE html> <html> <head> <style> h1,h2 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify);} </style> </head> <body> <h1> LCCT</h1> <h2>International Education Institute</h2> <p class="date"> April 17, 2014 </p> <p class="main"> LCCT has been a greatly successful institution over the time of <b>43 years </b>.We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high <b>quality</b> education.</p> </body> </html>

Text Decoration Copyright - Anjan Mahanta 33 OUTPUT: • The text-decoration property is used to set or remove decorations from text. • The text-decoration property is mostly used to remove underlines from links for design purposes.

Text Decoration Copyright - Anjan Mahanta 34 Code: <!DOCTYPE html> <html> <head> <style> h1 {text-decoration: overline;} h2 {text-decoration: line-through;} h3 {text-decoration: underline;} a {text-decoration: none;} </style> </head> <body> <h1> LCCT</h1> <h2> International Education Institute</h2> <h3> Lampang, Thailand</h3> <p> Link to our: <a href="http://www.lcct.ac.th"> LCCT Website </a></p> </body> </html>

Text Transformation Copyright - Anjan Mahanta 35 Code: • The text-transform property is used to specify uppercase and lowercase letters in a text. • It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. <!DOCTYPE html> <html> <head> <style> p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} </style> </head> <body> <p class="uppercase"> Welcome to Lampang</p> <p class="lowercase"> Welcome to Lampang</p> <p class="capitalize"> Welcome to Lampang</p> </body> </html> Output:

Text Indent Copyright - Anjan Mahanta 36 Code: • The text-indent property is used to specify the indentation of the first line of a text. <!DOCTYPE html> <html> <head> <style> p {text-indent:50px;} </style> </head> <body> <p> We are now expanding to global quality education. All courses have proved popular with students from all over Northern Thailand and students from other countries giving them opportunities to develop language and vocational skills which meet the needs of modern businesses. </p> </body> </html> Output:

CSS Font Copyright - Anjan Mahanta 37 • CSS font properties define the font family, boldness, size, and the style of a text. • In CSS, there are two types of font family names: – generic family - a group of font families with a similar look (like "Serif" or "Monospace") – font family - a specific font family (like "Times New Roman" or "Arial")

CSS Font Copyright - Anjan Mahanta 38 Example: Output: <!DOCTYPE html> <html> <head> <style> p.serif {font-family:"Times New Roman", Times, Serif;} p.sansserif {font-family:Arial, Helvetica, sans-serif;} p.monospace {font-family:"Courier New","Lucida Console";} </style> </head> <body> <p class="serif"> Welcome to LCCT..!!<p> <p class="sansserif"> International Education Institute</p> <p class="monospace"> Lampang, Thailand</p> </body> </html>

CSS Font Style Copyright - Anjan Mahanta 39 • The font-style property is mostly used to specify italic text. • This property has three values: – normal - The text is shown normally – italic - The text is shown in italics – oblique - The text is "leaning" (oblique is very similar to italic, but less supported) <!DOCTYPE html> <html> <head> <style> p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style: oblique;} </style> </head> <body> <p class="normal"> Welcome to LCCT..!!<p> <p class="italic"> International Education Institute</p> <p class="oblique"> Lampang, Thailand</p> </body> </html> Output:

CSS Font Size Copyright - Anjan Mahanta 40 • Setting the text size with pixels gives full control over the text size: Output: <!DOCTYPE html> <html> <head> <style> h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:20px;} </style> </head> <body> <h1> Welcome to LCCT..!!<h1> <h2> International Education Institute</h2> <p> Lampang, <b>Thailand</b></p> </body> </html> Example:

All font properties in one declaration Copyright - Anjan Mahanta 41 • This example demonstrates how to use the shorthand property for setting all of the font properties in one declaration. Output:Example: <!DOCTYPE html> <html> <head> <style> p.ex1 {font: 40px arial, sans-serif;} p.ex2 {font: italic bold 30px Georgia, Serif;} p {font-size:20px;} </style> </head> <body> <p class="ex1"> Welcome to LCCT..!!<p> <p class="ex2"> International Education Institute</p> <p> Lampang, <b>Thailand</b></p> </body> </html>

CSS Links Copyright - Anjan Mahanta 42 • Links can be styled with any CSS property (e.g. color, font-family, background, etc.). • In addition, links can be styled differently depending on what state they are in. • The four links states are: – a:link - a normal, unvisited link – a:visited - a link the user has visited – a:hover - a link when the user mouses over it – a:active - a link the moment it is clicked <!DOCTYPE html> <html> <head> <style> a:link {color:#FF0000;} /*unvisited link*/ a:visited {color:#00FF00;} /*visited link*/ a:hover {color:#FF00FF;} /*mouse over link*/ a:active {color:#0000FF;} /*selected link*/ </style> </head> <body> <p><a href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> </body> </html> Example:

CSS Links – Text Decoration Copyright - Anjan Mahanta 43 • The text-decoration property is mostly used to remove underlines from links: <!DOCTYPE html> <html> <head> <style> a:link {text-decoration: none;} /*unvisited link*/ a:visited {text-decoration:none;} /*visited link*/ a:hover {text-decoration:underline;} /*mouse over link*/ a:active {text-decoration:underline;} /*selected link*/ </style> </head> <body> <p><a href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> </body> </html> Example:

CSS Links – Background Color Copyright - Anjan Mahanta 44 • The background-color property specifies the background color for links: <!DOCTYPE html> <html> <head> <style> a:link {background-color:#FFFFFF;} /*unvisited link*/ a:visited {background-color:#FFFF85;} /*visited link*/ a:hover {background-color:#FF704D;} /*mouse over link*/ a:active {background-color:#FF704D;} /*selected link*/ </style> </head> <body> <p><a href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> </body> </html> Example:

Different Styles of Hyperlink Copyright - Anjan Mahanta 45 Example Part I: <!DOCTYPE html> <html> <head> <style> a.one:link {color:#ff0000;} a.one:visited {color:#0000ff;} a.one:hover {color:#ffcc00;} a.two:link {color:#ff0000;} a.two:visited {color:#0000ff;} a.two:hover {font-size:150%;} a.three:link {color:#ff0000;} a.three:visited {color:#0000ff;} a.three:hover {background:#66ff66;}

Different Styles of Hyperlink Copyright - Anjan Mahanta 46 Example Part II: a.four:link {color:#ff0000;} a.four:visited {color:#0000ff;} a.four:hover {font-family:monospace;} a.five:link {color:#ff0000; text-decoration:none;} a.five:visited {color:#0000ff; text-decoration:none;} a.five:hover {text-decoration:underline;} </style> <body> <h4> Different Styles of hyperlink</h4> <p> <a class="one" href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> <p> <a class="two" href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> <p> <a class="three" href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> <p> <a class="four" href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> <p> <a class="five" href="http://www.lcct.ac.th" target="_blank"> Visit LCCT Website </a></p> </body> </head> </html>

CSS List Copyright - Anjan Mahanta 47 • The CSS list properties allow you to: – Set different list item markers for ordered lists – Set different list item markers for unordered lists – Set an image as the list item marker

CSS List Copyright - Anjan Mahanta 48 Example Part I <!DOCTYPE html> <html> <head> <style> ul.a {list-style-type:circle;} ul.b {list-style-type:square;} ol.c {list-style-type:upper-roman;} ol.d {list-style-type:lower-alpha;} </style> </head> <body> <p>Examples of Unordered Lists</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Cola</li> </ul> <ul class="b"> <li>Coffee</li> <li>Tea</li> <li>Cola</li> </ul> <p>Examples of Ordered Lists</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Cola</li> </ol> <ol class="d"> <li>Coffee</li> <li>Tea</li> <li>Cola</li> </ol> </body> </html> Example Part II

CSS Tables Copyright - Anjan Mahanta 49 • The look of an HTML table can be greatly improved with CSS: Example:

CSS Table Borders Copyright - Anjan Mahanta 50 • To specify table borders in CSS, use the border property. • The example below specifies a black border for table, th, and td elements: Example: <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid black;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Maliwan</td> <td>16</td> </tr> <tr> <td>Saengduan</td> <td>17</td> </tr> </table> </body> </html> Output:

CSS Border Collapse Copyright - Anjan Mahanta 51 • The border-collapse property sets whether the table borders are collapsed into a single border or separated: Example: <!DOCTYPE html> <html> <head> <style> table{border-collapse:collapse;} table,th,td {border: 1px solid black;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Maliwan</td> <td>16</td> </tr> <tr> <td>Saengduan</td> <td>17</td> </tr> </table> </body> </html> Output:

Table Width & Height Copyright - Anjan Mahanta 52 • Width and height of a table is defined by the width and height properties. • The example below sets the width of the table to 100%, and the height of the th elements to 50px: Output:

Table Width & Height Copyright - Anjan Mahanta 53 Code: <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid black;} table {width:100%;} th {height:50px;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr> </table> </body> </html>

Text Alignment Copyright - Anjan Mahanta 54 • The text-align property sets the horizontal alignment, like left, right, or center: Output: <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid black;} td {text-align: center;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr> </table> </body> </html> Example:

Text Alignment Copyright - Anjan Mahanta 55 • The vertical-align property sets the vertical alignment, like top, bottom, or middle: Output: Example: <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid black;} td {height:50px; vertical-align: bottom;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr> </table> </body> </html>

Table Padding Copyright - Anjan Mahanta 56 • To control the space between the border and content in a table, use the padding property on td and th elements: Output: Example: <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid black;} td {padding:15px;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr> </table> </body> </html>

Table Color Copyright - Anjan Mahanta 57 • The example below specifies the color of the borders, and the text and background color of th elements: Output: Example: <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr> </table> </body> </html> <!DOCTYPE html> <html> <head> <style> table,th,td {border: 1px solid green;} th {background: green; color:white;} </style> </head> <body> <table> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr>

Fancy Table Copyright - Anjan Mahanta 58 Output

Fancy Table Copyright - Anjan Mahanta 59 Code : Part I <!DOCTYPE html> <html> <head> <style> #students {width:100%;border-collapse: collapse;text-align: left;} #students th {background-color:#A7C942; color:#FFFF66;} #students th, #students td {border:1px solid green;} #students tr.alt td {color:#000000;background-color:#EAF2D8;} caption {caption-side:bottom;} </style> </head>

Fancy Table Copyright - Anjan Mahanta 60 Code : Part II <body> <table id="students"> <caption> <b>Table 1.1 Students of EC 301</b></caption> <tr> <th>Name</th> <th>Age</th> <th>Address</th> </tr> <tr> <td>Maliwan</td> <td>16</td> <td>Lampang</td> </tr> <tr class="alt"> <td>Saengduan</td> <td>17</td> <td>Chiangmai</td> </tr>

Fancy Table Copyright - Anjan Mahanta 61 Code : Part III <tr> <td>Kritsana</td> <td>17</td> <td>Bangkok</td> </tr> <tr class="alt"> <td>Worrawut</td> <td>18</td> <td>Chiangrai</td> </tr> <tr> <td>Suwimol</td> <td>18</td> <td>Lampang</td> </tr> <tr class="alt"> <td>Piyathida</td> <td>17</td> <td>Chonburi</td> </tr> <tr> <td>Gate</td> <td>18</td> <td>Maemoh</td> </tr> </table> </body> </html>

CSS Box Model Copyright - Anjan Mahanta 62 • All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. • The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. • The box model allows us to place a border around elements and space elements in relation to other elements. • The image below illustrates the box model:

CSS Box Model Copyright - Anjan Mahanta 63 Explanation of the different parts: • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent • Border - A border that goes around the padding and content. The border is inherited from the color property of the box • Padding - Clears an area around the content. The padding is affected by the background color of the box • Content - The content of the box, where text and images appear The total width of the element in the example is 300px: width:250px; padding:10px; border:5px solid gray; margin:10px; Let's do the math: 250px (width) + 20px (left + right padding) + 10px (left + right border) + 20px (left + right margin) = 300px

CSS Box Model Copyright - Anjan Mahanta 64 • Assume that we have only 250px of space. Let's make an element with a total width of 250px: Code: <!DOCTYPE html> <html> <head> <style> div.example { width:220px; padding: 10px; border:5px solid red; margin:0;} </style> </head> <body> <div class="example"> This is an example of css box</div> </body> </html> Output

CSS Box Model Copyright - Anjan Mahanta 65 • Assume that we have only 200px of space. Let's make an element with a total height of 200px: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin Code: Output <!DOCTYPE html> <html> <head> <style> div.example { height:170px;width:220px; padding: 10px; border:5px solid red; margin:0;} </style> </head> <body> <div class="example"> This is an example of css box</div> </body> </html>

CSS Border Copyright - Anjan Mahanta 66 • The CSS border properties allows to specify the style and color of an element's border. • The border-style property specifies what kind of border to display. Example:

CSS Border Copyright - Anjan Mahanta 67 Code <!DOCTYPE html> <html> <head> <style> p.none {border-style:none;} P.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none"> No border </p> <p class="dotted"> A dotted border</p> <p class="dashed"> A dashed border</p> <p class="solid"> A solid border</p> <p class="double"> A double border</p> <p class="groove"> A groove border</p> <p class="ridge">A ridge border</p> <p class="inset"> A inset border</p> <p class="outset"> An outset border</p> <p class="hidden"> A hidden border</p> </body> </html>

CSS Border Width Copyright - Anjan Mahanta 68 • The border-width property is used to set the width of the border. • The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Example: <!DOCTYPE html> <html> <head> <style> p.one {border-style:solid; border-width:5px;} p.two {border-style:solid; border-width:medium;} p.three {border-style:solid; border-width:1px;} </style> </head> <body> <p class="one"> First Example</p> <p class="two"> Second Example</p> <p class="three">Third Example</p> </body> </html> Output:

CSS Border Color Copyright - Anjan Mahanta 69 • The border-color property is used to set the color of the border. • The color can be set by: – name - specify a color name, like "red" – RGB - specify a RGB value, like "rgb(255,0,0)" – Hex - specify a hex value, like "#ff0000" • We can also set the border color to "transparent" Example: Output: <!DOCTYPE html> <html> <head> <style> p.one {border-style: solid; border-color:red;} p.two {border-style: solid; border-color:#98bf21;} </style> </head> <body> <p class="one"> A solid red border</p> <p class="two"> A solid green border</p> </body> </html>

CSS Border Individual Sides Copyright - Anjan Mahanta 70 • In CSS it is possible to specify different borders for different sides: Example: Output: <!DOCTYLE html> <html> <head> <style> p { border-top-style:solid; border-right-style:dotted; border-bottom-style:solid; border-left-style:dotted; } </style> </head> <body> <p>Bordering Individual Sides</p> </body> </html>

CSS Border Individual Sides Copyright - Anjan Mahanta 71 Example using single property: Output: <!DOCTYLE html> <html> <head> <style> p.one { border-top-style:solid; border-right-style:dotted; border-bottom-style:solid; border-left-style:dotted; } p.two {border-style:solid dotted;} </style> </head> <body> <p class="one">Bordering Individual Sides</p> <p class="two">Bordering Individual Sides Using Single Property</p> </body> </html>

CSS Border Short Hand Property Copyright - Anjan Mahanta 72 Example: Output: The border property is a shorthand for the following individual border properties: •border-width •border-style (required) •border-color <!DOCTYPE html> <html> <head> <style> p {border:3px solid red;} </style> </head> <body> <p> Border Using Short Hand Property </p> </body> </html>

CSS Outline Copyright - Anjan Mahanta 73 • An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". • However, the outline property is different from the border property. • The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

CSS Outline Copyright - Anjan Mahanta 74 Example: <!DOCTYPE html> <html> <head> <style> p { border:3px solid red; outline:3px solid green; } </style> </head> <body> <p> Example of Border Outline </p> </body> </html> Output:

CSS Margin Copyright - Anjan Mahanta 75 • The margin clears an area around an element (outside the border). • The margin does not have a background color, and is completely transparent. • The top, right, bottom, and left margin can be changed independently using separate properties. • A shorthand margin property can also be used, to change all margins at once. The margin property can have from one to four values. margin:25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px margin:25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px margin:25px 50px; top and bottom margins are 25px right and left margins are 50px margin:25px; all four margins are 25px

CSS Margin Copyright - Anjan Mahanta 76 Example <!DOCTYPE html> <html> <head> <style> p.nomargin{background-color: yellow; } p.margin1{background-color: green; margin-top:100px;margin-right:50px; margin-bottom:100px;margin-left:50px;} p.margin2{background-color:red;margin:100px 50px;} </style> </head> <body> <p class="nomargin">No Specified Margin</p> <p class="margin1">With Specified Margins Properties 1</p> <p class="margin2">With Specified Margins Properties 2</p> </body> </html> Output

CSS Padding Copyright - Anjan Mahanta 77 • The padding clears an area around the content (inside the border) of an element. • The padding is affected by the background color of the element. • The top, right, bottom, and left padding can be changed independently using separate properties. • A shorthand padding property can also be used, to change all paddings at once. The padding property can have from one to four values. padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px padding:25px 50px 75px; top padding is 25px right and left paddings are 50px bottom padding is 75px padding:25px 50px; top and bottom paddings are 25px right and left paddings are 50px padding:25px; all four paddings are 25px

CSS Padding Copyright - Anjan Mahanta 78 <!DOCTYPE html> <html> <head> <style> p.nopadding {background-color:yellow;} p.padding1 { background-color:green; padding-top:25px; padding-right:50px; padding-bottom:25px; padding-left:50px; } p.padding2 { background-color:red; padding:25px 50px; } </style> </head> <body> <p class="nopadding">No Specified paddings</p> <p class="padding1">With Specified paddings Properties 1</p> <p class="padding2">With Specified paddings Properties 2</p> </body> </html> Example Output

CSS Dimension – Height & Width Copyright - Anjan Mahanta 79 • The CSS dimension properties allows to control the height and width of an element. Example <html> <head> <style> p.dimension { background-color: yellow; height:100px; width:100px; } p.nodimension { background-color:green; } </style> </head> <body> <p class="dimension"> With Dimension </p> <p class="nodimension"> Without Dimension </p> </body> </html> Output

CSS Display & Visibility Copyright - Anjan Mahanta 80 • Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". • Visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. • Display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. Example Output <!DOCTYPE html> <html> <head> <style> h4.display_none{display:none;} h4.visibility_hidden{visibility:hidden;} </style> </head> <body> <h3> Welcome to LCCT...</h3> <h4 class="display_none"> Welcome to LCCT..</h4> <h4 class="visibility_hidden"> Lampang Thailand </h4> <h3> Lampang Thailand</h3> </body> </html>

CSS Display – Block & Inline Element Copyright - Anjan Mahanta 81 • A block element is an element that takes up the full width available, and has a line break before and after it. • Examples of block elements: – <h1> – <p> – <div> • An inline element only takes up as much width as necessary, and does not force line breaks. • Examples of inline elements: – <span> – <a>

CSS Display – Block & Inline Element Copyright - Anjan Mahanta 82 • Changing How an Element is Displayed • Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. Example: Display Inline <!DOCTYPE html> <html> <head> <style> li{display:inline;} </style> </head> <body> <p> Display the link list as horizontal menu </p> <ul> <li><a href="http://www.google.com" target="_blank">GOOGLE</a></li> <li><a href="http://www.hotmail.com" target="_blank">HOTMAIL</a></li> <li><a href="http://www,facebook.com"target="_blank">FACEBOOK</a></li> </ul> </body> </html> Output

CSS Display – Block & Inline Element Copyright - Anjan Mahanta 83 Example: Display Block Output <!DOCTYPE html> <html> <head> <style> span{display:block;} </style> </head> <body> <h2> LCCT </h2> <span> Vocational College </span> <span> Established in 1971 </span> <h2> LIT </h2> <span> Degree College </span> <span> Established in 2003 </span> </body> </html>

CSS Positioning Copyright - Anjan Mahanta 84 • The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. • Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. • There are four different positioning methods. – Static Positioning • HTML elements are positioned static by default. – Fixed Positioning • An element with fixed position is positioned relative to the browser window. – Relative Positioning • A relative positioned element is positioned relative to its normal position. – Absolute Positioning • An absolute position element is positioned relative to the first parent element that has a position other than static.

CSS Fixed Positioning Copyright - Anjan Mahanta 85 Example <!DOCTYPE html> <html> <head> <style> p.fixed { position:fixed; top:30px; right:5px; } </style> </head> <body> <p class="fixed"> The IEI </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> <p> LCCT </p> </body> </html> Output

CSS Relative Positioning Copyright - Anjan Mahanta 86 Example Output<!DOCTYPE html> <html> <head> <style> p.relative1 { position:relative; left:-30px; } P.relative2 { position:relative; left:30px; } </style> </head> <body> <p> This Paragraph doesn't have any Relative Position </p> <p class="relative1"> This Paragraph is the Relative Example 1</p> <p class="relative2"> This paragraph is the Relative Example 2</p> </body> </html>

CSS Absolute Positioning Copyright - Anjan Mahanta 87 Example Output <!DOCTYPE html> <html> <head> <style> h2 { position:absolute; top:100px; left:100px; } </style> </head> <body> <h2> LCCT - Lampang Thailand </h2> <p> LCCT - Lampang Thailand</p> </body> </html>

Show Overflow in an element using scroll Copyright - Anjan Mahanta 88 Example Part I <!DOCTYPE html> <html> <head> <style> div.scroll { background-color: yellow; width:100px; height:100px; overflow:scroll; } div.hidden { background-color:blue; width:100px; height:100px; overflow:hidden; } div.auto { background-color:green; width:100px; height:100px; overflow:auto; } </style> </head> Output

Show Overflow in an element using scroll Copyright - Anjan Mahanta 89 Example Part II <body> <p> Overflow Scroll </p> <div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible. </div> <p> Overflow Hidden </p> <div class="hidden"> You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> <p> Overflow Auto </p> <div class="auto"> You can use the overflow property when you want to have better control of the layout. The default value is visible.</div> </body> </html>

Changing Cursor on Mouse over Copyright - Anjan Mahanta 90 Example <!DOCTYPE html> <html> <body> <p>Mouse over the words to change the cursor.</p> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> </body> </html>

CSS Float Copyright - Anjan Mahanta 91 • With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. • Float is very often used for images, but it is also useful when working with layouts. • Elements are floated horizontally, this means that an element can only be floated left or right, not up or down. Example If an image is floated to the right, a following text flows around it, to the left:

CSS Float Copyright - Anjan Mahanta 92 Code <!DOCTYPE html> <html> <head> <style> img { float:right;} </style> </head> <body> <h4> This is an example of Image with style Float:Right </h4> <p> <img src="logocss.gif" width="95" height="84"/> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> </body> </html> Save a picture as, logocss.gif in the same folder as at html file

CSS Float – Image gallery I Copyright - Anjan Mahanta 93 Example

CSS Float – Image gallery I Copyright - Anjan Mahanta 94 Code Part I <!DOCTYPE html> <html> <head> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } </style> </head>

CSS Float – Image gallery I Copyright - Anjan Mahanta 95 Code Part I <body> <h3> :: Image Gallery :: </h3> <img class="thumbnail" src="image_gallery_1/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis2_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis3_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis4_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis2_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis3_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis4_small.jpg" width="107" height="90"> </body> </html>

CSS Float – Image gallery II Copyright - Anjan Mahanta 96 Example: Turning off Float - Using Clear

CSS Float – Image gallery II Copyright - Anjan Mahanta 97 Code Part I <!DOCTYPE html> <html> <head> <style> .thumbnail { float:left; width:110px; height:90px; margin:5px; } .text_line { clear:both; margin-bottom:2px; } </style> </head>

CSS Float – Image gallery II Copyright - Anjan Mahanta 98 Code Part II <body> <h3 class="text_line"> :: Image Gallery I :: </h3> <img class="thumbnail" src="image_gallery_1/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis2_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis3_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis4_small.jpg" width="107" height="90"> <h3 class="text_line"> :: Image Gallery II ::</h3> <img class="thumbnail" src="image_gallery_1/klematis_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis2_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis3_small.jpg" width="107" height="90"> <img class="thumbnail" src="image_gallery_1/klematis4_small.jpg" width="107" height="90"> </body> </html>

CSS Float – Right, Border & Margin Copyright - Anjan Mahanta 99 Example

CSS Float – Right, Border & Margin Copyright - Anjan Mahanta 100 Code <!DOCTYPE html> <html> <head> <style> img { float:right; border:1px dotted black; margin:0px 0px 15px 30px; } </style> </head> <body> <h4> This is an example of Image with style Float:Right, Border & Margin </h4> <p> <img src="logocss.gif" width="95" height="84"/> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p> </body> </html>

CSS Float – Right, Caption, Border & Margin Copyright - Anjan Mahanta 101 Example

CSS Float – Right, Caption, Border & Margin Copyright - Anjan Mahanta 102 Code Part I <!DOCTYPE html> <html> <head> <style> div { float:right; width:120px; margin:0px 0px 15px 30px; border:1px solid black; padding:15px; text-align: center; } </style> </head> <body> <h4> This is an example of Image with style Float:Right,Caption, Border & Margin </h4> <div> <img src="logocss.gif" width="95" height="84" <br> CSS is Fun! </div>

CSS Float – Right, Caption, Border & Margin Copyright - Anjan Mahanta 103 Code Part II <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>

CSS Float Copyright - Anjan Mahanta 104 First letter of the a paragraph floats to the left and style the letter Example

CSS Float Copyright - Anjan Mahanta 105 First letter of the a paragraph floats to the left and style the letter Code <!DOCTYPE html> <html> <head> <style> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html>

CSS Float – Horizontal Menu Copyright - Anjan Mahanta 106 Code<!DOCTYPE html> <html> <head> <style> ul { float:left; width:100%; padding:0; margin:0; line-style-type:none; } a { float:left; width:6em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300;} li {display:inline;} </style> </head> <body> <ul> <li><a href="#"> Link One </a></li> <li><a href="#"> Link Two </a></li> <li><a href="#"> Link Three </a></li> <li><a href="#"> Link Four </a></li> </ul> <p> Example of a Horizontal Menu </p> </body> </html>

CSS Homepage without Table Copyright - Anjan Mahanta 107

CSS Homepage without Table Copyright - Anjan Mahanta 108 <!DOCTYPE html> <html> <head> <title>:: Homepage Without Table ::</title> <style> div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header, div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } Code Part I

CSS Homepage without Table Copyright - Anjan Mahanta 109 Code Part II h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style>

CSS Homepage without Table Copyright - Anjan Mahanta 110 Code Part III </head> <body> <div class="container"> <div class="header"><h1 class="header">LCCT - International Education Institute</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349) </p></div> <div class="content"> <h2> Welcome to our website..!!</h2> <p>We offer vocational programs in LVT & IEP Levels - majoring in Business English, Business Computing and Tourism Studies.</p> <p> Join our programs..!!</p> </div> <div class="footer">Copyright <span>&copy</span> Anjan Mahanta 2014</div> </div> </body> </html>

Aligning Block Elements Center Aligning Using the margin Property • Block elements can be center-aligned by setting the left and right margins to "auto". • Using margin:auto; will not work in IE8 and earlier, unless a !DOCTYPE is declared. • Center alignment has no effect is the width is 100%. Copyright - Anjan Mahanta 111

Aligning Block Elements Code Copyright - Anjan Mahanta 112 <!DOCTYPE html> <html> <head> <style> .center { margin:auto; width:70%; background-color:gray; color:white; } </style> </head> <body> <div class="center"> <p>LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand.</p> <p>We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</p> </div> </body> </html>

Right & Left Align Copyright - Anjan Mahanta 113

Right & Left Align Copyright - Anjan Mahanta 114 <!DOCTYPE html> <html> <head> <style> .right { position:absolute; right:0px; width:300px; background-color:gray; color:white; } </style> </head> <body> <div class="right"> <p>LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand.</p> <p>We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</p> </div> </body> </html> Code

Crossbrowser Compatibility Issues Copyright - Anjan Mahanta 115 • When aligning elements like this, it is always a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers. <!DOCTYPE html> <html> <head> <style> body { margin:0; padding:0; } .container { position:relative; width:100%; } Code Part I Output

Crossbrowser Compatibility Issues Copyright - Anjan Mahanta 116 .right { position:absolute; right:0px; width:300px; background-color:gray; color:white; } </style> </head> <body> <div class="container"> <div class="right"> <p>LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand.</p> <p>We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</p> </div> </div> </body> </html> Code Part II

CSS Combinators Copyright - Anjan Mahanta 117 • A combinator is something that explains the relationship between the selectors. • A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. • There are four different combinators in CSS3: – descendant selector – child selector – adjacent sibling selector – general sibling selector

Descendant Selector Copyright - Anjan Mahanta 118 • The descendant selector matches all element that are descendants of a specified element. • The following example selects all <p> elements inside <div> elements: <!DOCTYPE html> <html> <head> <style> div p { background-color:yellow; } </style> </head> <body> <div> <p>Paragraph1 in the div</p> <p>Paragraph2 in the div</p> </div> <p>Paragraph3 outside the div</p> <p>Paragraph4 outside the div</p> </body> </html> Output

Child Selector Copyright - Anjan Mahanta 119 • The child selector selects all elements that are the immediate children of a specified element. • The following example selects all <p> elements that are immediate children of a <div> element: Output <!DOCTYPE html> <html> <head> <style> div>p { background-color:yellow; } </style> </head> <body> <div> <p>Paragraph1 in the div</p> <p>Paragraph2 in the div</p> </div> <p>Paragraph3 outside the div</p> <p>Paragraph4 outside the div</p> </body> </html>

Adjacent Sibling Selector Copyright - Anjan Mahanta 120 • The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. • Sibling elements must have the same parent element, and "adjacent" means "immediately following". • The following example selects all <p> elements that are placed immediately after <div> elements: Output <!DOCTYPE html> <html> <head> <style> div+p { background-color:yellow; } </style> </head> <body> <div> <p>Paragraph1 in the div</p> <p>Paragraph2 in the div</p> </div> <p>Paragraph3 outside the div</p> <p>Paragraph4 outside the div</p> </body> </html>

General Sibling Selector Copyright - Anjan Mahanta 121 • The general sibling selector selects all elements that are siblings of a specified element. • The following example selects all <p> elements that are siblings of <div> elements: Output <!DOCTYPE html> <html> <head> <style> div~p { background-color:yellow; } </style> </head> <body> <div> <p>Paragraph1 in the div</p> <p>Paragraph2 in the div</p> </div> <p>Paragraph3 outside the div</p> <p>Paragraph4 outside the div</p> </body> </html>

CSS Pseudo-classes Copyright - Anjan Mahanta 122 • CSS pseudo-classes are used to add special effects to some selectors. • Syntax • The syntax of pseudo-classes: – selector:pseudo-class {property:value;} • CSS classes can also be used with pseudo-classes: – selector.class:pseudo-class {property:value;} • Types of Pseudo-classes – The :first-child Pseudo-class – The :lang Pseudo-class – The :focus pseudo-class

CSS The :first-child Pseudo-class Copyright - Anjan Mahanta 123 Example - I <!DOCTYPE html> <html> <head> <style> p:first-child { color:blue; } </style> </head> <body> <p> Hello.. How are you, today?</p> <p> I'm doing fine, thanks..!!</p> </body> </html> Output

CSS The :first-child Pseudo-class Copyright - Anjan Mahanta 124 Example - II <!DOCTYPE html> <html> <head> <style> p>i:first-child { color:blue; } </style> </head> <body> <p> <i>Hello..</i>.. How are you, <i>today</i>?</p> <p> I'm <i>doing</i> fine, <i>thanks</i>..!!</p> </body> </html> Output

CSS The :first-child Pseudo-class Copyright - Anjan Mahanta 125 Example - III <!DOCTYPE html> <html> <head> <style> p:first-child i { color:blue; } </style> </head> <body> <p> <i>Hello..</i>.. How are you, <i>today</i>?</p> <p> I'm <i>doing</i> fine, <i>thanks</i>..!!</p> </body> </html> Output

CSS The :lang Pseudo-class Copyright - Anjan Mahanta 126 Example - III <!DOCTYPE html> <html> <head> <style> q:lang(no) { quotes:"~" "~"; } </style> </head> <body> <p> Welcome to <q lang="no"> Lampang </q>,Thailand </p> </body> </html> Output

CSS Pseudo-elements Copyright - Anjan Mahanta 127 • CSS pseudo-elements are used to add special effects to some selectors. Syntax • The syntax of pseudo-elements: – selector::pseudo-element {property:value;} • CSS classes can also be used with pseudo-elements: – selector.class::pseudo-element {property:value;} • Types of Pseudo-classes – The ::first-line Pseudo-element – The ::first-letter Pseudo-element – The ::before Pseudo-element – The ::after Pseudo-element

The ::first-line Pseudo-element Copyright - Anjan Mahanta 128 Example <!DOCTYPE html> <html> <head> <style> p::first-line { color:red; font-variant:small-caps; } </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years.We are proud to be one of the foremost Vocational Colleges in Northern Thailand. </p> </body> </html> Output

The ::first-letter Pseudo-element Copyright - Anjan Mahanta 129 Example <!DOCTYPE html> <html> <head> <style> p::first-letter { color:red; font-size:xx-large; } </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years.We are proud to be one of the foremost Vocational Colleges in Northern Thailand. </p> </body> </html> Output

Multiple Pseudo-element Copyright - Anjan Mahanta 130 Example <!DOCTYPE html> <html> <head> <style> p::first-letter {color:red; font-size:xx-large;} p::first-line {color:blue; font-variant:small-caps;} </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years.We are proud to be one of the foremost Vocational Colleges in Northern Thailand. </p> </body> </html> Output

Before & After Pseudo-element Copyright - Anjan Mahanta 131 Example <!DOCTYPE html> <html> <head> <style> h1::before {content:url(lcct_logo.gif);} h2::after {content:url(web1.png);} </style> </head> <body> <h1> Welcome to LCCT ..!!</h1> <h2>International Education Institute</h2> </body> </html> Output

CSS Navigation Bar Copyright - Anjan Mahanta 132 Example A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: Output <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Navigation Bar Copyright - Anjan Mahanta 133 Example with border Output <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Navigation Bar Copyright - Anjan Mahanta 134 Example with full style <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } a:link, a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#7A991A; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Navigation Bar Copyright - Anjan Mahanta 135 Example of horizontal navigation bar Output <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } li { display:inline; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Navigation Bar Copyright - Anjan Mahanta 136 Example of horizontal navigation bar with floating list items Output <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } li { float:left; } a { display:block; width:60px; background-color:#dddddd; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Navigation Bar Copyright - Anjan Mahanta 137 Example of horizontal navigation bar with full style <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none; margin:0; padding:0; } a:link, a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } a:hover, a:active { background-color:#7A991A; } li { float:left; } </style> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </body> </html>

CSS Image Gallery Copyright - Anjan Mahanta 138 • CSS can be used to create an image gallery. Note: Save 8 pictures in a folder named image_gallery_1 (four pictures for thumbnails and four pictures for enlargement) Give the name of the picture files as per the give example.

CSS Image Gallery Copyright - Anjan Mahanta 139 • Code - Part I <!DOCTYPE html> <html> <head> <style> div.img { margin:5px; padding:5px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; } div.img img { display:inline; margin:5px; border:1px solid #ffffff; }

CSS Image Gallery Copyright - Anjan Mahanta 140 • Code - Part II div.img a:hover img { border:1px solid #0000ff; } div.desc { text-align:center; font-weight:normal; width:120px; margin:5px; } </style> </head> <body> <div class="img"> <a target="_blank" href="image_gallery_1/klematis_big.jpg"> <img src="image_gallery_1/klematis_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Enlarge Flower I</div> </div>

CSS Image Gallery Copyright - Anjan Mahanta 141 • Code - Part III <div class="img"> <a target="_blank" href="image_gallery_1/klematis2_big.jpg"> <img src="image_gallery_1/klematis2_small.jpg" alt="Klematis" width="110" height="90"> </a> <div class="desc">Enlarge Flower II</div> </div> <div class="img"> <a target="_blank" href="image_gallery_1/klematis3_big.jpg"> <img src="image_gallery_1/klematis3_small.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">Enlarge Flower III</div> </div> <div class="img"> <a target="_blank" href="image_gallery_1/klematis4_big.jpg"> <img src="image_gallery_1/klematis4_small.jpg" alt="Klematis" width="110" height="90"></a> <div class="desc">Enlarge Flower IV</div> </div> </body> </html>

CSS Image Opacity/Transparency Copyright - Anjan Mahanta 142 • IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent. • IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent. • Example – I Transparent Image with Hover Effect

CSS Image Opacity/Transparency Copyright - Anjan Mahanta 143 Example – I Transparent Image with Hover Effect <!DOCTYPE html> <html> <head> <style> img { opacity:0.4; filter:alpha(opacity=40); } img:hover { opacity:1.0; filter:alpha(opacity=100); } </style> <body> <h1>Image Transparency</h1> <img src="image_gallery_1/klematis_small.jpg" width="150" height="113" alt="klemantis"> <img src="image_gallery_1/klematis2_small.jpg" width="150" height="113" alt="klemantis"> </body> </head> </html>

CSS Image Opacity/Transparency Copyright - Anjan Mahanta 144 • Example – II Text in Transparent Box

CSS Image Opacity/Transparency Copyright - Anjan Mahanta 145 • Example – II Text in Transparent Box :: Code Part I :: <!DOCTYPE html> <html> <head> <style> div.background { width:500px; height:250px; background:url(image_gallery_1/klematis_small.jpg)repeat; border:2px solid black; } div.transbox { width:400px; height:180px; margin:30px 50px; background-color: #ffffff; border:1px solid black; opacity:0.6; filter:alpha(opacity=60); }

CSS Image Opacity/Transparency Copyright - Anjan Mahanta 146 • Example – II Text in Transparent Box :: Code Part II :: div.transbox p { margin:30px 40px; font-weight:bold; color:#000000; } </style> <body> <div class="background"> <div class="transbox"> <p>LCCT has been a greatly successful institution over the time of 42 years.We are proud to be one of the foremost Vocational Colleges in Northern Thailand. </p> </div> </div> </body> </head> </html>

CSS Image Sprites Copyright - Anjan Mahanta 147 • An image sprite is a collection of images put into a single image. • A web page with many images can take a long time to load and generates multiple server requests. • Using image sprites will reduce the number of server requests and save bandwidth. • Instead of using three separate images, we use this single image (“nav_sprites.gif"):

CSS Image Sprites Copyright - Anjan Mahanta 148 <!DOCTYPE html> <html> <head> <style> img.home { width:46px; height:44px; background:url(image_gallery_1/nav_sprites.gif) 0 0; } img.next { width:43px; height:44px; background:url(image_gallery_1/nav_sprites.gif) -91px 0; } </style> </head> <body> <img class="home" src="image_gallery_1/home.gif"> <br><br> <img class="next" src="image_gallery_1/arrow.gif"> </body> </html> Example 1 Output

CSS Image Sprites Copyright - Anjan Mahanta 149 Example 2 Output <!DOCTYPE html> <html> <head> <style> #navlist {position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home {left:0px;width:46px;} #home {background:url('image_gallery_1/img_navsprites.gif')0 0;} #prev {left:63px;width:43px;} #prev {background:url('image_gallery_1/img_navsprites.gif') -47px 0;} #next {left:129px;width:43px;} #next {background:url('image_gallery_1/img_navsprites.gif')-91px 0;} </style> </head> <body> <ul id="navlist"> <li id= "home"><a href="http://www.apple.com"></a></li> <li id= "prev"><a href="http://www.msn.com"></a></li> <li id= "next"><a href="http://www.google.com"></a></li> </ul> </body> </html> Width:134 Height:44

CSS Image Sprites - Hover Copyright - Anjan Mahanta 150 Example 3 Output <!DOCTYPE html> <html> <head> <style> #navlist {position:relative;} #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} #navlist li, #navlist a{height:44px;display:block;} #home {left:0px;width:46px;} #home {background:url('image_gallery_1/img_navsprites_hover.gif')0 0;} #home a:hover{background: url('image_gallery_1/img_navsprites_hover.gif') 0 -45px;} #prev {left:63px;width:43px;} #prev {background:url('image_gallery_1/img_navsprites_hover.gif') -47px 0;} #prev a:hover{background: url('image_gallery_1/img_navsprites_hover.gif') -47px -45px;} #next {left:129px;width:43px;} #next {background:url('image_gallery_1/img_navsprites_hover.gif')-91px 0;} #next a:hover{background: url('image_gallery_1/img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id= "home"><a href="http://www.apple.com"></a></li> <li id= "prev"><a href="http://www.msn.com"></a></li> <li id= "next"><a href="http://www.google.com"></a></li> </ul> </body> </html> Width:134 Height:89

CSS Attribute Selectors Copyright - Anjan Mahanta 151 • It is possible to style HTML elements that have specific attributes, not just class and id. • The [attribute] selector is used to select elements with the specified attribute. • The following example selects all <a> elements with a target attribute: <!DOCTYPE html> <html> <head> <style> a[target] { background-color:yellow; } </style> </head> <body> <p> The links with an attribute gets an yellow background </p> <a href="http://www.lcct.ac.th">LCCT</a> <a href="http://www.lit.ac.th" target="_blank">LIT College</a> <a href="http://www.google.com" target="_top">Search</a> </body> </html> Output

CSS Attribute Selectors Copyright - Anjan Mahanta 152 • The following example selects all <a> elements with a target attribute: _blank <!DOCTYPE html> <html> <head> <style> a[target="_blank"] { background-color:yellow; } </style> </head> <body> <p> The links with an attribute gets an yellow background </p> <a href="http://www.lcct.ac.th">LCCT</a> <a href="http://www.lit.ac.th" target="_blank">LIT College</a> <a href="http://www.google.com" target="_top">Search</a> </body> </html> Output

CSS Attribute Selectors Copyright - Anjan Mahanta 153 • The following example gives yellow borders with image title “flower” Output <!DOCTYPE html> <html> <head> <style> [title~="flower"] { border: 5px solid yellow; } </style> </head> <body> <p> All images with a flower title gets yellow border </p> <img src="image_gallery_1/klematis.jpg" title="klematis flower" width="150" height="113"> <img src="image_gallery_1/img_flwr.gif" title="flower" width="224" height="162"> <img src="image_gallery_1/img_tree.gif" title="tree" width="200" height="358"> </body> </html>

CSS Attribute Selectors Copyright - Anjan Mahanta 154 • The [attribute|=value] selector is used to select elements with the specified attribute starting with the specified value. • The following example selects all elements with a class attribute value that begins with "top": • Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text"! Output<!DOCTYPE html> <html> <head> <style> [class|="top"] { background:yellow; } </style> </head> <body> <h1 class="top-header"> Welcome to LCCT</h1> <p class="top-text"> International Education Institute </p> <p class="topcontent">Lampang, Thailand</p> </body> </html>

CSS Attribute Selectors Copyright - Anjan Mahanta 155 • The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value. • The following example selects all elements with a class attribute value that begins with "top": • Note: The value does not have to be a whole word! Output <!DOCTYPE html> <html> <head> <style> [class^="top“] { background:yellow; } </style> </head> <body> <h1 class="top-header"> Welcome to LCCT</h1> <p class="top-text"> International Education Institute </p> <p class="topcontent">Lampang, Thailand</p> </body> </html>

CSS3 Borders Copyright - Anjan Mahanta 156 • With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop. • In this chapter you will learn about the following border properties: – border-radius – box-shadow – border-image The border-radius Property - Rounded Corners <!DOCTYPE html> <html> <head> <style> div { border:2px solid gray; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div> Hello..!! Welcome to LCCT.</div> </body> </html> Output

CSS3 The Box Shadow Property Copyright - Anjan Mahanta 157 The Box Shadow Property <!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div> </div> </body> </html> Output

CSS3 The Border Image Property Copyright - Anjan Mahanta 158 The Border Image Property Output

CSS3 The Border Image Property Copyright - Anjan Mahanta 159 The Border Image Property <!DOCTYPE html> <html> <head> <style> div { border:15px solid transparent; width:250 px; padding:10px 20px; } #round { -webkit-border-image:url(image_gallery_1/border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(image_gallery_1/border.png) 30 30 round; /* Opera 10.5-12.1 */ border-image:url(image_gallery_1/border.png) 30 30 round; } #stretch { -webkit-border-image:url(image_gallery_1/border.png) 30 30 stretch; /* Safari 5 */ -o-border-image:url(image_gallery_1/border.png) 30 30 stretch; /* Opera 10.5-12.1 */ border-image:url(image_gallery_1/border.png) 30 30 stretch; }

CSS3 The Border Image Property Copyright - Anjan Mahanta 160 The Border Image Property </style> </head> <body> <div id="round">Here, the image is tiled (repeated) to fill the area.</div> <br> <div id="stretch">Here, the image is stretched to fill the area.</div> <p>Here is the image used:</p> <img src="image_gallery_1/border.png" </body> </html>

CSS3 – Background Size Property Copyright - Anjan Mahanta 161 • The background-size property specifies the size of the background image. • Before CSS3, the background image size was determined by the actual size of the image. In CSS3 it is possible to specify the size of the background image, which allows us to re- use background images in different contexts. OutputExample: 1

CSS3 – Background Size Property Copyright - Anjan Mahanta 162 <!DOCTYPE html> <html> <head> <style> body { background: url("image_gallery_1/img_flwr.gif"); background-size:80px 60px; background-repeat:no-repeat; padding-top:40px; } </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. </p> <p> Oridinal Image <img src="image_gallery_1/img_flwr.gif" alt="flowers" width="224" height="162"></p> </body> </html> Example: 1 CODE

CSS3 – Background Size Property Copyright - Anjan Mahanta 163 • Example 2: Stretch the background image to completely fill the content area: Output

CSS3 – Background Size Property Copyright - Anjan Mahanta 164 Example: 2 CODE <!DOCTYPE html> <html> <head> <style> body { background: url("image_gallery_1/img_flwr.gif"); background-size:100% 100%; background-repeat:no-repeat; } </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</p> </body> </html>

CSS3 – Background Origin Property Copyright - Anjan Mahanta 165 • The background-origin property specifies the positioning area of the background images. • The background image can be placed within the content-box, padding-box, or border-box area.

CSS3 – Background Origin Property Copyright - Anjan Mahanta 166 • Example : Position the background image within the content-box and border box:

CSS3 – Background Origin Property Copyright - Anjan Mahanta 167 • Code : Position the background image within the content-box and border box: <!DOCTYPE html> <html> <head> <style> div { border:1px solid black; padding:35px; background-image:url('image_gallery_1/smiley.jpg'); background-repeat:no-repeat; background-position:left; } #div1 { background-origin:border-box; } #div2 { background-origin:content-box; } </style>

CSS3 – Background Origin Property Copyright - Anjan Mahanta 168 • Code : Position the background image within the content-box and border box: </head> <body> <p> Background-Origin Border Box</p> <div id="div1"> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</div> <p> Background-Origin Content Box</p> <div id="div2"> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.</div> </body> </html>

CSS3 – Multiple Backgrounds Copyright - Anjan Mahanta 169 • Example : CSS3 allows you to use several background images for an element

CSS3 – Multiple Backgrounds Copyright - Anjan Mahanta 170 • Example : Code <!DOCTYPE html> <html> <head> <style> body { background:url('image_gallery_1/img_tree.gif'), url('image_gallery_1/img_flwr.gif'); background-size:100% 100%; background-repeat:no-repeat; } </style> </head> <body> <p> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education.<p> </body> </html>

CSS3 – Text Shadow Copyright - Anjan Mahanta 171 • In CSS3, the text-shadow property applies shadow to text. <!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> </head> <body> <h1> Text Shadow Effect </h1> </body> </html> • Example : Code Output

CSS3 – Word Wrapping Copyright - Anjan Mahanta 172 • If a word is too long to fit within an area, it expands outside. • In CSS3, the word-wrap property allows to force the text to wrap - even if it means splitting it in the middle of a word. • Example : Code Output<!DOCTYPE html> <html> <head> <style> p { width:11em; border:1px solid #000000; word-wrap:break-word; } </style> </head> <body> <p> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line. </p> </body> </html>

CSS3 – Multiple Columns Copyright - Anjan Mahanta 173 • With CSS3, we can create multiple columns for laying out text - like in newspapers! • Multiple column has the following properties: – column-count – column-gap – column-rule Output

CSS3 – Multiple Columns Copyright - Anjan Mahanta 174 • Example : Code – Part I <!DOCTYPE html> <html> <head> <style> .newspaper { -webkit-column-count:3; /* Chrome, Safari, Opera */ -moz-column-count:3; /* Firefox */ column-count:3; -webkit-column-gap:40px; /* Chrome, Safari, Opera */ -moz-column-gap:40px; /* Firefox */ column-gap:40px; -webkit-column-rule:4px outset #ff00ff; /* Chrome, Safari, Opera */ -moz-column-rule:4px outset #ff00ff; /* Firefox */ column-rule:4px outset #ff00ff; } </style>

CSS3 – Multiple Columns Copyright - Anjan Mahanta 175 • Example : Code – Part II </head> <body> <h1>Pride in Excellence</h1> <div class="newspaper"> LCCT has been a greatly successful institution over the time of 42 years. We are proud to be one of the foremost Vocational Colleges in Northern Thailand. We have served young people in Northern Thailand with a variety of vocational programs successfully developing to provide high quality education. We are now expanding to global quality education. All courses have proved popular with students from all over Northern Thailand and students from other countries giving them opportunities to develop language and vocational skills which meet the needs of modern businesses. </div> </body> </html>

Web Development Using CSS3

More Related Content

What's hot

Similar to Web Development Using CSS3

More from Anjan Mahanta

Recently uploaded

Web Development Using CSS3