[go: up one dir, main page]
Scribd
Upload
100 views135 pages

Css Notes Parul

Uploaded by

Harsh Kumar
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
100 views135 pages

Css Notes Parul

Uploaded by

Harsh Kumar
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/ 135

Web Programming (203105353)

Prof. Mosam P Patel, Assistant Professor,


Department of Computer Science and Engineering
CHAPTER-2
Style Sheets
Introduction of CSS
CSS stands for Cascading Style Sheets. It is presentation language.

It is used for a decorate a webpage.

It is used for describing the presentation of a document.

CSS defines how HTML elements are to be displayed.

It is combined with the markup languages HTML or XHTML.

It is use for change/control the color of the text, the style of fonts, the spacing between paragraphs,
how columns are sized , what background images are used or what background colors are used, layout
design, variations in display screen sizes as well as a variety of other effects.
What is requirement of CSS
• CSS Saves time and Work
• Easy maintenance
• Page Loading faster
• Superior styles to HTML
• Multiple device compatibility
• Offline browsing
• Platform independence
• It Solved a many Problems
Basic syntax and structure
A CSS document containing a selector and a declaration block.
The selector points to the HTML tag you want to style.
The declaration block contains number of declarations separated by semicolons.
Each and every declaration includes a property name and a value, separated by a colon.

Figure 2.1: CSS Syntax and Structure [4]


Basic syntax and structure (Contd..)
Example:
h1
{
color: green;
font-size: 15px;
text-align: center;
}
In Above example,<h1> elements will be center-aligned, with a green text color & 15px font
size.

Every CSS declaration ends with a semicolon.


Types of CSS
There Three Ways we can Insert CSS in the document:

1) Inline style

2) Internal style sheet

3) External style sheet


Types of CSS (Contd..)
1) Inline style:
In inline style, Add the style attribute to the relevant tag.
The style attribute can contain any CSS property.
Example:<html>
<body>
<p style="color:red; font-size:15px; margin-left:25px;">Parul University</p>
<h3>Inline CSS Example</h3>
</body>
</html>
Types of CSS (Contd..)
2) Internal style:
It is used when a single document has a unique style.
We define internal styles in the head section of an HTML, like this:
<head>
<style>
h1
{
color: red;
font-size:15px;
margin-left: 20px;
}
</style>
</head>
Types of CSS (Contd..)
Example
<html><head><style>
h1
{
color:red;
font-size:15px;
margin-left:25px;
}
</style></head><body>
<p>Parul University</p>
<h1>Internal CSS Example</h1>
</body></html>
Figure 2.3: Internal CSS Program Output
Types of CSS (Contd..)
3) External style:
Using an external style sheet, we can change the look of an entire Web site by changing just
one file.

External style should not contain any html tags. HTML page must include a link to the style
sheet with the <link> tag.

The <link> tag use inside the head section:


<head>
<link rel="stylesheet" type="text/css" href=“File-name">
</head>
Types of CSS (Contd..)
File name : External_CSS.html The extension of external style
sheet is .css so it must be
<html> saved with a .css extension.
<head>
<link rel="stylesheet" type="text/css" href="demo.css"> Example: File name :Demo.css
</head> h1
<body> {
<p>Parul University</p> font-size:15px;
<h1>External CSS Example</h1>
color: red;
</body>
</html>
margin-left: 20px;
}
Types of CSS (Contd..)
Output:-

Figure 2.4: External CSS Program Output


CSS Box Model
Box Model:
When we talking about design and layout then box model is used.
It is a box that wraps around HTML elements, and it consists of: margins, borders, padding,
and the actual content.
The box model allows us to add a border around elements, and to define space between
elements.

[4]
CSS Box Model (Contd..)
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
p{
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid red;
margin: 25px;
}
Figure 2.6: Boxes and Borders Program Output
CSS Selectors
CSS Selectors:
It is allow you to find and manipulate HTML elements.

CSS selectors are used to "select” HTML elements based on their id, class, attribute, type and
more.

There are 4 types of selectors:


1.element selector
2.id selector
3.class selector
4.group selector
CSS Selectors (Contd..)
1. element selector
The element selector selects or find elements based on the element name.

You can select all <h1> elements on a page. (all <h1> elements will be center-aligned, with a
green text color and 15px font size)

h1
{
color: green;
font-size: 15px;
text-align: center;
}
CSS Selectors (Contd..)
2. id selector
It will apply a specific style to an identified element.
It is unique within a page, so the id selector is used if you want to select a single, unique
element.
Write a hash character(#), followed by the id of the element to select an element with a
specific id,
ID name cannot start with a number.
Ex. #parul {
color: green;
font-size: 15px;
text-align: center;
}
CSS Selectors (Contd..)
Example:
<html><head><title>ID Selector</title>
<style>
#parul {
font-size:15px;
text-align:center;
color: blue;
}
</style></head>
<body>
<p id="parul">PARUL UNIVERSITY</p>
<p>ID Selector Example</p>
</body></html>
CSS Selectors (Contd..)
3. Class selector
It is use to selects elements with a specific class attribute.
Write a period character(.), followed by the name of the class to select elements with a
specific class,
class name cannot start with a number.
Ex. .parul
{
color: green;
font-size: 15px;
text-align: center;
}
CSS Selectors (Contd..)
Example:
<html><head><title>Class Selector</title>
<style>
.parul {
font-size:15px;
text-align:center;
color: blue;
}
</style></head><body>
<p class="parul">PARUL UNIVERSITY</p>
<h5 class="parul">Class Selector Example</p>
</body></html>
CSS Selectors (Contd..)
We can also specify that only specific HTML tag should be affected by a class.
<html><head><title>Class Selector</title>
<style>
h5.parul {
font-size:15px;
text-align:center;
color: blue;
}
</style></head><body>
<p class="parul">PARUL UNIVERSITY</p>
<h5 class="parul">Class Selector Example</p>
</body></html>
CSS Selectors (Contd..)
4. group selector
If we have elements with the same style definitions, like :
h2 {
font-size:15px;
color: blue;
}
p{
font-size:15px;
color: blue;
}
h3 {
font-size:15px;
color: blue; }
CSS Selectors (Contd..)
To minimize the code, We can group the selectors.

