Scribd
Upload
16 views

wdd unit 3

Uploaded by

varshini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

wdd unit 3

Uploaded by

varshini
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

III, I WEB DESIGN AND DEVELOPMENT – UNIT III

3.1 What is CSS?


 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files

Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files. External style sheets enable you
to change theappearance and layout of all the pages in a Web site, just by editing one
single file.

CSS Syntax
 A CSS rule has two main parts: a selector, and one or more declarations:

 The selector is normally the HTML element you want to style.


 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property has a value.

What is the difference between class and id?


The id Selector
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined with a "#".
 The style rule below will be applied to the element with id="para1":

#para1
{ text-align:center; color:red; }

R. SENTHIL BABU 1
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

The class Selector


 The class selector is used to specify a style for a group of elements. Unlike the id selector,
the classselector is most often used on several elements.
 This allows you to set a particular style for many HTML elements with the same class.
 The class selector uses the HTML class attribute, and is defined with a "."
 In the example below, all HTML elements with class="center" will be center-aligned:
.center {text-align:center;}
 We can use more than one class in a single element
<a class=”Center bold italic”>

3.2 Explain different ways to write the CSS. / Explain CSS with all types. / Enlist
and explain methods of using CSS in web page.
 There are three ways of inserting a style sheet:
o External style sheet
o Internal/Embedded style sheet
o Inline style
1. External Style Sheet
o When using CSS it is preferable to keep the CSS separate from your HTML.
o Placing CSS in a separate file allows the web designer to completely
differentiate betweencontent (HTML) and design (CSS).
o External CSS is a file that contains only CSS code and is saved with a ".css" file
extension.
o This CSS file is then referenced in your HTML using the <link> instead of <style>.

File Creation
o Open up notepad.exe, or any other plain text editor and type the following CSS code.
body{ background-color: gray;} p { color: blue; }h3{ color:
white; }
o Save the file as a CSS (.css) file.
o Name the file "test.css" (without the quotes). Now create a new HTML file and
fill it withthe following code.

<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font.
The background color of this page is gray because we changed it with CSS!
</p>
</body></html>

R. SENTHIL BABU 2
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

Why Use External CSS?


o It keeps your website design and content separate.
o It's much easier to reuse your CSS code if you have it in a separate file. Instead
of typing the same CSS code on every web page you have, simply have many
pages refer to a single CSS file with the "link" tag.
o You can make drastic changes to your web pages with just a few changes in a
single CSS file.

2. Internal/Embedded CSS
o This type of CSS is only for Single Page.
o When using internal CSS, we must add a new tag, <style>, inside the
<head> tag. TheHTML code below contains an example of <style>'s usage.
<html><head>
<style type="text/css"></style>
</head><body>
<p>Your page's content!</p></body>
</html>

Creating Internal CSS Code


o Below is an example of simple CSS code.
<html><head>
<style
type="text/css"> p
{color: white; }
body {background-color: black; }
</style></head><body>
<p>White text on a black background!</p></body>
</html>

3. Inline CSS
o It is possible to place CSS right in your HTML code, and this method of
CSS usage is referred to as inline css.
o Inline CSS has the highest priority out of external, internal, and inline CSS.
o This means that you can override styles that are defined in external or
internal by usinginline CSS.
o If you want to add a style inside an HTML element all you have to do is specify
the desiredCSS properties with the style HTML attribute.
<html><head>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<p style="background: blue; color: white;">A new background andfont
color with inline CSS</p></body>
</html>

R. SENTHIL BABU 3
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

3.3 Explain CSS Background with all its attributes


 CSS background properties are used to define the background effects of an element.
1. CSS Background Color
o The background-color property specifies the background color of an element.
o The background color of a page is defined in the body selector:
o Below is example of CSS backgrounds
body {background-color:#b0c4de;}
2. CSS Background Image
o The background-image property specifies an image to use as the
background of anelement.
body {background-image:url('paper.gif');}
3. Background Image Repeat
o You can have a background image repeat vertically (y-axis), horizontally (x-
axis), in bothdirections, or in neither direction.
p {background-image: url(smallPic.jpg); background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat:
repeat-y; }ol {background-image: url(smallPic.jpg); background-
repeat: repeat-x; }
ul {background-image: url(smallPic.jpg);background-repeat: no-repeat; }
4. CSS Fixed Background Image
o The background-attachment property sets whether a background image is
fixed or scrolls with the rest of the page.
textarea.noScroll { background-image: url(smallPic.jpg); background-
attachment: fixed;}textarea {
background-image:
url(smallPic.jpg);background-
attachment: scroll; }
5. CSS Background Image Positioning
o The background-position property sets the starting position of a background image.
p {background-image: url(smallPic.jpg); background-position:
20px 10px;} h4 {background-image: url(smallPic.jpg);
background-position: 30% 30%;} ol {background-image:
url(smallPic.jpg); background-position: top center;}

R. SENTHIL BABU 4
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

3.4 Explain CSS Font with all its attributes


 CSS font properties define the font family, boldness, size, and the style of a text.
1. CSS Font Color
o Set the text-color for different elements:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
2. CSS Font Family
o The font family of a text is set with the font-family property.

h4 { font-family: sans-serif; }h5 { font-family:


serif; }h6 { font-family: arial; }
3. CSS Font Size
o The font-size property sets the size of the text.
p { font-size: 120%; } ol{ font-size: 10px; } ul{ font-size: x-large; }
4. CSS Font Style
o The font-style property is mostly used to specify italic text.
o 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)
p { font-style: italic; }h4{ font-style: oblique; }
5. CSS Font Weight
o The font-weight property sets how thick or thin characters in text should be
displayed.
p { font-weight: 100; } ul{ font-weight: bolder; }
6. CSS Font Variant
o The font-variant property specifies whether or not a text should be displayed
in a small- caps font.

