Unit 2

Subject : Web Technology
Subject Code: BCS 502

Faculty Name: Saijshree Srivastava
� CSS Introduction
� CSS is the language we use to style a Web page.
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External stylesheets are stored in CSS files
� CSS SYNTAX:
� 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.
CSS Selector
� CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
� There are several different types of selectors in CSS.
1. CSS Element Selector

2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects HTML elements based on the element name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
2) CSS Id Selector
� The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique element.
� It is written with the hash character (#), followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello GL BAJAJ</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
3) CSS Class Selector
The class selector selects HTML elements with a specific class attribute. It is used with a period character . (full stop
symbol) followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
4) CSS Universal Selector
� The universal selector is used as a wildcard character. It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
5) CSS Group Selector
� The grouping selector is used to select all the elements with the same style definitions.
� Grouping selector is used to minimize the code. Commas are used to separate each selector in grouping.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Types of CSS (Cascading Style Sheet)
� Cascading Style Sheet (CSS) is used to set the style in web pages that contain HTML elements. It
sets the background color, font-size, font-family, color etc. properties of elements on a web page.
� There are three types of CSS which are given below:

• Inline CSS
• Internal or Embedded CSS
• External CSS
� Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is
known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
� Example: This example shows the application of inline-css.
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Inline CSS</title>
5. </head>
6. <body>
7. <p style="color:#009900;
8. font-size:50px;
9. font-style:italic;
10. text-align:center;">
11. WELCOME TO GL BAJAJ
12. </p>
13. </body>
14. </html>
� Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely.
The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the
<style> tag inside the head section of the HTML file.
� External CSS: External CSS contains separate CSS files that contain only style properties with the help of tag
attributes (For example class, id, heading etc). CSS property is written in a separate file with a .css extension
and should be linked to the HTML document using a link tag. It means that, for each element, style can be set
only once and will be applied across web pages.
• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet file.
Input Output
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
CSS Colors
CSS Color property is used to set the color of HTML elements. This property is used to set font
color, background color, etc. The color of an element can be defined in the following ways:
1. Built-In Color
2. RGB Format
3. RGBA Format
4. Hexadecimal Notation
5. HSL
6. HSLA
1. Built-In Color: These are a set of predefined colors which are used by its name. For
example: red, blue, green etc.
Syntax:
h1 { color: color-name; }
2. RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range
between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 { color: rgb(R, G, B); }
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>CSS color property</title>
5. <style>
6. h1 {
7. color: rgb(0, 153, 0);
8. text-align: center;
9. }
10. </style>
11. </head>
12. <body>
13. <h1>
14. GL BAJAJ INSTITUTE OF TECH. AND MANAGMNT.
15. </h1>
16. </body>
17. </html>
3. RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A
(Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where
0.0. represents fully transparent and 1.0 represents not transparent.
4. Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters
each ranging from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.
Syntax:
h1 { color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F); }
5. HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.
• Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
• Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
• Lightness: It takes percentage value, where 100% represents white, while 0% represents black.
6. HSLA:
The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha)
which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0.
represents fully transparent and 1.0 represents not transparent.
Border Color: It is used to set the border color of an element. Border-style is used to set the
border type.
Syntax:
h1 { border-style:solid/dashed/dotted
border-color:color_name; }
� List of Colors: Following is the list of a few CSS colors.
Color Name Hex(RGB) Decimal(RGB)
Red FF0000 255, 0, 0
Pink FFC0CB 255, 192, 203
Orange FFA500 255, 165, 0
Yellow FFFF00 255, 255, 0
Violet EE82EE 238, 130, 238
Green 008000 0, 128, 0
Aqua 00FFFF 0, 255, 255
Blue 0000FF 0, 0, 255
Brown A52A2A 165, 42, 42
White FFFFFF 255, 255, 255
Gray 808080 128, 128, 128
Black 000000 0, 0, 0
� Opacity / Transparency
CSS Border Style
� CSS Fonts
In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
Generic Font Family Examples of Font Names

Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New

Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus
� CSS Box Model
� 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: content, padding, borders and margins. The image below
illustrates the box model:
� Explanation of the different parts:
• 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 Outline
� An outline is a line that is drawn around elements, OUTSIDE the borders, to
make the element "stand out".
CSS has the following outline properties:
•outline-style
•outline-color
•outline-width
•outline-offset
•outline
CSS Outline Style
The outline-style property specifies the style of the outline, and can have one of
the following values:
•dotted - Defines a dotted outline
•dashed - Defines a dashed outline
•solid - Defines a solid outline
•double - Defines a double outline
•groove - Defines a 3D grooved outline
•ridge - Defines a 3D ridged outline
•inset - Defines a 3D inset outline
•outset - Defines a 3D outset outline
•none - Defines no outline
•hidden - Defines a hidden outline
� CSS Links
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 mouses over it
•a:active - a link the moment it is clicked
� When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover
ADVANCE CSS
CSS Navigation Bar
� Navigation Bar = List of Links
� A navigation bar needs standard HTML as a base.
� A navigation bar is basically a list of links, so using
the <ul> and <li> elements makes perfect sense:
Horizontal Navigation Bar
� There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items

� One way to build a horizontal navigation bar is to specify the <li> elements as inline, in addition to the
"standard" code from the previous page:
Output:
Floating List Items
� Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
CSS Dropdowns
CSS Website Layout
� A website is often divided into headers, menus, content and a footer:
Header
� A header is usually located at the top of the website (or right below a top
navigation menu). It often contains a logo or the website name:
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)

