Unit -3
Style sheets : 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, loops 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,DHTML : Combining HTML, CSS and Javascript,
Events and button
What is CSS?
Cascading Style Sheets, formly referred to as
CSS, is a simple design language intended to
simplify the process of making web pages
presentable.
CSS defines layout of HTML documents.
For example, CSS covers Fonts, colors, margins,
lines, height, width, background images,
advanced positions and many other things.
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 the
appearance and layout of all the pages in a Web site, just
by editing one single file.
Advantages :
Improves Website Presentation
External CSS makes Updates Easier and
Smoother
External CSS helps Web Pages Load Faster
Disadvantages :
Browser Dependent.
Difficult to retrofit in old websites.
A CSS rule has two main parts: a selector, and
one or more declarations
The selector can be HTML element, id or
class.
Each declaration consists of a property
and a value.
The property is the style attribute you
want to change. Each property has a
value.
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.
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 "#“ in css.
The style rule below will be applied to the
element with id="para1":
The “class” selector
The class selector is used to specify a style for
a group of elements.
The class selector uses the HTML class
attribute, and is defined with a ".“ in css.
Types of CSS
There are three ways of writing a style sheet:
Inline Style
Internal/Embedded Style sheet
External Style Sheet
Inline Style
It is possible to place CSS right in your HTML code, and this
method of CSS usage is referred to as inline css.
Inline CSS has the highest priority out of external, internal, and
inline CSS.
This means that you can override styles that are defined in
external or internal by using inline CSS.
If you want to add a style inside an HTML element all you have to
do is specify the desired CSS properties with the style HTML
attribute.
Internal CSS:
This type of CSS is only for Single Web Page.
When using internal CSS, we must add a new tag,
<style>, inside the <head> tag.
External CSS:
When using CSS it is preferable to keep the CSS separate from
your HTML.
Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
External CSS is a file that contains only CSS code and is saved
with a ".css" file extension.
This CSS file is then referenced in your HTML using the <link>
instead of <style>.
Assign Multiple Classes
Syntax
To assign multiple classes to an element, separate each class
with a space within the element’s class attribute.
<p class = "firstclass secondclass thirdclass"> Some text... </
p>
Multiple Selection: We can apply same css to multiple
selectors using comma separated selector list, for example
Multi-Level Section
We can use hierarchical path to target html element by space separated
element/class/id/names, for example
Background Property:
Background Color. (background-color)
Background Image. (background-image)
Background Image Repeat. (background-repeat)
Fixed Background Image. (background-
attachment)
Background Image Positioning. (background-
position)
CSS background - Shorthand property
To shorten the code, it is also possible to specify all the
background properties in one single property. This is called a
shorthand property.
Instead of writing:
body {
background-color: red;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background Color:
The background-color property specifies the background
color of an element.
Css background Image
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(“picture.jpeg");
}
CSS background-repeat: no-repeat
Showing the background image only once is also
specified by the background-repeat property:
Example
Show the background image only once:
body {
background-image: url(“tree.jpeg");
background-repeat: no-repeat;
}
CSS background-position
The background-position property is used to specify
the position of the background image.
Example
Position the background image in the top-right corner:
body {
background-image: url("tree.jpeg");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment Property
The background-attachment property sets whether a
background image scrolls with the rest of the page, or is
fixed.
Example
A background-image that will not scroll with the page
(fixed):
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
CSS Syntax
background-attachment: scroll|fixed|local|initial|inherit;
Value Description Property Values
scroll The background image will scroll with the page. This is
default
fixed The background image will not scroll with the page
local The background image will scroll with the element's
contents
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
CSS FONT PROPERTY
CSS font properties define the font family, boldness, size and
style of a text
property Name
1. Font Color (color)
2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
Font Color
Set the text color for different elements.
color: color;
Font Family:
The font-family property specifies the font for an element.
The font-family property can hold several font names as a
"fallback" system. If the browser does not support the first font,
it tries the next font.
There are two types of font family names:
family-name - The name of a font-family, like "times",
"courier", "arial", etc.
generic-family - The name of a generic-family, like "serif",
"sans-serif", "cursive", "fantasy", "monospace".
Font-Size:
The font-size property sets the size of a font/text.
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|
smaller|larger|
Font-Style: The font-style property specifies the font style for a
text
font-style: normal|italic|oblique.
Font-weight:
The font-weight property sets how thick or thin characters in
text should be displayed.
font-weight: normal|bold|bolder|lighter|number.
Font-variant:
The font-variant property specifies whether or not a
text should be displayed in a small-caps font.
font-variant: normal|small-caps.
CSS Text Property
Text Color
The color property is used to set the color of the text.
body {
color: blue;
}
h1 {
color: green;
}
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.
Text Decoration
The text-decoration property is used to set or remove
decorations from text.
The value text-decoration: none; is often used to remove
underlines from links:
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:
CSS Text Spacing
Text Indentation
The text-indent property is used to specify the indentation of
the first line of a text:
p {
text-indent: 50px;
}
Letter Spacing
The letter-spacing property is used to specify the space between the characters
in a text.
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
White Space: The white-space property specifies how white-space inside an
element is handled.
p{
white-space: nowrap;
}
Word Spacing
The word-spacing property is used to specify the space between
the words in a text.
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
The line-height property is used to specify the space between
lines
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8
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 every HTML element & 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
The image below illustrates the box model:
Content - The content of the box, where text and images
appear.
Padding - Clears an area around the content. The padding
is transparent.
Border - A border that goes around the padding and
content.
Margin - Clears an area outside the border. The margin is
transparent
CSS Padding
The CSS padding properties define the space
between element border & the element content.
The top,right,bottom,& left padding can be
changed independently using separate properties.
A shorthand padding property can also be used, to
change all padding at once.
CSS Border
The CSS border properties allow you to specify the style, width,
and color of an element's border.
CSS Border Style
The border-style property specifies what kind of border to
display.
h4
{
border-style: dotted;
border-style: solid;
border-style: double;
}
Border Width:
The border-width property is used to set the width of the
borders
border-width: 2px;
Border-Color:
The border-color property is used to set the color of the
borders.
The color can be set by: name - specify a color name, like
"red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)“
The top, right, bottom & left border can be changed
CSS Margins
The CSS margin properties are used to create space
around elements, outside of any defined borders.
The top, right, bottom, & left margin can be
changed independently using separate properties.
A shorthand margin property can also be used, to
change all margins at once.
h4{
margin: 10px;
}
h4{
margin-top=10px;
margin-right=20px;
margin-bottom=30px;
margin-left=40px;
}
h4{
margin: 10px 20px 30px 40px;
}
CSS List
The CSS list properties allow you to:
Set different list item markers for ordered lists &
unordered lists.
Set an image as the list item marker
Set the position of the maker.
CSS list-style-type property.
CSS list- style-image property
CSS list-style-position Property
The list-style-type specifies the type of list-item
marker in a list.
The list-style-image property replaces the list-item
marker with an image.
The list-style-position property specifies the position
of the list-item markers (bullet points).
list-style-position: outside; means that the bullet
points will be outside the list item.
list-style-position: inside; means that the bullet
points will be inside the list item.
CSS Positioning
The position property specifies the type of positioning method
used for an element (static, relative, absolute, fixed, or
sticky).
1. Absolute
2. Relative
3. Fixed
Absolute Positioning: With absolute positioning, you define the
exact pixel value where the specified HTML element will appear.
The point of origin is the top-left of the browser’s viewable area , so
be sure you are measuring from that point.
Relative Positioning: Relative positioning changes the position of
the HTML element relative to where it normally appears.
Fixed Positioning: The element is positioned relative to the browser
window, in fixed position, element will be in the same place even we
scroll the screen.
css2
Cascading Style Sheets Level 2 (CSS2) is the second version of
cascading style sheets developed by W3C.
It's a declarative language used to enhance the hyperextensive text
markup language.
CSS2 is a subset of Cascading Style Sheets Level 1 and has
enhanced capabilities like:
Media types concept
Aural style sheets
Features for internationalization
Automatic numbering and generated content.
Cursors.
Dynamic outlines.
Capability to control content overflow, clipping.
Absolute, fixed and relative positioning.
Extended selector mechanism.
Extended font selection.
CSS3
CSS3 is the latest evolution of the Cascading Style Sheets
language and aims at extending CSS2.1.
It brings a lot of new features and additions, like rounded
corners, shadows, gradients, transitions or animations, as well
as new layouts like multi-columns, flexible box or grid layouts.
CSS3 is collaboration of CSS2 specifications and new specifications, we can
called this collaboration is module. Some of the modules are shown below −
Selectors
Box Model
Backgrounds
Image Values and Replaced Content
Text Effects
2D Transformations
3D Transformations
Animations
Multiple Column Layout
User Interface
