Unit 2 Internet and web technology CSS report

Unit-3
CSS(Cascading Style Sheets)
& Java Script

● Need for CSS,Introduction to CSS, basic syntax and structure, using
CSS, background images, colors and properties,manipulating texts,
Using fonts,
● borders and boxes, Margins, padding lists,positioning using CSS,
CSS2 Overview and features of CSS3
● ,JavaScript : Client side scripting with JavaScript, variables, functions,
conditions,
● oops and repetition,Pop up boxes, Advance JavaScript: Javascript
and objects, JavaScript own objects,
● the DOM and web browser environments, Manipulation using DOM,
forms and validations,

What is CSS?
•Stands for Cascading Style Sheets
•Responsible for styling the look of your website
•Remember your HTML document?
•Remember how plain it looked?
•You can use CSS to add color and stuff!

Style sheets
•Cascading Style Sheets (CSS) is used to format the
layout of a webpage.
•With CSS, We can control the color, font, the size of
text, the spacing between elements, how elements
are positioned and laid out, what background
images or background colors are to be used,
different displays for different devices and screen
sizes, and much more!

Development of CSS
•The World Wide Web Consortium (W3C)
developed CSS in 1996. The first commercial
browser to read and use CSS was Microsoft's
Internet Explorer 3 in 1998.

CSS
•The word cascading means that a style applied
to a parent element will also apply to all children
elements within the parent. So, if you set the
color of the body text to "blue", all headings,
paragraphs, and other text elements within the
body will also get the same color (unless you
specify something else)!

Need for CSS
Cascading Style Sheets (CSS) is a design
language that's essential for web design and
development because it allows you to:
Add style and color
CSS lets you specify fonts, colors, sizes, and
spacing for content. You can also use it to add
animations and other decorative features.

Need for CSS
•Improve user experience
CSS can make web pages more visually appealing
and easier to navigate. For example, you can use
CSS to organize buttons and text in logical places.
•Create responsive designs
CSS allows you to create websites that adjust to
different screen sizes, making them accessible on
various devices.

Need for CSS
•Save time and effort
CSS lets you apply the same formatting rules and
styles to multiple pages with one string of
code. This makes it easier to maintain and update
your designs.
•Use less code
CSS enables you to use less code overall.

Basic Syntax & Structure
FORMAT:
selector {
property: value;
}
•selector: what you want styled (e.g. body)
•property: what you want changed (e.g. background)
•value: the new value of that property (e.g. green)
So you have the thing you want to style followed by a list of
properties and the value for that property. This list must be
between 2 curly braces

Example
body {
background: green;
}

Unit 2 Internet and web technology CSS report

Ways to insert CSS
•There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style

Inline style sheet
• To use inline styles, We use the style attribute in the relevant tag. The
style attribute can contain any CSS property. The example shows how
to change the color and the left margin of a paragraph:
• This is a paragraph.

Internal style sheet
An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head section
of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color:Orange;}
P {margin-left:20px;}
Body {background-image:url("images/back1.gif");}
</style>
</head>

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:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

External style sheet
• An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css extension.
An example of a style sheet file is shown below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Notes : Do not leave spaces between the property value and the units!
"margin-left:20 px" (instead of "margin- left:20px") will work in IE, but not in
Firefox or Opera.

Creating a CSS file
•In Notepad, create a new text document called “styles”and
save it with a .css extension
•Go to your main .html file and add this line inside the
<head> … </head> tags, after the <title>…</title>:
•<link rel="stylesheet" type= “text/css” href="styles.css">

Question
How would I turn the background of all
paragraphs red?

CSS in HTML docs
•CSS styles elements of HTML.
•For example, to turn all paragraphs’ text green, do:
p {
color : green;
}
Note: selectors are generally an HTML element without
“<“and “>”.So “”becomes “p”, and “<body>” becomes
“body”, and “<blockquote>” becomes “blockquote”

Practice!
•So how do you think you would implement
it to make all your text blue?
I’ll give you a hint, the element you’ll want to
style is <body>

The answer:
body {
color : blue;
}

More CSS Syntax
• You can put in instructions for multiple elements by simply adding another block
of code for the second element under the first
h1{
color: green;
background-color: yellow;
}
h2{
color: green;
}
•You can style more than 2 elements and add more than 2 attributes -you can have
as many or as few as you want!

Combining Elements
•If you have multiple elements that share the same
styles, the you can combine them
•For example remember how h1 and h2 have the
same styles?
h2, h1{
color: green;
}