output
Unequal Columns
� The main content is the biggest and the most important part of your site.
� It is common with unequal column widths, so that most of the space is reserved for the
main content. The side content (if any) is often used as an alternative navigation or to
specify information relevant to the main content. Change the widths as you like, only
remember that it should add up to 100% in total:
� Example
Footer
� The footer is placed at the bottom of your page. It often contains information
like copyright and contact info:
� Example
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
Image Sprites
� An image sprite is a collection of images put into a single image.
� A web page with many images can take a long time to load and generates
multiple server requests.
� Using image sprites will reduce the number of server requests and save
bandwidth.
� Instead of using three separate images, we use this single image
("img_navsprites.gif"):
All CSS Attribute Selectors
Selector Example Example description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target="_blank"] Selects all elements with target="_blank"
[attribute~=value] [title~="flower"] Selects all elements with a title attribute that contains a
space-separated list of words, one of which is "flower"
[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value starting
with "en"
[attribute^=value] a[href^="https"] Selects all <a> elements with a href attribute value
starting with "https"
[attribute$=value] a[href$=".pdf"] Selects all <a> elements with a href attribute value
ending with ".pdf"
[attribute*=value] a[href*=“GLBAJAJ"] Selects all <a> elements with a href attribute value
containing the substring “GLBAJAJ"
.
CSS Layout - float and clear

� The CSS float property specifies how an element should float.
� The CSS clear property specifies what elements can float beside the cleared element and
on which side
The float Property

The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.
The float property can have one of the following values:
•left - The element floats to the left of its container
•right - The element floats to the right of its container
•none - The element does not float (will be displayed just where it occurs in the
text). This is default
•inherit - The element inherits the float value of its parent
Output
The clear Property
When we use the float property, and we want the next element below (not on
right or left), we will have to use the clear property.
The clear property specifies what should happen with the element that is next
to a floating element.
The clear property can have one of the following values:
●none - The element is not pushed below left or right floated elements. This is
default
●left - The element is pushed below left floated elements
●right - The element is pushed below right floated elements
●both - The element is pushed below both left and right floated elements
●inherit - The element inherits the clear value from its parent
Output
CSS Layout - The display Property
The display Property
� The display property is used to specify how an element is shown on a web page.
� Every HTML element has a default display value, depending on what type of element it is. The default display value for most
elements is block or inline.
� The display property is used to change the default display behavior of HTML elements.
Block-level Elements
� A block-level element ALWAYS starts on a new line and takes up the full width available (stretches
out to the left and right as far as it can).
� The <div> element is a block-level element.
Examples of block-level elements:
• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
Inline Elements
� An inline element DOES NOT start on a new line and only takes up as much
width as necessary.
� This is an inline <span> element inside a paragraph.
� Examples of inline elements:
• <span>
• <a>
• <img>
Value Description
inline Displays an element as an inline element
block Displays an element as a block element
contents Makes the container disappear, making the child elements children of the
element the next level up in the DOM
flex Displays an element as a block-level flex container
grid Displays an element as a block-level grid container
inline-block Displays an element as an inline-level block container. The element itself is
formatted as an inline element, but you can apply height and width values
inline-flex Displays an element as an inline-level flex container

inline-grid Displays an element as an inline-level grid container
inline-table The element is displayed as an inline-level table
list-item Let the element behave like a <li> element
run-in Displays an element as either block or inline, depending on context
table Let the element behave like a <table> element
table-caption Let the element behave like a <caption> element
table-column-group Let the element behave like a <colgroup> element
table-header-group Let the element behave like a <thead> element
table-footer-group Let the element behave like a <tfoot> element
table-row-group Let the element behave like a <tbody> element
table-cell Let the element behave like a <td> element
table-column Let the element behave like a <col> element
table-row Let the element behave like a <tr> element
none The element is completely removed
initial Sets this property to its default value
inherit Inherits this property from its parent element
CSS Layout - The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
•static
•relative
•fixed
•absolute
•Sticky
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:
This <div> element has position: static;
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by
the element.
position: fixed;
An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.
A fixed element does not leave a gap in the page where it would normally have been located.
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling.

Unit 2

Uploaded by

Copyright:

Available Formats

Unit 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 2

Uploaded by

Copyright:

Available Formats

Subject : Web Technology

Subject Code: BCS 502

� The selector points to the HTML element you want to style.

1. CSS Element Selector

� There are three types of CSS which are given below:

Color Name Hex(RGB) Decimal(RGB)

Red FF0000 255, 0, 0

Pink FFC0CB 255, 192, 203

Orange FFA500 255, 165, 0

Yellow FFFF00 255, 255, 0

Violet EE82EE 238, 130, 238

Green 008000 0, 128, 0

Aqua 00FFFF 0, 255, 255

Blue 0000FF 0, 0, 255

Brown A52A2A 165, 42, 42

White FFFFFF 255, 255, 255

Gray 808080 128, 128, 128

4. Cursive fonts imitate human handwriting.

5. Fantasy fonts are decorative/playful fonts.

Generic Font Family Examples of Font Names

Monospace Courier New

• Margin - Clears an area outside the border. The margin is transparent

Inline List Items

• 1-column (often used for mobile browsers)

• 2-column (often used for tablets and laptops)

• 3-column layout (only used for desktops)

[attribute=value] [target="_blank"] Selects all elements with target="_blank"

CSS Layout - float and clear

The float Property

inline-flex Displays an element as an inline-level flex container

You might also like