Separate each selector with a comma in group selector.

So, we have grouped the selectors from the previous slide:


h2, p,h3
{
font-size:15px;
color: blue;
}
CSS Selectors (Contd..)
Example:
<html><head><title>Group Selector</title><style>
h2, p, h3 {
font-size:15px;
text-align: center;
color: blue;
}
</style></head><body>
<h2>PARUL UNIVERSITY</h2>
<p>Let's Study about CSS</p>
<h3>CSS Group Selector Example</h3>
</body></html>
CSS background
CSS background properties are used to define the background effects.
Below are the properties of background: [5]
Table 2.1: CSS Background

Properties Description

background Sets all the background properties at one times(or in one declaration)

background-image Sets the background image

background-color Sets the background color of an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
CSS background (Contd..)
background-image:
The background-image property is use to set the background image of an element.

By default, the image property is repeated as image both horizontally and vertically. so it
covers the entire element.

We can set the background image for a page like this:


Example:
body
{
background-image: url(“pulogo.jpg");
}
CSS background (Contd..)
Example (1): To repeat an image horizontally set background-repeat :repeat-x and vertically
set background-repeat: repeat-y;
<html><head><title>CSS Ex</title><style>
body
{
background-image: url("PULOGO.jpg");
background-repeat: repeat-x;
}
</style></head>
<body>
</body></html>
CSS background (Contd..)
Example(2): To Set position and no-repeat
<html><head>
<style>
body {
background-image: url("pulogo.jpg");
background-repeat: no-repeat;
background-position: right bottom;
}
</style></head><body>
<h1>Parul University</h1>
</body></html>
CSS background (Contd..)
Background-color:

It is specifies the background color of an element.

With CSS, there are three way we can use color:

1. a color name - “blue”


2. a HEX value - "#00ff00"
3. an RGB value - "rgb(0,0,255)"
CSS background (Contd..)
Example :<html><head><title>CSS Background-color</title><style>
p{
background-color: #00ff00;
}
h3{
background-color: rgb(255,0,0);
}
h4{
background-color: yellow;
}
</style></head>
<body>
<p>WEB PROGRAMMING</p>
<h3>Style sheets</h3>
<h4>Background-color Example</h4>
</body> </html>
CSS background (Contd..)
Shorthand Property:
We can specify all the properties in one single property. It is called a shorthand property.
The shorthand property is "background":
body {
background: #ff0000 url(“pulogo.jpg") no-repeat left bottom;
}
Follow below order of the property When using the shorthand property.
background-color
background-image
background-repeat
background-attachment
background-position
Manipulating Texts
Below table describe the text Properties: Table 2.2: Text Manipulating[5]

Property Description

Color Sets the color of text

direction Specifies the text writing direction

line-height Sets the line height

text-align Specifies the horizontal alignment of text

text-decoration Specifies the decoration added to text

text-indent Specifies the indentation of the first line in a text-block

text-shadow Specifies the shadow effect added to text


Manipulating Texts(Contd..)

Property Description

text-transform Controls the capitalization of text

vertical-align Sets the vertical alignment of an element

white-space Specifies how white-space inside an element is handled

letter-spacing Increases or decreases the space between characters in a text

word-spacing Increases or decreases the space between words in a text


Manipulating Texts(Contd..)
1) Text Color: It is used to set the color of the text.
p{
color: red;
}

h1 {
color: #0000ff;
}

h2 {
color: rgb(0,255,0);
}
Manipulating Texts(Contd..)
2) Text Alignment: The text-align property is used to set the horizontal alignment of a text. Text can
be justified , or aligned to the left or right, or centered.
p{
text-align: right ;
}

h1{
text-align: justify;
}

h2 {
text-align: left;
}
Manipulating Texts(Contd..)
3)Text Decoration: It is used to set or remove decorations from text also remove underlines from
links for design purposes:
p{
text-decoration: line-through;
}
a{
text-decoration: none;
}
h1{
text-decoration: overline;
}
h2{
text-decoration: underline; }
Manipulating Texts(Contd..)
4) Text Transformation: It is used to specify uppercase and lowercase letters in a text or
capitalize the first letter of each word.

h1.uppercase {
text-transform: uppercase;
}
h2.lowercase {
text-transform: lowercase;
}
h3.capitalize {
text-transform: capitalize;
}
Manipulating Texts(Contd..)
5) Text Indentation:

The text-indent property is used to specify the indentation of the first line of a text.

