Scribd
Upload
6 views

MODULE 2 Part 1 CSS

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

MODULE 2 Part 1 CSS

Uploaded by

Abhishek V
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 100

MODULE 2

CSS (Cascading Style Sheets)


• CSS stands for Cascading Style Sheets
• CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements should be displayed.
CSS Syntax
• A CSS rule 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 CSS property name and
a value, separated by a colon.
• Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded
by curly braces.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: times new roman;
font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>


<p>This is a paragraph.</p>

</body>
</html>
• In above example,
• p is a selector in CSS (it points to the HTML element you want to
style: <p>).
• font-family is a property, and times new roman is the property
value
• font-size is a property, and 20px is the property value
LEVELS OF STYLE SHEETS
• The three levels of style sheets, in order from lowest level to highest
level, are inline, document level, and external.
• Inline style sheets apply to the content of a single XHTML element.
• Document-level style sheets(internal ) apply to the whole body of a
document.
• External style sheets can apply to the bodies of any number of
documents.
Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
Example: inline.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<body>

<h1 style="color:blue;"><center>Web Programming</center></h1>

<p style="color:red;"><center>Java Programming</center></p>

</body>
</html>
Document-level style sheets or Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page,
within a <style> element.
Example: internal.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {background-color: blue;}
h1 {color: yellow;}
p {color: red;}
</style>
</head>
<body>
<h1>welcome</h1>
<p>hi</p>
<h1>Web Programming</h1>
<p>Bangalore</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each
HTML page:
• The external style sheet can be written in any text editor.
• The file must not contain any HTML code, and must be saved with a .css
extension.
• It uses the <link> tag on every pages and the <link> tag should be put inside
the head section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<h1><center>BANGALORE</center></h1>
<p><b><center>HYDERABAD</center></b></p>
</body>
</html>
Syntax:
• <link rel="stylesheet" type="text/css" href="style.css" />
Example: external.xhtml
• The REL attribute is used to define the relationship between the linked file
and the HTML document. REL=StyleSheet specifies
a persistent or preferred style.A persistent style is one that is always applied
when style sheets are enabled.
• (Hypertext REFerence) The HTML code used to create a link to another
page
CSS Selectors
• CSS selectors are used to select the content you want to style.
• Selectors are the part of CSS rule set.
• CSS selectors select HTML elements according to its id, class, type,
attribute etc.
• There are several different types of selectors in CSS.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
The CSS element Selector
• The element selector selects HTML elements based on the element name.
Example: element.xhtml
• Here, all <p> elements on the page will be center-aligned, with a red text
color:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>


<p >Me too!</p>
<p>And me!</p>

</body>
</html>
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is unique within a page, so the id selector is used to
select one unique element.
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
Example: id.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
</body>
</html>
The CSS class Selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
Example: class.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.mca {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="mca">MANGALORE</h1>
<p class="mca">BANGALORE</p>
</body>
</html>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• Example: universal.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>WELCOME</p>
<p >MCA</p>
<p>DEPARTMENT</p>
</body>
</html>
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style
definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):
Example: group.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 { text-align: center; color: red; }
h2 {text-align: center; color: green; }
p {text-align: center; color: blue; }
</style>
</head>
<body>
<h1>Hello </h1>
<h2>HI</h2>
<p>WELCOME</p>
</body>
</html>
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• Example:group1.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1, h2, p {text-align: center; color: red; }
</style>
</head>
<body>
<h1>Hello</h1>
<h2>HI</h2>
<p>WELCOME</p>
</body>
</html>
• CSS Font Properties

• CSS Font property is used to control the look of texts.


• By the use of CSS font property you can change the text size, color, style and
more.
• Here, you will also know how to resize your font using percentage.
Font attributes:
• CSS Font color: This property is used to change the color of the text.
(standalone attribute)
• CSS Font family: This property is used to change the face of the font

• CSS Font size: This property is used to increase or decrease the size of the
font.
• CSS Font style: This property is used to make the font bold, italic or oblique

• CSS Font variant: This property creates a small-caps effect.

• CSS Font weight: This property is used to increase or decrease the boldness
and lightness of the font.
CSS Font Color
• CSS font color is a standalone attribute in CSS
• It is used to change the color of the text.
• There are three different formats to define a color:
By a color name
By hexadecimal value
By RGB
Example: font.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {
font-size: 200%;
}
h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Font Family
In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.

• Sans-serif fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.

• Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.

• Cursive fonts imitate human handwriting.

• Fantasy fonts are decorative/playful fonts.