Background Images
•The background-image property specifies an
image to use as the background of an element.
By default, the image is repeated so it covers
the entire element. The background image for a
page can be set like this:
body { background-image: url ('paper.gif’); }

Background Images
<head>
<Title>This is my Internal css page</Title>
body
{
background-image:url ("C:/Users/Desktop/Car_picture.jpg");
}
</style>
</head>

The output of the above example
is

Background Images Properties
You can set the following background properties of an element:
• The background-image property is used to set the background
image of an element.
• The background-repeat property is used to control the
repetition of an image in the background.
• The background-position property is used to control the
position of an image in the background.

Repeat the Background Image
• You can use no-repeat value for the background-repeat property if you
don't want to repeat an image. In this case, the image will display only
once. By default, the background-repeat property will have a repeat
value.
body
{
background-repeat: repeat;
}
</style>

Repeat The Background Image Vertically.
• The following example which demonstrates how to repeat the
background image vertically.
body
{
background-repeat: repeat-y;
}
</style>

Repeat The Background Image Horizontally.
• The following example which demonstrates how to repeat the
background image horizontally.
body
{
background-repeat: repeat-x;
}
</style>

Set the Background Image Position
• The following example demonstrates how to set the background
image position 100 pixels away from the left side.
body
{
background-position:100px;
}
</style>

Colors And Properties
• The background-color property specifies the background color of an
element.
body {background-color:#b0c4de;}

This text has a yellow background color.

Colors And Properties
•With CSS, a color is most often specified by:
1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"

CSS Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two
digits (RR) represent a red value, the next two are a green value (GG),
and the last are the blue value (BB). Each hexadecimal code will be
preceded by a pound or hash sign ‘#’. Following are the examples to use
Hexadecimal notation.
• CSS Colors - Short Hex Codes
This is a shorter form of the six-digit notation. In this format, each
digit is replicated to arrive at an equivalent six-digit value. For example:
#6A7 becomes #66AA77.

CSS Colors - RGB Values
• This color value is specified using the rgb( ) property. This property
takes three values, one each for red, green, and blue. The value can
be an integer between 0 and 255 or a percentage.
• NOTE: All the browsers does not support rgb() property of color, so it
is recommended not to use it.

Manipulating Texts
• CSS is a language that describes the style of an HTML document.
You can set the following text properties of an element:
• The color property is used to set the color of a text.
• The direction property is used to set the text direction.
• The letter-spacing property is used to add or subtract space
between the letters that make up a word.
• The word-spacing property is used to add or subtract space
between the words of a sentence.
• The text-indent property is used to indent the text of a
paragraph.

Manipulating Texts
• The text-align property is used to align the text of a
document.
• The text-decoration property is used to underline, overline,
and strikethrough text.
• The text-transform property is used to capitalize text or
convert text to uppercase or lowercase letters.
• The white-space property is used to control the flow and
formatting of text.
• The text-shadow property is used to set the text shadow
around a text.

1. Set the Text Color
• The following example demonstrates how to set the text
color. Possible value could be any color name in any
valid format.
• This text will be written in red.

2 Set the Text Direction
• The following example demonstrates how to set the
direction of a text. Possible values are ltr or rtl.
• This text will be rendered
from right to left

3. Set the Space between Characters
space between characters. Possible values are
normal or a number specifying space.
• This text is having
space between letters.

4 Set the Space between Words
space between words. Possible values are normal or
a number specifying space.
This text is having space
between words.

5 Set the Text Indent
• The following example demonstrates how to indent the
first line of a paragraph. Possible values are % or a number
specifying indent space.

This text will have first line indented by 1cm and this line will
remain at its actual position this is done by CSS text-indent
property.

6 Set the Text Alignment
• The following example demonstrates how to align a text.
Possible values are left, right, center, justify.
 This will be right aligned. 
 This will be center aligned. 
 This will be left aligned.

7 Decorating the Text
• The following example demonstrates how to decorate a text.
Possible values are none, underline, overline, line-through, blink.
 This will be underlined 
 This will be striked
through. 
 This will have a over line.

This text will have blinking effect

8 Set the Text Cases
• The following example demonstrates how to set the cases for
a text. Possible values are none, capitalize, uppercase,
lowercase.
 This will be capitalized

 This will be in
uppercase 
 This will be in lowercase

Using fonts
A font is the combination of typeface and other qualities,
such as size, pitch, and spacing. For example, Times Roman
is a typeface that defines the shape of each character.
Within Times Roman, however, there are many fonts to
choose from -- different sizes, italic, bold, and so on. You
can set the following font properties of an element:

Font Management using CSS
• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic or oblique.
• The font-variant property is used to create a small-caps effect.
• The font-weight property is used to increase or decrease how bold
or light a font appears.
• The font-size property is used to increase or decrease the size of a
font.
• The font property is used as shorthand to specify a number of other
font properties.

1 Set the Font Family
• Following is the example, which demonstrates how to
set the font family of an element. Possible value could
be any font family name.

This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at
your system.

2 Set the Font Style
• The following example demonstrates how to
set the font style of an element. Possible
values are normal, italic and oblique.
This text will be
rendered in italic style

3 Set the Font Variant
• The following example demonstrates how to
set the font variant of an element. Possible
values are normal and small-caps.
 This text will
be rendered as small caps

4 Set the Font Weight
• The following example demonstrates how to set the font weight of
an element. The font-weight property provides the functionality to
specify how bold a font is. Possible values could be normal, bold,
bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
 This font is bold. 
 This font is bolder. 
 This font is 900 weight.

5 Set the Font Size
• The following example demonstrates how to set the font size
of an element. The font-size property is used to control the
size of fonts. Possible values could be xx-small, x-small, small,
medium, large, x-large, xx-large, smaller, larger, size in pixels
or in %.
 This font size is 20 pixels 
 This font size is small 
 This font size is large

6 Set the Font Size Adjust
• The following example demonstrates how to set the font
size adjust of an element. This property enables you to
adjust the x-height to make fonts more legible. Possible
value could be any number.
This text is using a font-
size-adjust value.

7 Set the Font Stretch
• The following example demonstrates how to set the font stretch of
an element. This property relies on the user's computer to have an
expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed,
extra-condensed, condensed, semi-condensed, semi-expanded,
expanded, extra-expanded, ultra-expanded.

If this doesn't appear to work, it is likely that your computer doesn't
have a condensed or expanded version of the font being used.

Borders and Boxes
• The border properties allow you to specify how the
border of the box representing an element should look.
There are three properties of a border you can change:
• The border-color specifies the color of a border.
• The border-style specifies whether a border should be
solid, dashed line, double line, or one of the other
possible values.
• The border-width specifies the width of a border.

1 The border-color Property
• The border-color property allows you to change the color
of the border surrounding an element. You can individually
change the color of the bottom, left, top and right sides of
an element's border using the properties:
• Border-bottom-color changes the color of bottom border.
• Border-top-color changes the color of top border.
• Border-left-color changes the color of left border.
• Border-right-color changes the color of right border

2 The border-style Property
• The border-style property allows you to select one
of the following styles of border:
• none: No border. (Equivalent of border-width:0;)
• solid: Border is a single solid line.
• dotted: Border is a series of dots.
• dashed: Border is a series of short lines.
• double: Border is two solid lines.

• groove: Border looks as though it is carved into the page.
• ridge: Border looks the opposite of groove.
• inset: Border makes the box look like it is embedded in the page.
• outset: Border makes the box look like it is coming out of the canvas.
• hidden: Same as none, except in terms of border-conflict resolution for table
elements.
• You can individually change the style of the bottom, left, top, and right borders
of an element using the following properties:
• border-bottom-style changes the style of bottom border.
• border-top-style changes the style of top border.
• border-left-style changes the style of left border.
• border-right-style changes the style of right border.

Border Properties Using Shorthand
• The border property allows you to specify color, style,
and width of lines in one property:
The following example shows how to use all the three properties into a
single property. This is the most frequently used property to set border
around any element.
This example is showing
shorthand property for border.

Margins
The margin property defines the space around an HTML element.
The margin property are not inherited by the child elements.
• We have the following properties to set an element margin.
• The margin specifies a shorthand property for setting the margin
properties in one declaration.
• The margin-bottom specifies the bottom margin of an element.
• The margin-top specifies the top margin of an element.
• The margin-left specifies the left margin of an element.
• The margin-right specifies the right margin of an element.

The Margin Property
• The margin property allows you to set all of the properties for the four margins
in one declaration. Here is the syntax to set margin around a paragraph:

Padding
The padding property allows you to specify how much space should
appear between the content of an element and its border:
• The padding-bottom specifies the bottom padding of an element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties.

The padding bottom Property
• The padding-bottom property sets the bottom padding (space) of
an element. This can take a value in terms of length of %.
 This is a
paragraph with a specified bottom padding

This is another paragraph with a specified bottom padding in
percent

It will produce the following result:

• The padding-top Property


• The padding-left Property


• The padding-right Property

The Padding Property
• The padding property sets the left, right, top and bottom padding
(space) of an element. This can take a value in terms of length of %.

Positioning Using CSS
CSS helps you to position your HTML element. You can
put any HTML element at whatever location you like.
You can specify whether you want the element
positioned relative to its natural position in the page
or absolute based on its parent element.

Relative Positioning
• Relative positioning changes the position of the HTML element
relative to where it normally appears. So "left:20" adds 20 pixels
to the element's LEFT position.
• You can use two values top and left along with the position
property to move an HTML element anywhere in an HTML
document.
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

Relative Positioning
NOTE: You can use the bottom or right values as well in the same way as
top and left.
EX:-

Absolute Positioning
• An element with position: absolute is positioned at the
specified coordinates relative to your screen top-left corner.
• You can use two values top and left along with the position
property to move an HTML element anywhere in HTML
document.
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.

Absolute Positioning
NOTE: You can use bottom or right values as well in the same way as top
and left.

Fixed Positioning
• Fixed positioning allows you to fix the position of an element to a
particular spot on the page, regardless of scrolling. Specified
coordinates will be relative to the browser window.
• You can use two values top and left along with the position property
to move an HTML element anywhere in the HTML document.
•  Move Left - Use a negative value for left.
•  Move Right - Use a positive value for left.
•  Move Up - Use a negative value for top.
•  Move Down - Use a positive value for top.

Fixed Positioning
• NOTE: You can use bottom or right values as well in the same
way as top and left.

CSS2
Cascading Style Sheets, level 2 (CSS2) is a style
sheet language that allows users and authors to
add style to structured documents, such as HTML
documents and XML applications:

Unit 2 Internet and web technology CSS report

More Related Content

Similar to Unit 2 Internet and web technology CSS report (20)

Recently uploaded (20)

Unit 2 Internet and web technology CSS report