p{
text-indent: 70px;
}
Using Fonts
Below table describe the font Properties:
Table 2.3: Font Property[5]

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed in a small-caps font

font-weight Specifies the weight of a font


Using Fonts (Contd..)
1) Font Family: The font family of a text is set with the font-family property.
<html><head><style>
p{
font-family: "Times New Roman“;
}
h1{
font-family: Arial;
}
</style></head><body>
<p>Parul University</p>
<h1>CSS Font Family Example</h1>
</body></html>
Using Fonts (Contd..)
2) Font Style: It is used to specify italic text.
It 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)

h1.normal {
font-style: normal; }
h2.italic {
font-style: italic; }
h3.oblique {
font-style: oblique; }
Using Fonts (Contd..)
3) Font Size:
It is set the size of the text.
The font-size value can be an absolute, or relative size.
Absolute size:
1. Sets the text to a specified size
2.When the physical size of the output is known then we can use absolute size.
3.Does not allow a user to change the text size in all browsers.
Relative size:
1.Sets the size relative to surrounding elements.
2.Allows a user to change the text size in browsers.
3.The default size for normal text, like paragraphs, is 16px (16px=1em).
Using Fonts (Contd..)
Set Font Size With Pixels: Text size with pixels gives you full control over the text size:
p{
font-size: 15px;
}

h1 {
font-size: 20px;
}

