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

CSS Syntax
A CSS rule set consists of a selector and a declaration block:
• 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:
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 */.
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.

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)
<!DOCTYPE html>
<html>
<head>
<style>
p {color:red; text-align:center;}
</style>
</head>
<body>
<p> Hello..!!</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":

The id Selector
Code:
Output:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {color:red; text-align:center;}
</style>
</head>
<body>
<p id="para1"> Hello..!!</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:

The Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {color:red; text-align:center;}
</style>
</head>
<body>
<h1 class="center"> LCCT </h1>
<p class="center"> Hello..!!</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.

Grouping Selector
Code:
Output:<!DOCTYPE html>
<html>
<head>
<style>
h1,h2,p {color:red; text-align:center;}
</style>
</head>
<body>
<h1> LCCT </h1>
<h2 > Hello..!!</h2>
</body>
</html>

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

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.

External Style Sheet
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>
</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.
<!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.
<!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.
<!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
<!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>
<div>
This is Div Element 1
<p>Lampang Thailand</p>
This is Div Element 2
</div>
</body>
</html>
Example 2:
OUTPUT:

CSS Background Image
<!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
<!DOCTYPE html>
<html>
<head>
<style>
body {background-image:url("background3.jpg");}
</style>
</head>
<body>
<h1> Hello</h1>
</body>
</html>
Example: OUTPUT:
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
<!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:
If the image is repeated only horizontally (repeat-x), the background will look better:

Background Image
Set position and no-repeat
<!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
<!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:
The position of the image is specified by the background-position property:

Background Image
Shorthand Property
<!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:
The position of the image is specified by the background-position property:

Text Color
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
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
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>
<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
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
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
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
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
• 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
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
• 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
• 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
• 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
• 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
• 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>
</body>
</html>
Example:

CSS Links – Background Color
• 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>
</body>
</html>
Example:

Different Styles of Hyperlink
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
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
• 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
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
• The look of an HTML table can be greatly improved with CSS:
Example:

CSS Table Borders
• 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
• 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;}
</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
• 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
Code:
<!DOCTYPE html>
<html>
<head>
<style>
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
• The text-align property sets the horizontal alignment, like left, right, or center:
Output:
<!DOCTYPE html>
<html>
<head>
<style>
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
• The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Output:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
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
• 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>
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
• 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
Output

Fancy Table
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
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
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
• 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
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
• 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
• 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;
margin:0;}
</style>
</head>
<body>
<div class="example"> This is an example of css box</div>
</body>
</html>

CSS Border
• 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
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
• 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
• 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
• 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
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
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
• 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
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
outline:3px solid green;
}
</style>
</head>
<body>
<p> Example of Border Outline </p>
</body>
</html>
Output:

CSS Margin
• 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
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
• 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
<!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
• 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
{
}
</style>
</head>
<body>
<p class="dimension"> With Dimension </p>
<p class="nodimension"> Without Dimension </p>
</body>
</html>
Output

CSS Display & Visibility
• 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
• 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>

• 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

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
• 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
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>
</body>
</html>
Output

CSS Relative Positioning
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
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
Example Part I
<!DOCTYPE html>
<html>
<head>
<style>
div.scroll
{
background-color: yellow;
width:100px; height:100px;
overflow:scroll;
}
div.hidden
{
background-color:blue;
overflow:hidden;
}
div.auto
{
overflow:auto;
}
</style>
</head>
Output

Show Overflow in an element using scroll
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
The default value is visible.</div>
<p> Overflow Auto </p>
<div class="auto"> You can use the overflow property when
The default value is visible.</div>
</body>
</html>

Changing Cursor on Mouse over
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
• 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
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.</p>
</body>
</html>
Save a picture as, logocss.gif in
the same folder as at html file

CSS Float – Image gallery I
Example

Code Part I
<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

Code Part II
<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">
</body>
</html>

CSS Float – Image gallery II
Example: Turning off Float - Using Clear

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>

Code Part II
<body>
<h3 class="text_line"> :: Image Gallery I :: </h3>
<h3 class="text_line"> :: Image Gallery II ::</h3>
</body>
</html>

CSS Float – Right, Border & Margin
Example

CSS Float – Right, Border & Margin
Code
<!DOCTYPE html>
<html>
<head>
<style>
img
{
float:right;
border:1px dotted black;
}
</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.</p>
</body>
</html>