p { font-variant: small-caps; }}

3.5 Explain CSS Text with all its attributes.


 While CSS Font covers most of the traditional ways to format your text, CSS Text
allows you tocontrol the spacing, decoration, and alignment of your text.
1. Text Decoration
o The text-decoration property is used to set or remove decorations from text.
o The text-decoration property is mostly used to remove underlines from links
for designpurposes.

h4{ text-decoration: line-

R. SENTHIL BABU 5
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

through; }h5{ text-decoration:


overline; }
h6{ text-decoration:
underline; }a { text-
decoration: none; }

2. Text Indent
o The text-indentation property is used to specify the indentation of the first line of a
text.
p { text-indent: 20px; } h5 { text-indent: 30%; }

3. Text Align
o The text-align property is used to set the horizontal alignment of a text.
p { text-align: right;
} h5{ text-align:
justify; }

4. Text Transform
o The text-transform property is used to specify uppercase and lowercase letters in a
text.
p { text-transform: capitalize; } h5{ text-transform: uppercase; }

5. CSS White Space


o The white-space attribute allows you to prevent text from wrapping until
you place a break <br /> into your text.
p { white-space: nowrap; }

6. CSS Word Spacing


o With the CSS attribute word-spacing you are able to specify the exact value of
the spacingbetween your words. Word-spacing should be defined with exact
values.
p { word-spacing: 10px; }

7. CSS Letter Spacing


o With the CSS attribute letter-spacing you are able to specify the exact value of
the spacingbetween your letters. Letter-spacing should be defined with exact
values.
p { letter-spacing: 3px; }

3.6 Explain BOX MODEL.


 All HTML elements can be considered as boxes. In CSS, the term "box model" is used
when talkingabout 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.

R. SENTHIL BABU 6
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

 The box model allows us to place a border around elements and space elements in
relation to otherelements.
 The image below illustrates the box model:

 Explanation of the different parts:


o Margin - Clears an area around the border. The margin does not have a
background color, itis completely transparent
o Border - A border that goes around the padding and content. The border is
affected by thebackground color of the box
o Padding - Clears an area around the content. The padding is affected by the
backgroundcolor of the box
o Content - The content of the box, where text and images appear.

3.7 Explain CSS Padding.


o The CSS padding properties define the space between the element border and
the elementcontent.
 p {padding: 15px; border: 1px solid black;
o 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
puddings at once.
1. Possible Values
Valu Descriptio
e ns
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing
element.
padding-top:25px;
padding-
bottom:25px;
padding-right:50px;
padding-left:50px;

R. SENTHIL BABU 7
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

2. Padding - Shorthand property


o To shorten the code, it is possible to specify all the padding properties in one
property.This is called a shorthand property.
padding:25px 50px;
3.8 Explain CSS Margin.
o The CSS margin properties define the space around elements.
 p {margin: 5px; border: 1px solid black; }
o The top, right, bottom, and left margin can be changed independently using
separate properties. Ashorthand margin property can also be used, to change all
margins at once.

Value Descriptions
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is
0px
% Specifies a margin in percent of the width of the
containing element
inherit Specifies that the margin should be inherited from
the parent element

1. Margin - Individual sides


o In CSS, it is possible to specify different margins for different sides:
margin-top:100px;
margin-
bottom:100px;
margin-right:50px;
margin-left:50px;
2. Margin - Shorthand property
o To shorten the code, it is possible to specify all the margin properties in one
property. Thisis called a shorthand property.
margin:100px 50px;

3.9 Explain CSS Border with all its attributes.


 The CSS border properties allow you to specify the style and color of an element's border.
1. Border Style Types
o The border-style property specifies what kind of border to display.

p.solid {border-style: solid; } p.double {border-style: double; } p.groove {border-style:


groove; } p.dotted {border-style: dotted; } p.dashed {border-style: dashed; } p.inset
{border-style: inset; } p.outset {border-style: outset; } p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }

R. SENTHIL BABU 8
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

2. Border Width
o The border-width property is used to set the width of the border.

table { border-width: 7px; border-style:


outset; } td { border-width: medium; border-
style: outset; }p { border-width: thick;
border-style: solid; }

3. Border Color
o The border-color property is used to set the color of the border.
o Border colors can be any color defined by RGB, hexadecimal, or key terms.
Below is anexample of each of these types.