h2 {
font-size: 25px;
}
Using Fonts (Contd..)
Set Font Size With em:
To allow users to resize the text (in the browser menu), many users use em instead of pixels.
The default text size in browsers is 16px. So, the default size of 1em is 16px.
The formula for converting pixel into em is: pixels/16=em.
p{
font-size: 3.75em; /* 60px/16= 3.75 em /*
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.25m;
}
Using Fonts (Contd..)
Combination of Percent and Em: The solution that works in all browsers, is to set a default
font-size in percent for the <body> element:
body
{
font-size: 100%;
}
p{
font-size: 3.75em; }
h1 {
font-size: 2.5em;
}
Borders and Boxes
The border properties allow you to specify the color, size and style of an element's border. Below table describe
the borders Properties: [5]
Table 2.4: Border and Boxes

Property Description Value

border Sets all the border properties in one border-width, border-style, border-
declaration color

border-bottom Sets all the bottom border properties in one border-bottom-width


declaration
border-style, border-color

border-bottom-color Sets the color of the bottom border border-color

border-bottom-style Sets the style of the bottom border border-style

border-bottom-width Sets the width of the bottom border thin, medium, thick, length

border-color Sets the color of the four borders color


Borders and Boxes (Contd..)
Property Description Value

border-left Sets all the left border properties in one Border-left-width, border-style
declaration
border-color

border-left-color Sets the color of the left border border-color

border-left-style Sets the style of the left border border-style

border-left-width Sets the width of the left border thin, medium, thick ,length

border-right Sets all the right border properties in one border-right-width ,border-style
declaration
border-color

border-right-color Sets the color of the right border border-color


Borders and Boxes (Contd..)
Property Description Value

border-right-style Sets the style of the right border border-style

border-right-width Sets the width of the right border thin, medium, thick

length

border-style Sets the style of the four borders none, hidden ,dotted, dashes, solid
,double

groove

ridge

inset

Outset
Borders and Boxes (Contd..)
Property Description Value

border-top Sets all the top border properties in one border-top-width


declaration
border-style

border-color

border-top-color Sets the color of the top border border-color

border-top-style Sets the style of the top border border-style

border-top-width Sets the width of the top border thin, medium, thick

length

border-width Sets the width of the four borders thin, medium, thick ,length
Borders and Boxes (Contd..)
The border properties allow you to specify the color, size and style of an element's border.
1)Border Style:
The border-style values are:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders
groove: Defines a 3D grooved border.
ridge: Defines a 3D ridged border.
inset: Defines a 3D inset border.
outset: Defines a 3D outset border.
Borders and Boxes (Contd..)
2) Border Width: It is used to set the width of the border.
We can set width in pixels, or by using this three pre-defined values: thin, medium, or thick.
If it is used alone then it does not work. Use the "border-style" property to set the borders width.
h1
{
border-style: dotted
border-width: 7px;
}
p
{
border-style: solid;
border-width: thin;
}
Borders and Boxes (Contd..)
3) Border Color: It is used to set the color of the border.
if it is used alone, then it does not work . Use the "border-style" property to set the borders
first
h1
{
border-style: dashed;
border-color: green;
}
p{
border-style: solid;
border-color: #95be25;
}
Borders and Boxes (Contd..)
4) Border - Individual sides:
It is possible to specify different borders for different sides:
p{
border-top-style: solid;
border-right-style: dashed
border-bottom-style: solid;
border-left-style: dashed;
}
We can also write the above example with a single property:
p{
border-style: solid dashed;
}
Borders and Boxes (Contd..)
4) Border - Individual sides:
border-style: dashed dotted solid double
top border is dashed
right border is dotted
bottom border is solid
left border is double
border-style: dotted double solid;
top border is dotted
right and left borders are double
bottom border is solid
border-style: solid dashed;
top and bottom borders are solid
right and left borders are dashed
border-style: solid;
all four borders are solid
Borders and Boxes (Contd..)
5) Border - Shorthand property:
We can use all the individual border properties in one property. It is called a shorthand
property.

border-width
border-style (required)
border-color

p
{
border: 13px dotted green;
}
Borders and Boxes (Contd..)
Box Model:
When we talking about design and layout then box model is used.
It is a box that wraps around HTML elements, and it consists of: margins, borders, padding,
and the actual content.
The box model allows us to add a border around elements, and to define space between
elements.

[4]
Borders and Boxes (Contd..)
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
p{
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid red;
margin: 25px;
}
Figure 2.16: Boxes and Borders Program Output
Borders and Boxes (Contd..)
1) box-sizing Property: It is used to tell the browser what the sizing properties (width and
height) should include.
Table 2.5: Box-sizing Property[5]

Value Description

content-box Default. The width and height properties (and min/max properties) includes only the
content. Border, padding, or margin are not included

border-box The width and height properties (and min/max properties) includes content, padding
and border, but not the margin

initial Sets this property to its default value.

inherit Inherits this property from its parent element.


Borders and Boxes (Contd..)
2) Box Drawings: If you want any of these characters displayed in HTML, you can use the
HTML entity.
If the character does not have an HTML entity, you can use the decimal (dec) or
hexadecimal (hex) reference.

Range: Decimal 9472-9599. Hex 2500-257F.


<p>I will display &#9488;<p>
<p>I will display &#x250C;<p>

I will display ┐

I will display ┌
Borders and Boxes (Contd..)
Table 2.6: Box Drawing Property[5]
2) Box Drawings:
Char Dec Hex Name

─ 9472 2500 Box drawings light horizontal

━ 9473 2501 Box drawings heavy horizontal

│ 9474 2502 Box drawings light vertical

┃ 9475 2503 Box drawings heavy vertical

┄ 9476 2504 Box drawings light triple dash horizontal

┅ 9477 2505 Box drawings heavy triple dash horizontal

┆ 9478 2506 Box drawings light triple dash vertical

┇ 9479 2507 Box drawings heavy triple dash vertical

┈ 9480 2508 Box drawings light quadruple dash horizontal


Borders and Boxes (Contd..)

2) Box Drawings:
Char Dec Hex Name

┊ 9482 250A Box drawings light quadruple dash vertical

┋ 9483 250B Box drawings heavy quadruple dash vertical

┌ 9484 250C Box drawings light down and right

┍ 9485 250D Box drawings down light and right heavy

┎ 9486 250E Box drawings down heavy and right light

┏ 9487 250F Box drawings heavy down and right

┐ 9488 2510 Box drawings light down and left

┑ 9489 2511 Box drawings down light and left heavy

┒ 9490 2512 Box drawings down heavy and left light


Borders and Boxes (Contd..)
3) box-shadow Property:
If you want to display shadow of the box then you can use box-shadow property.

Syntax:

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

p{
box-shadow: 15px 15px 5px #6688FF;
}
Borders and Boxes (Contd..)
box-shadow Property values are: Table 2.7: Box-shadow Property[5]

Value Description

none Default value. No shadow is displayed

h-shadow The position of the horizontal shadow. Negative values are allowed. Required.

v-shadow The position of the vertical shadow. Negative values are allowed. Required.

blur The blur distance. Optional.

spread The size of shadow. Negative values are allowed. Optional.

color The color of the shadow. The default value is black. Optional.

inset Optional. Changes the shadow from an outer shadow (outset) to an inner shadow

initial Sets this property to its default value.


Margins
The margin properties define the space around elements.
The margin clears an area around an element (outside the border).
It does not have a background color, and is completely transparent.
The possible value of margins is: [5]
Table 2.8: Margins Property

Value Description

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
Margins (Contd..)
1) Margin - Individual sides:
We can set different margins for different sides of an element:
p{
margin-top: 150px;
margin-bottom: 150px;
margin-right: 200px;
margin-left: 70px;
}
2) Margin - Shorthand property:
We can set all the margin properties in one property.
The shorthand property of all margin is "margin":
p{
margin: 120px 70px; }
Margins (Contd..)
The margin property can have from one to four values.
margin: 100px 50px 65px 80px;
top margin is 100px
right margin is 50px
bottom margin is 65px
left margin is 80px
margin: 10px 25px 50px;
top margin is 10px
right and left margins are 25px
bottom margin is 50px
margin: 100px 200px;
top and bottom margins are 100px
right and left margins are 200px
margin: 70px;
all four margins are 70px
Padding
It is define the space between the element border and the element content.
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.
Possible Values are: [5]
Table 2.9: Padding Property

Value Description

length Defines a fixed padding (in pixels, pt, em, etc.)

% Defines a padding in % of the containing element


Padding (Contd..)
The padding property can have from one to four values.
padding: 55px 65px 75px 85px;
top padding is 55px
right padding is 65px
bottom padding is 75px
left padding is 85px
padding: 55px 75px 95px;
top padding is 55px
right and left paddings are 75px
bottom padding is 95px
padding: 78px 98px;
top and bottom paddings are 78px
right and left paddings are 98px
padding: 65px;
all four paddings are 65px
Lists
Using list properties we can:

Set different list item markers for ordered lists

Set different list item markers for unordered lists

Set an image as the list item marker

images can be used as the list item marker.


Lists (Contd..)
1) List Item Markers: The type of list item marker is specified with the list-style-type property:
ul.x {
list-style-type: circle;
}
ul.y{
list-style-type: square;
}
ol.a{
list-style-type: upper-roman;
}
ol.b {
list-style-type: lower-alpha;
}
Lists (Contd..)
2) An Image as The List Item Marker:
Using the list-style-image property we can set image as the list item marker :

ul {
list-style-image: url(‘pulogo.jpg’);
}

The above example does not display equally in all browsers. IE and Opera will display the
image-marker a little bit higher than Firefox, Chrome, and Safari.

If you want the image-marker to be placed equally in all browsers, a crossbrowser solution
is explained below.
Lists (Contd..)
3 ) Crossbrowser Solution: The following example displays the image-marker equally in all browsers:
ul { ul li {
list-style-type: none; background-image: url(sqpurple.gif);
padding: 0px; background-repeat: no-repeat;
margin: 0px; background-position: 0px center;
} padding-left: 15px;
}
For <ul>:
Set the list-style-type to none to remove the list item marker
Set both padding and margin to 0px (for cross-browser compatibility)
For all <li> in <ul>:
Set the URL of the image, and show it only once (no-repeat)
Position the image where you want it (left 0px and vertical value: center)
Position the text in the list with padding-left
Lists (Contd..)
4) List - Shorthand property:
It is used to set all the list properties in one declaration:
ul {
list-style: square inside url(“pulogo.jpg");
}
We have to follow below order for shorthand property:
list-style-type (if a list-style-image is specified, the value of this property will be displayed if
the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside
the content flow)
list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for the missing property
will be inserted, if any.
Positioning
The positioning properties allow you to position an element.

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


Positioning(Contd..)
1) Static Positioning:

HTML elements are positioned static by default.

A static positioned element is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.
Positioning(Contd..)
2) Fixed Positioning:
An element with a fixed position is positioned relative to the browser window, and will not
move even if the window is scrolled:
p.pos {
position: fixed;
top: 40px;
right: 7px;
color: blue
}
Fixed positioned elements are removed from the normal flow. The document and other
elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.
Positioning(Contd..)
3) Relative Positioning:
A relative positioned element is positioned relative to its normal position:
h1_pos_left {
position: relative;
left: -50px;
}
h1.pos_right {
position: relative;
left: 30px; }
The content of relatively positioned elements can be moved and overlap other elements, but the reserved
space for the element is still preserved in the normal flow.
h1pos_top {
position: relative;
top: -40px; }
Relatively positioned elements are often used as container blocks for absolutely positioned elements.
Positioning(Contd..)
4) Absolute Positioning:
An absolute position element is positioned relative to the first parent element that has a
position other than static. If no such element is found, the containing block is <html>:
h2 {
position: absolute;
left: 200px;
top: 170px;
}
Absolutely positioned elements are removed from the normal flow. The document and
other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.
CSS2
• Cascading Style Sheet level 2 generally called as CSS2 was developed by the WWW
Consortium and published in May 1998.
• CSS 2 has added new features like:
1. Absolute, relative, and fixed positioning of elements and z-index.
2. The media types supports for aural style sheets
3. New font properties like shadows
4. Errors in CSS2 are fixed in CSS 2.1. As well as it removes partially or fully unsupported
interoperable features of CSS 2.1.
Advanced Selectors
Selectors are used for selecting the HTML elements in the attributes.

Different types of selectors are given below:

1. Adjacent Sibling Selector


2. Attribute Selector
3. nth-of-type Selector
4. Direct Child Selector
5. General Sibling Selector
6. Star Selector
7. Decendant Selector
Advanced Selectors (Contd..)
1. Adjacent Sibling Selector
It selects all the elements that are adjacent siblings of specified elements. It selects the
second element if it immediately follows the first element.

Syntax:

It select h1 tags which immediately follows the ul tag.


ul+h1
{
border: 3px dotted green;
}
Advanced Selectors (Contd..)
Example:<html> <head> <title>Advanced Selectors Example</title>
<style>
ul+h1{
border:3px dotted green;
}
</style> </head>
<body>
<h3>Subject's Name</h3>
<ul>
<li>JAVA</li>
<li>OS</li>
</ul>
<h1>WDD</h1>
<h2>FOP</h2>
</body> </html>
Figure 2.17: Advance Selector Program Output
Advanced Selectors (Contd..)
2. Attribute Selector: It selects a particular type of inputs.

Syntax:

input[type="checkbox"]
{
background: orange;
}
Advanced Selectors (Contd..)
Example:
<html><head> <title>Advanced Selectors Example</title>
<style>
a[href="http://www.gmail.com"]{
background: gray;
}
</style>
</head>
<body>
Figure 2.18: Advance Selector Program Output
<a href="http://www.google.com">google.com</a><br>
<a href="http://www.gmail.com" target="_blank">gmail.com</a>
<br>
<a href="http://www.yahoo.com">yahoo.com</a>
</body> </html>
Advanced Selectors (Contd..)
3. nth-of-type Selector
It selects an element from its position and types.
Syntax: Select a particular number tag to make changes.
div:nth-of-type(3)
{
background:yellow;
}
If we want to make changes in all even li.
li:nth-of-type(even)
{
background: yellow;
}
Advanced Selectors (Contd..)
Example:<html><head> <title>Advanced Selectors Example</title><style>
ul:nth-of-type(3){
background:purple;
}
</style></head><body>
<ul>
<li>java</li>
<li>C++</li>
</ul>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<ul>
<li>C#</li>
<li>OS</li>
</ul> </body></html>
Figure 2.19: Advance Selector Program Output
Advanced Selectors (Contd..)
4. Direct Child Selector
It selects any element matching the second element that is a direct child of an element
matching the first element. The element matched by the second selector must be the
immediate children of the elements matched by the first selector.
Syntax:

p > div
{
background-color: DodgerBlue;
}
Advanced Selectors (Contd..)
Example:<html><head> <title>Advanced Selectors Example</title>
<style>
div > span {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>Parul university is inside div and span</span>
<p>Parul university inside div but not inside span
<span>Parul university inside div p</span>
</p>
</div>
<span>Parul university is not inside div</span>
</body>
</html>
Figure 2.20: Advance Selector Program Output
Advanced Selectors (Contd..)
5. General Sibling Selector
It selects only the first element if it follows the first element and both children are of the the
same parent element. It is not necessary that the second element immediately follows first
element.
Syntax: Changes to the span element content which follows paragraph tag and both have
same parent tag.

p ~ span
{
color: red;
}
Advanced Selectors (Contd..)
Example:
<html> <head> <title>Advanced Selectors Example</title>
<style >
p ~ span
{
color: red;
}
</style>
</head>
<body>
<p>Welcome to
<span>Parul University</span>
</p>
<h1>Let's learn about</h1>
<p>Advanced </p>
<span>Selectors</span>
</body> </html>
Figure 2.21: Advance Selector Program Output
Advanced Selectors (Contd..)
6. Star Selector: The changes made will be made to whole page.

Syntax:

*{

border:1px solid lightgrey;

}
Advanced Selectors (Contd..)
Example: <html> <head> <title>Advanced Selectors Example</title>
<style>
*{
border:3px dotted green;
}
</style>
</head>
<body>
<p>PARUL UNIVERSITY</p>
<p>Advanced Selectors Example</p>
</body>
</html>
Figure 2.22: Advance Selector Program Output
Advanced Selectors (Contd..)
7. Decendant Selector: It makes changes only to those elements which are inside the other
element.

Syntax: Select all the anchor tags which are inside ‘li’ element which are inside ‘ul’ element.

ul li a
{
color: red;
}
Advanced Selectors (Contd..)
Example: <html><head><title>Advanced Selectors Example</title>
<style>
ul li a
{
color:blue;
}
</style>
</head>
<body>
<ul>
<li> <a href="www.paruluniversity.ac.in">PARUL UNIVERSITY.</a></li> Figure 2.23: Advance Selector Program Output
<li>WEB PROGRAMMING Subject</li>
<li>Unit-2 Style sheets</li>
<li>Advanced Selectors Example</li>
</body> </html>
CSS3
• As we know in CSS2, different features are defined by a large single specification, but on
the other hand the CSS3 is divided into number of individual documents called as
“modules”.
• New features are added into every document module and CSS2 features are extended in
order to preserve the backward compatibility.
 Transparency
 Gradients
 Backgrounds
 Round Borders
 Typography
 Shadows
 Transformations
 Transitions
Transparency / Opacity
It is display smooth transitions between two or many specified colors.

 Transparent Image

 The opacity property specifies the transparency of an element.


Transparency / Opacity (Contd..)
<!DOCTYPE html>
<head><style>
img {
opacity: 0.5;
}
</style></head>
<body>
<h1>Parul University</h1>
<p>Image Transparency Example</p>
<p>Image with 50% opacity:</p>
<img src="pulogo.jpg" alt="PU LOGO" width="170" height="100">
</body></html>
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Transparency / Opacity (Contd..)


 Transparent Hover Effect
 The opacity property is often used together with the :hover selector to change the
opacity on mouse-over.
<!DOCTYPE html> <body>
<html> <h1>Parul University</h1>
<head> <p>Transparent Hover Effect Example</p>
<style> <img src="pulogo.jpg" alt="PU LOGO" width="170" height="100">
img:hover { </body>
opacity: 0.5; </html>
}
</style>
</head>
The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

Transparency / Opacity (Contd..)


 Transparent Hover Effect

Figure 2.25: Transparent Hover Program Output


Gradients
It is display smooth transitions between two or many specified colors.

There are two types of gradients:

1.Linear Gradients (goesdown/up/left/right/diagonally)

2.Radial Gradients (defined by their center)


Gradients (Contd..)
1.Linear Gradients (goes left/right/down/up/diagonally)

You must define at least two color stops for linear gradient

Color stops are the colors you want to render smooth transitions among.

We can set a starting point and a direction (or an angle) along with the gradient effect.

Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Gradients (Contd..)
1.Linear Gradients-Example
<html><head><style>
#g{
height: 100px;
background: linear-gradient(blue, green);
}
</style> </head><body>
<h1>It is display from Top to Bottom</h1>
<p>PARUL UNIVERSITY</p>
<div id="g"></div>
</body></html>
Gradients (Contd..)
1.Linear Gradients
Use below syntax for left to write:
background: linear-gradient(to right, blue , green);
Use below syntax for diagonal:
background: linear-gradient(to bottom right, blue , green);
We can define an angle, instead of the directions: (to bottom, top, right, left, to bottom right etc.)
background: linear-gradient(90deg,red, yellow);
Use below syntax for Multiple color Stops:
background: linear-gradient(blue, red, green, yellow);
background: linear-gradient(blue 20%, green 80%, red 50%);
Use below syntax for Repeating a linear-gradient:
background: repeating-linear-gradient(blue, yellow 15%, red 23%);
background: repeating-linear-gradient(45deg,red, blue 9%,green 13%);
Gradients (Contd..)
1.Linear Gradients- using Transparency

Gradients also support transparency.

To add transparency, we use the rgba() function to define the color stops.

The last parameter in the rgba() function can be a value from 0 to 1, 0 indicates full
transparency, 1 indicates full color (no transparency).
Gradients (Contd..)
1.Linear Gradients- using Transparency-Example
<html><head><style>
#g {
height: 100px;
background: linear-gradient(to right, rgba(0,0,255,0), rgba(0,0,255,1));
} </style></head><body>
<h3>This is example of Linear Gradient -Transparency</h3>
<h2>PARUL UNIVERSITY</h2>
<div id="g"></div>
</body>
</html>
Gradients (Contd..)
2.Radial Gradients (defined by their center)

You must define at least two color stops for radial gradient.

By default, shape is ellipse, size is farthest-corner, and position is center.

Syntax:

background: radial-gradient(shape size at position, start-color, ..., last-color);


Gradients (Contd..)
2.Radial Gradients –Example(Evenly Spaced Color Stops –default)
<html><head><style>
#g{
height: 170px;
width: 210px;
background: radial-gradient(green, yellow, blue);
}
</style></head><body>
<h3>PARUL UNIVERSITY</h3>
<div id="g"></div>
</body>
</html>
Gradients (Contd..)
2.Radial Gradients
Use below syntax for Evenly Spaced color Stops (this is default):
background: radial-gradient(green, yellow, blue);

Use below syntax for Differently Spaced color Stops:


background: radial-gradient(yellow 25%, red 15%, green 55%);

Use below syntax for set a shape(circle or ellipse -Default is ellipse):


background: radial-gradient(circle, green, yellow, blue);

Use below syntax for Repeating Radial Gradient:


background: repeating-radial-gradient(green, yellow 30%, blue 45%);
Multiple Backgrounds
Advance Background Properties: Table 2.10: Advance Background Property[5]

Property Description
background This is shorthand property for setting all the background properties in one declaration.

background-image Specify one or more background images for an element.


background-size Specifies the size of background images.
background-clip Specifies the painting area of the background.
background-origin Specifies whether the background images are positioned.
background-color Specifies the background color to be used
background-position Specifies the position of the background images.
background-repeat Specifies how to repeat the background images.
background-attachment Specifies whether the background images are fixed or scroll with the rest of the page
Rounded Corners
Using border-radius property we can give any element rounded corner.
It is defines the radius of an element's corners.
Rounded Corners properties are: [5]
Table 2.11: Rounded Corners Property

Property Description
border-radius A shorthand property for setting all the border (four)

border-top-left-radius Defines the shape of the border of the top-left corner.


border-top-right-radius Defines the shape of the border of the top-right corner.
border-bottom-right- Defines the shape of the border of the bottom-right corner.
radius
border-bottom-left- Defines the shape of the border of the bottom-left corner.
radius
border-top-left-radius Defines the shape of the border of the top-left corner.
Rounded Corners(Contd..)
Example:
<html><head><style>
#r {
border-radius: 30px;
background: yellow;
padding:15px;
width: 200px;
height: 100px;
}
</style></head><body>
<h4>Example of rounded corner</h4>
<p id="r">PARUL UNIVERSITY</p>
</body></html>
Figure 2.29: Rounded Corners Program Output
Rounded Corners(Contd..)
We can specify each corner like this:
Four values: border-radius:20px 30px 10px 15px;
Three Values: border-radius:20px 30px 15px;
Two Values: border-radius:20px 30px ;
One Values: border-radius:20px;

We can also specify each corner like this:


border-top-left-radius: 15px;
border-top-right-radius: 25px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 45px;
border-top-left-radius: 15px 25px; //if two values are set then 15 for top-border and 25 for
left-border
Shadows
CSS3 supported to add shadow to elements or to text.

There are two Shadow Properties:


Table 2.12: Shadows Property[5]

Property Description

box-shadow Adds one or more shadows to an element.

text-shadow Adds one or more shadows to a text.


Shadows (Contd..)
Syntax of text-shadow :
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Property values are: [5]
Table 2.13: Text-Shadows Property Values

Value Description

h-shadow The position of the horizontal shadow. negative values are allowed. It’s required.

v-shadow The position of the vertical shadow. negative values are allowed. It’s required.

blur-radius The blur radius. Default value is 0.It’s Optional

color The color of the shadow. It’s Optional.

none No shadow. Default Value.


Shadows (Contd..)
Text-Shadow Example:
<html><head><title>Shadows Example</title>
<style>
h1 {
text-shadow: 8px 3px 5px yellow;
}
</style>
</head>
<body>
<h1>PARUL UNIVERSITY</h1>
</body>
</html>
Shadows (Contd..)
Syntax of box-shadow:
box-shadow: none|h-offset v-offset blur spread color|inset|initial|inherit;
Property values are: [5]
Table 2.14: Box-Shadows Property Values

Value Description
h-offset The horizontal offset of the shadow. A + value puts the shadow on the right side of the box
, a – values puts the shadow on the left side of the box. It’s required.
v-offset The vertical offset of the shadow. A + value puts the shadow below the box , a – values
puts the shadow above the box. It’s required.
blur The blur radius. Default value is 0.It’s Optional
color The color of the shadow. It’s Optional.
none No shadow is displayed. Default Value.
inset Changes the shadow from an outer shadow to an inner shadow. It’s Optional.
Shadows (Contd..)
Box-Shadow Example:
<html><head><style>
p{
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px red; }
</style></head><body>
<p>Parul University is a private Institution established in 2015. The university offers UG, PG
and doctoral programs. The campus of the institution is spread across an area of 150
acres.</p>
</body></html>
Transformation
A transformation is an effect that lets an element change shape, size and position.
CSS3 transforms allow you to translate, rotate, scale, and skew elements.
CSS supports 2D and 3D transformations.
Transformation properties are:
Table 2.15: Transformation Property[5]

Property Description

transform Applies a 2D or 3D transformation to an element.

transform-origin Allows you to change the position on transformed elements.


Transformation(Contd..)
2D transform methods are: Table 2.16: 2D Transform Methods[5]

Method Description
translate(x,y) Defines a 2D translation, moving the element along the X and Y- axis
translateX(n) Defines a 2D translation, moving the element along the X -axis
translateY(n) Defines a 2D translation, moving the element along Y- axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height.
scaleX(n) Defines a 2D scale transformation, changing the element’s width
scaleY(n) Defines a 2D scale transformation, changing the element’s height.
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter.
skew(x-angle,y-angle) Defines a 2D skew transformation along the x- and y-axis.
skewX(angle) Defines a 2D skew transformation along the x-axis.
skewY(angle) Defines a 2D skew transformation along the y-axis.
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six value.
Transformation (Contd..)
1) translate():
The translate() method moves an element from its current position (according to the
parameters given for the X-axis and the Y-axis).
The following example moves the <div> element 50 pixels to the right, and 100 pixels down
from its current position.

[5]
Transformation (Contd..)
2) rotate():
The rotate() method rotates an element clockwise or counter-clockwise according to a
given degree.
The following example rotates the <div> element clockwise with 30 degrees:
Transformation (Contd..)
3) scale():
The scale() method increases or decreases the size of an element (according to the
parameters given for the width and height).
The following example increases the <div> element to be two times of its original width,
and three times of its original height:
Transformation (Contd..)
4) skewX():
The skewX() method skews an element along the X-axis by the given angle.
The following example skews the <div> element 15 degrees along the X-axis:
Transformation (Contd..)
5) skewY():
The skewY() method skews an element along the Y-axis by the given angle.
The following example skews the <div> element 15 degrees along the Y-axis.
Transformation (Contd..)
6) matrix() :
The matrix() method combines all the 2D transform methods into one.
The matrix() method take six parameters, containing mathematic functions, which allows
you to rotate, scale, move (translate), and skew elements.
The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

[5]
Transitions
It allows you to change property values smoothly, over a given duration.

If the duration part is not specified, the transition will have no effect, because the default
value is 0.

To create a transition effect, you must specify two things:

1.The CSS property you want to add an effect to

2.The duration of the effect


Transitions (Contd..)
<html><head>
<style>
div{
width: 80px;
height: 90px;
background: green;
transition: width 3s;
}
div :hover {
width: 220px;
}
</style>
</head><body>
<h1>Parul University</h1>
<p>Transition Property</p>
<div></div>
</body></html>
Figure 2.38: Transition Program Output
Transitions(Contd..)
CSS transition properties:
Table 2.17: CSS Transition Property[5]

Property Description

transition A shorthand property for setting the four transition properties into a single
property

transition-delay Specifies a delay (in seconds) for the transition effect

transition-duration Specifies how many seconds or milliseconds a transition effect takes to


complete

transition-property Specifies the name of the CSS property the transition effect is for

transition-timing-function Specifies the speed curve of the transition effect


Transitions (Contd..)
Example: <html><head>
<style>
div {
width: 80px;
height: 100px;
background: yellow;
transition-delay: 1s;
transition-duration: 2s;
transition-property: width;
transition-timing-function: linear; }
div:hover {
width: 200px; }
</style> </head><body>
<h1>Parul University</h1>
<p>Transition Properties</p>
<div></div>
</body></html>
Figure 2.39: Transition Program Output
Layout
A website is often divided into headers, menus, content and a footer

Figure 2.40: Web Page Layout [4]


Layout(Contd..)
There are no of different layout designs to choose from.
Header
A header is located at the top of the website (or right below a top navigation menu). It is contains a logo or the
website name:
Navigation Bar
A navigation bar contains a list of links to help visitors navigating through your website.
Content
The layout in this section, often depends on the target users. The most common layout is one (or combining
them) of the following:
1-column (often used for mobile browsers)
2-column (often used for tablets and laptops)
3-column layout (only used for desktops)
Footer
The footer is placed at the bottom of your page. It often contains information like copyright and contact
information.
Layout (Contd..)
Example:

Figure 2.41: Website Layout Example


References

[1] HTML5 Black Book by DT Editorial Services.


[2] Developing Web Applications by Ralph Moseley - Wiley India
[3] Web Technologies Black Book by dreamtech press.
[4] https://www.geeksforgeeks.org
[5] https://www.w3schools.com/css
www.paruluniversity.ac.in

You might also like