CSS Float – Right, Caption, Border & Margin
Example

Code Part I
<!DOCTYPE html>
<html>
<head>
<style>
div
{
float:right;
width:120px;
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>

Code Part II
<p>
</p>
</body>
</html>

CSS Float
First letter of the a paragraph floats to the left and style the letter
Example

CSS Float
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.
</p>
</body>
</html>

CSS Float – Horizontal Menu
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

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

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>

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%.

Aligning Block Elements
Code
<!DOCTYPE html>
<html>
<head>
<style>
.center
{
margin:auto;
width:70%;
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

Right & Left Align
<!DOCTYPE html>
<html>
<head>
<style>
.right
{
position:absolute;
right:0px;
width:300px;
color:white;
}
</style>
</head>
<body>
<div class="right">
</div>
</body>
</html>
Code

Crossbrowser Compatibility Issues
• 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
.right
{
position:absolute;
right:0px;
width:300px;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="right">
</div>
</div>
</body>
</html>
Code Part II

CSS Combinators
• 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
• 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>
</div>
<p>Paragraph3 outside the div</p>
</body>
</html>
Output

Child Selector
• 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
{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

Adjacent Sibling Selector
• 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
{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

General Sibling Selector
• 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
{
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

CSS Pseudo-classes
• 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
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

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

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
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
• 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
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
Example
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter
{
color:red;
font-size:xx-large;
}
</style>
</head>
<body>
</p>
</body>
</html>
Output

Multiple Pseudo-element
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>
</body>
</html>
Output

Before & After Pseudo-element
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>
</body>
</html>
Output

CSS Navigation Bar
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
{
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

CSS Navigation Bar
Example with full style
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
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-transform:uppercase;
}
a:hover, a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

CSS Navigation Bar
Example of horizontal navigation bar
Output
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
margin:0;
padding:0;
}
li
{
display:inline;
} </style>
</head>
<body>
<ul>
</ul>
</body>
</html>

CSS Navigation Bar
136
Example of horizontal navigation bar with floating list items
Output
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
margin:0;
padding:0;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

CSS Navigation Bar
137
Example of horizontal navigation bar with full style
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
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-transform:uppercase;
}
a:hover, a:active
{
background-color:#7A991A;
}
li
{
float:left;
}
</style>
</head>
<body>
<ul>
</ul>
</body>
</html>

CSS Image Gallery
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
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
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
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">
alt="Klematis" width="110" height="90"></a>
<div class="desc">Enlarge Flower III</div>
</div>
<div class="img">
alt="Klematis" width="110" height="90"></a>
<div class="desc">Enlarge Flower IV</div>
</div>
</body>
</html>

CSS Image Opacity/Transparency
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

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;
}
</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>

144
• Example – II Text in Transparent Box

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;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color: #ffffff;
opacity:0.6;
}

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
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
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
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
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
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]
{
}
</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

152
• The following example selects all <a> elements with a target attribute: _blank
<!DOCTYPE html>
<html>
<head>
<style>
a[target="_blank"]
{
}
</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

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>

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"!
<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>

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
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
{
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
157
The Box Shadow Property
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
Output

CSS3 The Border Image Property
158
The Border Image Property
Output

159
<!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;
}

160
</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
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

162
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background: url("image_gallery_1/img_flwr.gif");
background-size:80px 60px;
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

163
• Example 2: Stretch the background image to completely fill the content area:
Output

164
Example: 2 CODE
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background: url("image_gallery_1/img_flwr.gif");
background-size:100% 100%;
}
</style>
</head>
<body>
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
</body>
</html>

CSS3 – Background Origin Property
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.

166
• Example : Position the background image within the content-box and border box:

167
• Code : Position the background image within the content-box and border box:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
padding:35px;
background-image:url('image_gallery_1/smiley.jpg');
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>

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.
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.
programs successfully developing to provide high quality education.</div>
</body>
</html>

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

CSS3 – Multiple Backgrounds
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%;
}
</style>
</head>
<body>
programs successfully developing to provide high quality education.<p>
</body>
</html>

CSS3 – Text Shadow
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
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
<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
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

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>

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.
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

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web Development Using CSS3 (20)

More from Anjan Mahanta (20)

Recently uploaded (20)

Web Development Using CSS3