table { border-color: rgb( 100, 100, 255); border-style:


dashed; }td { border-color: #FFBD32; border-style:
ridge; }
p { border-color: blue; border-style: solid; }

4. Border: border-(direction)
o If you would like to place a border on only one side of an HTML element, or
maybe have a unique look for each side of the border, then use border-
(direction).
o The direction choices are of course: top, right, bottom, and left. CSS allows
you to treateach side of a border separately from the other three sides.
o Each side can have its own color, width, and style set, as shown below.
p { border-bottom-style: dashed ; border-bottom-color: yellow; border-bottom-
width: 5px; }h4 { border-top-style: double; border-top-color: purple; border-top-
width: thick; }

3.10 Explain CSS Lists with all its attributes.


 The CSS list properties allow you to:
o Set different list item markers for ordered lists
o Set different list item markers for unordered lists
o Set an image as the list item marker
1. CSS List Style Type
o Specify all the list properties in one declaration.
 Unordered list styles: square, circle, disc (default), and none
 Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-
roman, decimal (default), and none

ol { list-style-type: upper-
roman; }ul { list-style-type:
circle; }

R. SENTHIL BABU 9
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

2. CSS Lists with Images


o Specify an image as the list-item marker in a list:

ul { list-style-image:
url("listArrow.gif"); } ol { list-style-
image: url("listArrow2.gif"); }
3. CSS List Position
o With Specify that the the list-item markers should appear inside the content
flow (resultsin an extra indentation)

ul { list-style-position:
inside; } ol { list-style-
position: outside; }
 Note: "Outside" is actually the default setting for indentation.

3.11 Explain CSS Links


1. CSS Anchor/Link States
o 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 mouse over it
 a:active - a link the moment it is clicked
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 */
2. Text Decoration
o The text-decoration property is mostly used to remove underlines from links.
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-
decoration:underline;}a:active
{text-decoration:underline;}
3. Background Color
o The background-color property specifies the background color for links.
a:link {background-
color:#B2FF99;} a:visited
{background-color:#FFFF85;}
a:hover {background-
color:#FF704D;}a:active
{background-color:#FF704D;}

R. SENTHIL BABU 10
III, I WEB DESIGN AND DEVELOPMENT – UNIT III

3.12 Explain CSS Position with example.


 With the knowledge of CSS Positioning we will be able to manipulate the exact
position of yourHTML elements.
1. Position Relative
o Relative positioning changes the position of the HTML element relative to
where it normally appears.
o If we had a header that appears at the top of our page, we could use relative
positioningto move it a bit to the right and down a couple of pixels. Below is an
example.
h3 {position: relative; top: 15px;left:
150px;}p {position: relative; left: -
10px;}
2. Position Absolute
o With absolute positioning, you define the exact pixel value where the
specified HTML element will appear.
o The point of origin is the top-left of the browser's viewable area, so be
sure you are measuring from that point.
h3 {position: absolute; top: 50px;left:
45px;}p{position: absolute; top:
75px;left: 75px;}

3.13 Explain CSS Layers. / z-index property


 CSS allows you to control which item will appear on top with the use of layers.
 In CSS, each element is given a priority.
 If there are two overlapping CSS positioned elements, the element with the higher
priority willappear on top of the other.
 To manually define a priority, set the z-index value. The larger the value, the higher
the prioritythe element will have.
h4{position: relative; top: 30px;left: 50px; z-index: 2;}
p {position: relative; z-index: 1;background-color: #FFCCCC;}
 This paragraph has a z-index of 1, which is less than the header.
 If we had not defined the z-index, by default the paragraph would have been on top of
the headerbecause it appears later in our HTML code.

3.14 Explain CSS Float property.


 With CSS float, an element can be pushed to the left or right, allowing other
elements to wrap around it.
 Wrapping text around an image is easy when using the CSS Float attribute.
 You have a choice to either float the picture to the left or to the right and the rest is done
for you.

img.floatLeft { float: left; margin:


4px;} img.floatRight { float: right;
margin: 4px;}

R. SENTHIL BABU 11
III-I, Web Design & Development- UNIT_I

<body>
<img src="sunset.gif" class="floatLeft"><p>The images are contained with...</p>
<img src="sunset.gif" class="floatRight"><p>This second paragraph has an...</p>
</body>

Introduction to CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of CSS.
 CSS3 has been split into "modules". It contains the "old CSS specification" (which has been
split into smaller pieces). In addition, new modules are added.
 CSS3 Transitions are a presentational effect which allow property changes in CSS values,
such as those that may be defined to occur on :hover or :focus, to occur smoothly over a
specified duration – rather than happening instantaneously as is the normal behaviour.
 Transition effects can be applied to a wide variety of CSS properties, including background-
color, width, height, opacity, and many more.
 Some of the most important CSS3 modules are:
o Selectors
o Box Model
o Backgrounds and Borders
o Image Values and Replaced Content
o Text Effects
o 2D/3D Transformations
o Animations
o Multiple Column Layout
o User Interface

R. SENTHIL BABU 12

You might also like