• Example: fontfamily.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { font-size: 100%; }
h1 { font-family: sans-serif; } h2 { font-family: serif; } p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
CSS Font Size
• CSS font size property is used to change the size of the font.
(fontsize.xhtml)
Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Practice CSS font-size property</title>
</head> <body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>
CSS Font Style
• CSS Font style property defines what type of font you want to display.
• It may be italic, oblique, or normal.
Example: fontstyle.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body { font-size: 100%; }
h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; }
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>
CSS Font Variant
• CSS font variant property specifies how to set font variant of an element.
• It may be normal and small-caps.
Example: fontvariant.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p { font-variant: small-caps; } h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>
CSS Font Weight
• CSS font weight property defines the weight of the font and specify that
how bold a font is.
• The possible values of font weight may be normal, bold, bolder, lighter or
number (100, 200..... upto 900).
Example: weight.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>
Font Shorthands: (short.xhtml)

• To shorten the code, it is also possible to specify all the individual font
properties in one property.

• The font property is a shorthand property for:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Font Properties</title>
<style type = "text/css">
.one {font-family: 'lucida calligraphy'; font-weight:bold; font-size:30pt; color: purple; }
.two { font-family: 'Arial'; color: green; }
.three { font:'times new roman'; }
</style>
</head>
<body>
<p class = "one">MASTER OF COMPUTER APPLICATIONS</p>
<h1 class = "two">MASTER OF COMPUTER APPLICATIONS</h1>
<p class = "three">MASTER OF COMPUTER APPLICATIONS</p>
</body>
</html>
Pseudo Classes:
• Pseudo class selectors are used if the properties are to be changed
dynamically.
• For example: when mouse movement happens, in other words, hover
happens or focus happens.

Example:pseudo.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample CSS</title>
<style type = "text/css">

input:hover
{ font-family: 'Gabriola'; color: red; font-size:100; }
</style>

</head>
<body>
<form>
NAME: <input type = "text" />
</form>
</body>
</html>
LIST PROPERTIES
In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

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
• Add background colors to lists and list items
Different List Item Markers
• The list-style-type property specifies the type of list item marker.
• Example: list.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Bullets</title>
<style>
.one {list-style-type:disc }
.two{ list-style-type:square}
.three{ list-style-type:circle }
</style>
</head>
<body>
<h3>MCA SUBJECTS</h3>
<ul>
<li class ="one"> Web Programming</li>
<li class ="two"> Java Programming</li>
<li class ="three"> DBMS</li>
</ul>
</body>
</html>
Color Property
• In CSS, we use color values for specifying the color.
• We can also use this property for the border-color and other decorative
effects.
• Set the text-color for different elements

CSS Syntax
color: color|initial|inherit;
Property Values
Value Description
color Specifies the text color.
initial Sets this property to its default value. inherit
Inherits this property from its parent element.
We can define the color of an element by using the following ways:

• RGB format.(RED GREEN and BLUE)


example: body {color: rgb(201, 76, 76);}

• RGBA format.(RED GREEN BLUE Alpha)


example: body {color: rgba(201, 76, 76, 0.6);}

• Hexadecimal notation.
example: body {color: #92a8d1;}
• HSL(Hue, Saturation, and Lightness).
example: body {color: hsl(89, 43%, 51%);}

• HSLA(Hue, Saturation, Lightness and Alpha).


example: body {color: hsla(89, 43%, 51%, 0.6);}

Example: color.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body
{color: red;}
h1 {color: #00ff00;}
.ex {color: rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p><pre>hello.</pre></p>
<p class="ex">welcome.</p>
</body>
</html>
Text Property
• CSS has a lot of properties for formatting text.
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Shadow
Text Spacing
Text Color
• The color property is used to set the color of the text.
Example: textcolor.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body {color: blue;}
h1 {color: green;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>HI</p>
</body>
</html>
Text Alignment
• The text-align property is used to set the horizontal alignment of a text.
• A text can be left or right aligned, centered, or justified.
Example: textalign.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
</style>
</head>
<body>
<h1>MSc</h1>
<h2>MCA </h2>
<h3>MBA</h3>
</body>
</html>
Text Decoration:
• The text-decoration property is used to specify some special features of
text.
• The available values are line-through, overline, underline, and none,
which is the default.
Example :decoration.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Text Decoration</title>
<style >
.one{ text-decoration: line-through;}
.two{ text-decoration: overline; }
.three{text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">MCA</h1> <br/>
<h1 class = "two">MCA</h1> <br/>
<h1 class = "three">MCA</h1><br/>
</body>
</html>
Text Transformation
• 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
Example :trans.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.uppercase { text-transform: uppercase; }
.lowercase{ text-transform: lowercase; }
.capitalize { text-transform: capitalize;}
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">hi</p>
<p class="lowercase">HELLO</p>
<p class="capitalize">welocome to mca</p>
</body>
</html>
Text Shadow
• The text-shadow property adds shadow to text.
• In its simplest use, you only specify the horizontal shadow (2px) and the
vertical shadow (2px).

Example: shadow.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
Text Spacing
the following are text spacing properties:
• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space
Text Indentation
The text-indent property is used to specify the indentation of the first
line of a text:
Example: (indent.xhtml)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p {text-indent: 150px; }
</style>
</head>
<body>
<h1>Using text-indent</h1>
<p><pre>In my younger and more vulnerable years my father gave me some advice that I've been turning
over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages
that you've had.'</pre></p>
</body>
</html>
Letter-spacing
The letter-spacing property is used to specify the space between the
characters in a text.
The following example demonstrates how to increase or decrease the space
between characters:
Example: letter.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
h2 {letter-spacing: 25px;}
h3 {letter-spacing: 20px;}
</style>
</head>
<body>
<h1>Using letter-spacing</h1>
<h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>
Line Height
• The line-height property is used to specify the space
between lines:
Example: line.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.small{line-height: 3;}
.big {line-height: 1.8;}
</style>
</head>
<body>
<p class="small"><pre>
This is a paragraph with a smaller line-height.
This is a paragraph with a smaller line-height.</pre>
</p>
<p class="big"><pre>
This is a paragraph with a bigger line-height.
This is a paragraph with a bigger line-height.</pre>
</p>
</body>
</html>
word-spacing
• The word-spacing property is used to specify the space between the
words in a text.
• The following example demonstrates how to increase or decrease the
space between words:
Example: wordspace.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.one{word-spacing: 10px;}
.two { word-spacing: 23px;}
</style>
</head>
<body>
<p class="one">This is a paragraph with larger word spacing.</p>
<p class="two">This is a paragraph with smaller word spacing.</p>

</body>
</html>
white-space
• The white-space property specifies how white-space inside an element is
handled.
• This example demonstrates how to disable text wrapping inside an element.
• The following example demonstrates how white space inside an element is
handled. Possible values are normal, pre.

Example:white.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>

<body>
<p style = "white-space:normal">
This text has a line break and the white-space pre setting
tells the browser to honor it just like the XHTML pre tag.
</p>
</body>
</html>
The CSS Box Model
• Each element in an HTML document is treated as a rectangular box by
CSS.
• This is the default layout scheme and can be customized as per our
requirements.
• The positioning of elements, their content, and their surrounding
elements are done following the box model of CSS.
• Content
This includes the actual data in the form of text, image or other media
content.
The width and height properties modify the dimensions of this box.

• Padding
The space between the outer edge of the content and its border refers to
padding.
This box can be resized by the padding property.
Edge-specific properties like padding-left, padding-bottom, etc. help in
achieving custom spacing.
• Border
The distance between the outer edge of the padding and the inner edge of
the margin defines the border of an element.
By default, its width is set to 0.
The border property is used to define an element’s border.
Individual edges can also be styled.

• Margin
The space between an element’s box and its surrounding elements’ box is
defined as margin.

Example:boxmodel.html
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey; width: 300px; border: 15px solid green; padding: 50px;margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>hi</p>
<div>welcome</div>
</body>
</html>
CSS Borders
• The CSS border properties allow you to specify the style, width, and color
of an element's border.
• The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
example:boder.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
</body>
</html>
CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:
• example:borderwidth.xhtml
<!DOCTYPE html>
<html>
<head>
<style>
p.one { border-style: solid; border-width: 5px; }
p.two { border-style: solid; border-width: medium; }
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
</body>
</html>
• CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:

name - specify a color name,


HEX - specify a HEX value
RGB - specify a RGB value
HSL - specify a HSL value
<!DOCTYPE html>
<html>
<head>
<style>
p.one {border-style: solid; border-color: red }
</style>
</head>
<body>
<p class="one">A solid red border</p>
</body>
</html>
Margins and Padding:
• The margin properties are named margin, which applies to all four sides of
an element: margin-left, margin-right, margin-top, and margin-bottom.
• example: margin.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style>
div {
border: 1px solid black; margin-top: 100px; margin-bottom: 100px;
margin-right: 150px; margin-left: 80px; background-color: lightblue;
}
</style>
</head>
<body>
<div>welcome.</div>
</body>
</html>
• CSS Padding
• Padding is used to create space around an element's content, inside of
any defined borders.
• Padding - Individual Sides
padding-top
padding-right
padding-bottom
padding-left
• All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
example: padding.xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {
border: 1px solid black; padding-top: 50px; padding-right: 30px;
padding-bottom: 50px; padding-left: 80px;
}
</style>
</head>
<body>
<div>welcome </div>
</body>
</html>
CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
CSS background-color
The background-color property specifies the background color of an
element.
Example
body { background-color: lightblue; }

Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
It can take a value from 0.0 - 1.0.
The lower value, the more transparent:
Example
div { background-color: green; opacity: 0.3;}
CSS background-image
The background-image property specifies an image to use as the
background of an element.
THE <span> AND <div> TAGS
span tag
• A <span> element which is used to color a part of a text
• The <span> tag is an inline container used to mark up a part of a text, or a
part of a document.
• The <span> tag is easily styled by CSS or manipulated with JavaScript using
the class or id attribute.
• The <span> tag is much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
Example:

<!DOCTYPE html>
<html>
<body>
<p>hi <span style="color:blue;">hello</span></p>
</body>
</html>
div tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
Example: divtag.xhtml

You might also like