Scribd
Upload
8 views98 pages

Introduction to CSS Basics and Syntax

css

Uploaded by

priyanka.bhardwaj
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
8 views98 pages

Introduction to CSS Basics and Syntax

css

Uploaded by

priyanka.bhardwaj
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

UNIT -2

CSS: Cascading Style Sheet

LECTURE-9

2.1 Cascading Style Sheet, fondly referred to as CSS, is a simple design language intended
to simplify the process of making web pages presentable.

2.1.1 What is CSS?

Cascading Stylesheet: CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

2.1.2 Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.

2.1.3 Where?

To style web pages.

CSS allows control over the presentation and styling of HTML documents.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations in display for different
devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation
of an HTML document. Most commonly, CSS is combined with the mark-up languages
HTML or XHTML.

2.1.4 Advantages of CSS

∙ CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and apply
it to as many Web pages as you want.
∙ Pages load faster − If you are using CSS, you do not need to write HTML
tag ,attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download times.

66
∙ Easy maintenance − To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.
∙ Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
∙ Multiple Device Compatibility − Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.
∙ Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML ages to make them compatible to future browsers.

2.1.5 Who Creates and Maintains CSS?


CSS invented by Håkon Wium Lie on October 10, 1994, and maintained by a group of people
within the W3C called the CSS Working Group. The CSS Working Group creates documents
called specifications. When a specification has been discussed and officially ratified by W3C
members, it becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no control over
the actual implementation of the language. Independent companies and organizations create that
software.

NOTE − The World Wide Web Consortium, or W3C is a group that


makes recommendations about how the Internet works and how it should evolve.

2.1.6 CSS Syntax:

A CSS rule consists of a selector and a declaration block.

CSS Syntax

67
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.

2.2 Three Ways to Insert CSS

There are three ways of inserting a style sheet:

● External CSS
● Internal CSS
● Inline CSS

2.2.1 External CSS

With an external style sheet, you can change the look of an entire website by changing just one
file!

Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>

<h1>Welcome to designing.</h1>
<p> An external style sheet can be written in any text editor, and must be saved with a .css
extension.<br>

The external .css file should not contain any HTML tags

68
.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "[Link]" file looks:

"[Link]"

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;

Output:

69
Figure 2.1 External CSS

2.2.2 Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;

70
}
</style>
</head>
<body>

<h1>Welcome to designing.</h1>
<p> An external style sheet can be written in any text editor, and must be saved with a .css
extension.<br>

The external .css file should not contain any HTML tags

.</p>

</body>
</html>
Output:

Figure 2.2 Internal CSS

2.2.3 Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain
any CSS property.

Example

71
Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>
Output:

Figure 2.3 Heading Tag


Note: Inline CSS has the highest priority, then comes Internal/Embedded followed
by External CSS which has the least priority. Multiple style sheets can be defined on
one page. If for an HTML tag, styles are defined in multiple style sheets then the
below order will be followed.
As Inline has the highest priority, any styles that are defined in the internal and
external style sheets are overridden by Inline styles.
Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.

72
External style sheets have the least priority. If there are no styles defined either in
inline or internal style sheet then external style sheet rules are applied for the HTML
tags.

LECTURE-10

2.3 CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

● Simple selectors (select elements based on name, id, class)


● Combinator selectors (select elements based on a specific relationship between them)
● Pseudo-class selectors (select elements based on a certain state)
● Pseudo-elements selectors (select and style a part of an element)
● Attribute selectors (select elements based on an attribute or attribute value)

2.3.1 Simple selectors:

Select element to style on the basis of the name of tag select .In below example ,we
select a <p>(para tag) on which apply the CSS properties.

Example:

p{
text-align: center;
color: red;
}

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

73
color: red;

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Output:

Every paragraph will be affected by the style.


Me too!

And me!

[Link] CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique
element!
To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
#para1 {
text-align: center;
color: red;
}

74
<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Output: Hello World!

This paragraph is not affected by the style.

[Link] Class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

75
.center {
text-align: center;
color: blue;
}
Output:

Figure 2.4 Center Text

[Link] CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

*{
text-align: center;
color: blue;
}

Output:

76
Figure 2.5 All center text

[Link] CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Example

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}
Output:

77
Figure 2.6 Grouping Selector

2.3.2 CSS Combinators


• A combinator is something that explains the relationship between the selectors.
• A CSS selector can contain more than one simple selector. Between the
simple selectors, we can include a combinator.
There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

[Link]. Descendent Selectors: This Selector targets both direct and indirect children of a parent
tag. The symbol is (space)
Syntax: parent_tag child_tag{property: value;}

[Link]. Child Selectors: This Selector targets the only the direct children of the parent tag. The
symbol is > (greater than)
Syntax: parent_tag > child_tag{property: value;}

[Link]. Adjacent Selectors: This Selector targets the element which is the first sibling of the
targeted HTML tag or element.
This Selector targets the element which is exactly adjacent to the targeted HTML tag or element.
The symbol is + (plus)

78
Syntax: parent_tag + target_tag{property: value;}

[Link]. General Sibling Selectors: This Selector targets all the siblings of the target HTML tag
or element.
This Selector targets all the adjacent tags of the target HTML tag or element.
The symbol is ~ (tilde)
Syntax: parent_tag ~ target_tag{property: value;}

LECTURE-11

2.4 CSS Properties


CSS Properties: A CSS property declaration consists of a property name and a property value.
The property name comes first, then a colon, and then the value. Here is the general pattern a
CSS property declaration follows:

1. property-name: property-value

2.4.1 CSS Styling

[Link] Background: background property is a shorthand property for:

Background Property Description

CSS Background-color The background-color property in CSS is used to specify the


Property background color of an element.

CSS Background-image The background-image property is used to set one or more


Property background images to an element.

CSS Background-repeat The background-repeat property in CSS is used to repeat the


Property background image both horizontally and vertically.

The background-attachment property in CSS is used to specify the


CSS Background-
kind of attachment of the background image with respect to its
attachment Property
container.

CSS Background- In CSS body-position property is mainly used to set an image at a


position Property certain position.

CSS Background-origin The background-origin is a property defined in CSS which helps in


Property adjusting the background image of the webpage.

CSS Background-clip The background-clip property in CSS is used to define how to extend
Property the background (color or image) within an element.

Syntax for background-color:

79
background-color: color name
Example: background-color:red;

background-image:

Syntax: background-image :url(“image path”);

Example:
background-image: url('img_tree.gif'), url('[Link]');
background-image: conic-gradient(red, yellow, green);

background-position

● background-position: left top;


● background-position: left center;
● background-position: left bottom;
● background-position: right top;
● background-position: right center;
● background-position: right bottom;
● background-position: center top;
● background-position: 10% 40%;
● background-position: 50px 100px;

background-size

● background-size: auto;
● background-size: contain;
● background-size: cover;
● background-size: 50%;
● background-size: 30px;
● background-size: 60px;

background-repeat

80
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

background-origin

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

Example:

<!DOCTYPE html>

<html>

<head>

<style>

#myDIV {

height:200px;

border: 10px dashed black;

padding: 25px;

background-origin: border-box;

</style>

</head>

81
<body>

<h1>The background-origin Property</h1>

<div id="myDIV">

This demo shows how to specify where the background image should be positioned.

</div>

</body>

</html>

background-clip

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

[Link] Text Format: CSS Text Formatting refers to applying styles to text elements to control
appearance and layout. This includes properties for color, alignment, decoration, indentation,
justification, shadows, spacing, and direction. These properties enhance readability and aesthetics,
improving the presentation of textual content on web pages.

Property Description
text-color Sets the color of the text using color name, hex value, or RGB value.
text-align Specifies horizontal alignment of text in a block or table-cell element.
text-align-last Sets alignment of last lines occurring in an element.
text-decoration Decorates text content.
text-decoration-color Sets color of text decorations like overlines, underlines, and line-throughs.
text-decoration-line Sets various text decorations like underline, overline, line-through.
text-decoration-style Combines text-decoration-line and text-decoration-color properties.
text-indent Indents first line of paragraph.
text-justify Justifies text by spreading words into complete lines.
text-overflow Specifies hidden overflow text.

82
Property Description
text-transform Controls capitalization of text.
text-shadow Adds shadow to text.
letter-spacing Specifies space between characters of text.
line-height Sets space between lines.
direction Sets text direction.
word-spacing Specifies space between words of line.

[Link] Text Color

The color property is used to set the color of the text. The color is specified by:

● a color name - like "red"


● a HEX value - like "#ff0000"
● an RGB value - like "rgb(255,0,0)"

[Link] 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.

Property Description
direction Specifies the text direction/writing direction
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text
Used together with the direction property to set or return whether
unicode-bidi the text should be overridden to support multiple languages in the
same document
vertical-align Sets the vertical alignment of an element

[Link] Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.

[Link] CSS Text Spacing Properties

Property Description
letter-spacing Specifies the space between characters in a text
line-height Specifies the line height
text-indent Specifies the indentation of the first line in a text-block
white-space Specifies how to handle white-space inside an element

83
word-spacing Specifies the space between words in a text

Example: <!DOCTYPE html>


<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Advanced Text Formatting</title>
<style>
.text-color {
color: blue;
}

.text-align-center {
text-align: center;
}

.text-decoration {
text-decoration: underline;
}

.text-indent {
text-indent: 20px;
}

.letter-spacing {
letter-spacing: 2px;
}

.line-height {
line-height: 1.5;
}

.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.text-transform {
text-transform: uppercase;
}

.word-spacing {

84
word-spacing: 5px;
}

.text-direction {
direction: rtl;
}
</style>
</head>

<body>
<p class="text-color">Changing Text Color</p>
<p class="text-align-center">Aligning Text</p>
<p class="text-decoration">Adding Text Decoration</p>
<p class="text-indent">Setting Text Indentation</p>
<p class="letter-spacing">Adjusting Letter Spacing</p>

<p class="line-height">Changing Line Height</p>


<p class="text-shadow">Applying Text Shadow</p>
<p class="text-transform">Controlling Text Transformation</p>
<p class="word-spacing">Setting Word Spacing</p>
</body>

</html>

OUTPUT:

85
Figure 2.7 Align Text

[Link] Controlling Fonts:

[Link].1 Generic Font Families

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.

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.p1 {

font-family: "Times New Roman", Times, serif;

.p2 {

font-family: Arial, Helvetica, sans-serif;

.p3 {

font-family: "Lucida Console", "Courier New", monospace;

86
}

</style>

</head>

<body>

<h1>CSS font-family</h1>

<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>

<p class="p2">This is a paragraph, shown in the Arial font.</p>

<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>

</html>

OUTPUT:

87
Figure 2.8 Font family

2.4.2 Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some
space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right
as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

88
The <p> element is a block-level element.

The <div> element is a block-level element.


Example:
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>

<h1>HTML DIV Example</h1>

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>

</body>
</html>

OUTPUT:

89
Figure 2.9 Div Example

block-level elements in HTML:

<address> <article> <aside> <blockquote> <canvas> <dd> <div>


<dl> <dt> <fieldset> <figcaption>
<figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p>
<pre> <section> <table> <tfoot> <ul> <video>

2.4.3 Inline Elements

An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

90
This is a <span> element inside a paragraph.

<!DOCTYPE html>

<html>

<body>

<h1>The span element</h1>

<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father


has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>

</body>

</html>

OUTPUT: The span element


My mother has blue eyes and my father has dark green eyes.

inline elements in HTML:

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i>
<img> <input> <kbd> <label> <map>
<object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub>
<sup> <textarea> <time> <tt> <var>

91
LECTURE-12

2.5 Working with Lists and Tables

2.5.1 CSS for list:

[Link] CSS-List Properties


The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
[Link] Syntax:

List-style-type:type name;

Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style Specifies the position of the list-item markers (bullet points)


position

list-style-type Specifies the type of list-item marker

Example:

<!DOCTYPE html>
<html>
<head>

92
<style>
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>

<h2>The list-style-type Property</h2>

<p>Example of unordered lists:</p>


<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>


<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>

<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>

93
</ol>

</body>
</html>

Figure 2.10 List style


2.5.2 CSS Tables
[Link] How To Add a Border

When you add a border to a table, you also add borders around each table cell:

94
[Link].1 Table Border

To specify table borders in CSS, use the border property.

To add a border, use the CSS border property on table, th, and td elements:

table, th, td {
border: 1px solid black;
}

[Link].2. Full –Width Table

Eg:-
table {
width: 100%;
}

[Link].3. Collapse Table Border:-

To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.

This will make the borders collapse into a single border:

Eg:-
table {

border-collapse: collapse;

[Link] CSS Table Size


The width and height of a table are defined by the width and height properties.

95
Eg:-
table {
width: 100%;
}

th {
height: 70px;
}

[Link] CSS Table Alignment


The text-align property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>.
Eg:-
td {
text-align: center;
}
th {
text-align: left;
}

The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
Eg:-
td {
height: 50px;
vertical-align: bottom;
}

[Link] CSS Table Style


[Link].1. Table Padding :- To control the space between the border and the content
in a table, use the padding property on <td> and <th> elements.
Eg:-
th, td {
padding: 15px;
text-align: left;
}

96
[Link].1.2. border-bottom:- Add the border-bottom property to <th> and <td> for
horizontal dividers. Eg:-
th, td {
border-bottom: 1px solid #ddd;
}

[Link] Table Color

Eg:-
th {
background-color: #04AA6D;
color: white;
}
[Link] CSS Table Properties
Property Description

border Sets all the border properties in one declaration

border- Specifies whether or not table borders should be collapsed


collapse
Specifies the distance between the borders of adjacent cells
border-
spacing Specifies the placement of a table caption

caption-side Specifies whether or not to display borders and background on empty cells in
a table
empty-cells Sets the layout algorithm to be used for a table

table-layout
Internal css in table
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

97
th, td {
background-color: #96D4D4;
border-radius: 10px;
padding: 15px;
border-spacing: 30px;
}

Example:

!DOCTYPE html>

<html>

<head>

<style>

body

border:1px solid red;

background-color:aqua;

table {

border-collapse: collapse;

width: 100%;

border:2px soild red;

th, td {

98
border:2px soild red;

text-align: left;

padding-top: 10px;

padding-bottom: 20px;

padding-left: 30px;

padding-right: 40px;

tr:nth-child(even) {

background-color: #D6EEEE;

</style>

</head>

<body>

<h2>Zebra Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even
(or odd) table rows:</p>

<table>

<tr>

<th>First Name</th>

99
<th>Last Name</th>

<th>Points</th>

</tr>

Figure 2.11 Zebra Stripped Table

2.6 CSS Id and Class:

2.6.1 Class Attribute: The HTML class attribute is used to specify a class for an HTML
element.
Multiple HTML elements can share the same class.
<!DOCTYPE html>
<html>

100
<head>
<style>
.city1,.city3{
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.city2
{ background-color: lightpink;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
body
{
Background-color:aqua;
Border :5px solid red;
}
</style>
</head>
<body>

<div class="city1">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

<div class="city2">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>

<div class="city3">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

101
Figure 2.12 Class Attribute
2.6.2 ID element: he HTML id attribute is used to specify a unique id for an HTML element.
You cannot have more than one element with the same id in an HTML document.
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;

102
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>
The HTML <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current HTML document.
Syntax:
<iframe src="url" title="description"></iframe>

Example:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Iframes</h2>
<p>You can also use the CSS height and width properties to specify the size of the iframe:</p>

<iframe src="demo_iframe.htm" style="height:200px;width:300px" title="Iframe


Example"></iframe>

</body>
</html>

103
LECTURE-13

2.7 The 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

Figure 2.13 Box Model

Example:
<!DOCTYPE html>
<html>
<head>

104
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 100px;
margin: 50px;
}
</style>
</head>
<body>

<h2>Demonstrating the Box Model</h2>

<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>

<div>This text is the content of the box. We have added a 50px padding, 20px margin and a
15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

105
Figure 2.14 Box Model example

2.7.1 Border properties:


The CSS border properties allow you to specify the style, width, and color of an element's
border.

The border-style property specifies what kind of border to display.

The following values are allowed:

● dotted - Defines a dotted border


● dashed - Defines a dashed border
● solid - Defines a solid border
● double - Defines a double border
● groove - Defines a 3D grooved border. The effect depends on the border-color value
● ridge - Defines a 3D ridged border. The effect depends on the border-color value
● inset - Defines a 3D inset border. The effect depends on the border-color value
● outset - Defines a 3D outset border. The effect depends on the border-color value

106
● none - Defines no border
● hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Example:

<!DOCTYPE html>

<html>

<head>

<style>

[Link] {border-style: dotted;}

[Link] {border-style: dashed;}

[Link] {border-style: solid;}

[Link] {border-style: double;}

[Link] {border-style: groove;}

[Link] {border-style: ridge;}

[Link] {border-style: inset;}

[Link] {border-style: outset;}

[Link] {border-style: none;}

[Link] {border-style: hidden;}

[Link] {border-style: dotted dashed solid double;}

</style>

</head>

<body>

107
<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

108
Figure 2.15 Border Types

109
2.7.2 CSS Border Width

The border-width property specifies the width of the four borders.


The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-
defined values: thin, medium, or thick:
Syntax

border-width:size;
Example:

border-width: 5px;

2.7.3 CSS Border Color

The border-color property is used to set the color of the four 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)"
● HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
● transparent

Syntax:
Border-color:color name;

The border property is a shorthand property for the following individual border properties:

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

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Property Description

110
border-radius A shorthand property for setting all the four border-*-*- radius
properties

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


radius

border-top-right- Defines the shape of the border of the top-right corner


radius

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

2.7.4 Padding Properties:


Padding is used to create space around an element's content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

● padding-top
● padding-right
● padding-bottom
● padding-left

Syntax: padding:top right bottom left;


Example;
padding: 25px 50px 75px 100px;

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;

111
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of
50px, and a left padding of 80px.</div>

</body>
</html>

2.7.5 Margin:
Margins are used to create space around elements, outside of any defined borders.

CSS has properties for specifying the margin for each side of an element:

● margin-top
● margin-right
● margin-bottom
● margin-left

If the margin property has four values:

● margin: 25px 50px 75px 100px;


o top margin is 25px
o right margin is 50px
o bottom margin is 75px
o left margin is 100px

If the margin property has three values:

● margin: 25px 50px 75px;


o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

If the margin property has two values:

● margin: 25px 50px;


o top and bottom margins are 25px
o right and left margins are 50px

112
LECTURE-14

2.8 CSS Advanced :

2.8.1Grouping
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grouping Selector in CSS</title>
<style>
div, article {
background-color: #04af2f;
color: white;
text-align: center;
font-size: 20px;
}
#id1, #id2 {
padding: 5px;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>
Grouping Selector in CSS
</h2>
<p><strong>
In this example, both div and article
element have same background-color, text
color and aligned to center using
grouping selector.
</strong></p>
<div>
This is a div element
</div>
<br>

113
<article>
This is an article element.
</article>
<p><strong>
In this example, both h4 and span
element have same padding, and
border properties using grouping
selector.
</strong></p>
<h4 id="id1">
This h4 element has padding and border
properties.
</h4>
<span id="id2">
This span element also has padding and
border properties.
</span>
</body>
</html>
Output:

Figure 2.16 Grouping Selector

114
2.8.2 Dimension

CSS dimension define the size and space occupied by elements on a webpage. The dimension
properties like height, width, max-height, max-width, line-height and many more are used to
define width, height of HTML elements in every screen sizes. In this tutorial we will learn how
to manage dimension and layout of HTML elements in varying screen sizes.

[Link] CSS Setting height and width

The height and width properties allow you to set specific height and width for your positioned
element.

These properties can hold following values:

● length: Any unit of length (px, pt, em, in, etc.)


● percentage (%): A percentage value, which is in percent height/width of the containing
block.
● auto: Browser calculates the height and width of the element. (For example setting height
automatically to match aspect ratio of image for the specified width)
● initial: Sets the value of height and width to its default value.
● inherit: Inherits the value of height and width from its parent value.

<!DOCTYPE html>
<html>

<head>
<style>
div {
height: 100px;
width: 80%;
background-color: aqua;
}
img{
height: auto;
width: 180px;
}
</style>
</head>

<body>
<h1>Height and Width Property</h1>
<h2>Length and percentage values</h2>
<div>

115
This div element has a height of 50px and a width
of 80%.
</div>

<h2>Auto value</h2>
<img src="[Link] "/>
<br>
Height is this image adjusted for width 180px so that
aspect ratio is maintained.
</body>
</html>

Figure 2.17 Height and width property

LECTURE-15

116
2.8.3 Display

The CSS display property specifies an element’s display behavior (the type of rendering box). It
defines how an element is rendered in the layout, determining its positioning and interaction within
the document’s flow and structure.

[Link] Syntax:

display: value;

[Link] Display Property Values:

Value Description
inline It is used to display an element as an inline element.
block It is used to display an element as a block element
contents It is used to disappear the container.
flex It is used to display an element as a block-level flex container.
grid It is used to display an element as a block-level grid container.
inline-block It is used to display an element as an inline-level block container.
inline-flex It is used to display an element as an inline-level flex container.
inline-grid It is used to display an element as an inline-level grid container.
inline-table It is used to display an inline-level table
list-item It is used to display all the elements in <li> element.
It is used to display an element inline or block level, depending on the
run-in
context.
table It is used to set the behavior as <table> for all elements.
table-caption It is used to set the behavior as <caption> for all elements.
table-column-
It is used to set the behavior as <column> for all elements.
group
table-header-group It is used to set the behavior as <header> for all elements.
table-footer-group It is used to set the behavior as <footer> for all elements.
table-row-group It is used to set the behavior as <row> for all elements.
table-cell It is used to set the behavior as <td> for all elements.
table-column It is used to set the behavior as <col> for all elements.
table-row It is used to set the behavior as <tr> for all elements.
none It is used to remove the element.
initial It is used to set the default value.
inherit It is used to inherit property from its parents’ elements.

Example:
<!DOCTYPE html>

117
<html>
<head>
<style>
li {
display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
<li><a href="/html/[Link]" target="_blank">HTML</a></li>
<li><a href="/css/[Link]" target="_blank">CSS</a></li>
<li><a href="/js/[Link]" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Figure 2.18 Table output

2.8.4 Positioning

The position property specifies the type of positioning method used for an element.

There are five different position values:

● static
● relative

118
● fixed
● absolute
● sticky

HTML elements are positioned static by default.

[Link] Static : 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.

Syntax: postion:static;

This <div> element has position: static;


[Link] 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.
Syntax: position: fixed;
[Link] 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.

Syntax: position :relative;


[Link] 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.
Synatx: position:absolute;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {

119
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
background-image:url("[Link]");
}

[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;


<div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

120
Figure 2.19 Position :absolute

2.8.5 Floating

The float property specifies whether an element should float to the left, right, or not at all.

Syntax:

float: none|left|right|initial|inherit;

<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>

121
<h1>The float Property</h1>

<p>In this example, the image will float to the left in the text, and the text in the paragraph will
wrap around the image.</p>

<p><img src="[Link]" alt="Pineapple" style="width:170px;height:170px;margin-


right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum
interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus
interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida
venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>
2.8.6 Align

CSS alignment refers to the positioning and distribution of elements within their container using
CSS. It controls how content is laid out horizontally and vertically.

[Link] Methods of Aligning in CSS:

[Link] 1. Center Align Using Margin:

The margin: auto property centers a block element horizontally.

Note: Using margin: auto will not work in IE8 unless a !DOCTYPE is declared.

Example 1: This example describes the CSS align using the margin: auto property.

<!DOCTYPE html>
<html>

<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}

122
</style>
</head>

<body>
<h1 style="color:green;">
Welcome to designing interface
</h1>
<h2>Center Align Elements</h2>
<div class="center">
This is div element on which
margin auto is used to horizontally
align it into center
</div>
</body>

</html>

Output:

[Link].2. Align Using Position:

The position: absolute property aligns elements relative to their containing block.

Note: The position properties top, bottom, left, and right will not work unless the position
property is set first.

Example 2: This example describes the CSS align using the position: absolute; property.

<!DOCTYPE html>
<html>

<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>

<body>

123
<h1 style="color:green;">
Welcome to designing interface
</h1>
<h2>Right Align</h2>
<div class="right">
<p>
Absolute positioned elements
can overlap other elements.
</p>
</div>
</body>

</html>

Output:

[Link].3. Text Align:

The text-align: center property centers text within its container

Example 3: This example describes the CSS align using the text-align: center; property.

<!DOCTYPE html>
<html>

<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>

<body>
<h1 style="color:green;
text-align: center;">
Welcome to designing interface </h1>
<h2>BOTH TEXTS ARE AT CENTER</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>

124
</html>

[Link].4. Vertical Align Using Padding:

The padding property can be used to center elements vertically.

Example 4: This example describes the CSS align using the padding property.

<!DOCTYPE html>
<html>

<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>

<body>
<h1 style="color:green;
text-align:center;">
Welcome to designing interface
</h1>
<h2>Center Vertically</h2>
<div class="center">
<p>This is vertically centered.</p>
</div>
</body>

</html>

Output:

[Link].5. Combined Vertical and Horizontal Align:

Combining padding and text-align: center to center elements both vertically and horizontally.

Example 5: This example describes the CSS align using the padding & text-align properties.

<!DOCTYPE html>

125
<html>

<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>

<body>
<h1 style="color:green;">
Welcome to designing interface
</h1>
<p>
Here we use padding and
text-align to center the
div element vertically
and horizontally:
</p>

<div class="center">
<p>
This text is vertically
and horizontally centered.
</p>
</div>
</body>

</html>
Center an Image:

To center an image, set left and right margin to auto and make it into a block element:
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>

126
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="[Link]" alt="Paris" style="width:40%">

</body>
</html>

Another method for aligning elements is to use the float property:


Syntax: float:position
float: right;

[Link] clearfix :

If an element is taller than the element containing it, and it is floated, it will overflow outside of
its container. You can use the "clearfix hack" to fix this (see example below).

Figure 2.20 Clearfix


!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}

.img1 {
float: right;

127
}

.img2 {
float: right;
}

.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it
overflows outside of its container:</p>

<div>
<img class="img1" src="[Link]" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>


<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
<img class="img2" src="[Link]" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>

LECTURE-16

2.9 Pseudo class

2.9.1What A pseudo-class is used to define a special state of an element.

A pseudo-class can be defined as a keyword which is combined to a selector that defines the
special state of the selected elements.

128
2.9.2 Why It is added to the selector for adding an effect to the existing elements based on their
states. For example, The ":hover" is used for adding special effects to an element when the user
moves the cursor over the element.

2.9.3 Where

For example, it can be used to:

● Style an element when a user mouse over it


● Style visited and unvisited links differently
● Style an element when it gets focus

2.9.4 Syntax:

selector:pseudo-class {
property: value;
}

2.9.5 Type of Pseudo Class:

1. Dynamic Pseudo Classes.


2. Structural Pseudo Classes.

[Link] Dynamic Pseudo Classes


 Link
 Visited
 Hover
 Active
 Focus

[Link] Structural Pseudo Classes


 First-child
 Last-child
 Nth-child
 First-of-type
 Last-of-type

[Link] Dynamic Pseudo Classes


Pseudo Class Selector specifies the special state of the content.
The Pseudo Class Selector are:
1. Link

129
2. Visited
3. Hover
4. Active
5. Focus
o Each dynamic pseudo class selector is declared with the single colon :
o Link, Visited only applicable for anchor tag.
o Link is used to style the unvisited link
o Link doesn’t style the already visited link.
o Active applies the style at the time of click event.
o Hover is applicable for all the HTML elements.
o Focus styles when the element is focused.
o Focus selector is applicable for <a> tag and also for the elements which takes user input
that is for <input> and textarea> tag.
o While using all the Link, Visited, Hover and Active selectors. Hover should be declared
after Link and Visited. Along with that the Active should be declared after Hover,
because to make the elements effective.

Example:
a : link {
color: aqua;
background-color : red;
}

a : visited {
color : green;
}

a : hover {
color : yellow;
}

a : active {
color : chocolate;
}

input : focus{
color : red;
background-color : yellow;
}

[Link] Structural Pseudo Classes: The Structural Pseudo Class selectors is used to target the
combination of the HTML elements and to style them.
1. First-child
2. Last-child
3. Nth-child
4. First-of-type

130
5. Last-of-type

[Link].1 First-child: The First-child pseudo class selector targets the first child element of the
targeted parent.
Example: div p : first-child{
color: red;
background-color: yellow;
}

[Link].2 Last-child: The Last-child pseudo class selector targets the last child element of the
targeted parent.
Example: div p : last-child{
color: red;
background-color: yellow;
}

[Link].3 Nth-child: The nth-child( ) pseudo class selector targets the elements according to the
argument passed.
Example: div p : nth-child(2){
color: red;
background-color: yellow;
}

[Link].4 First-of-type: The first-of-type pseudo class selectors targets the first element of the
input type.
The input type should be the first type of all the input types.
It also behaves as first-child selector.
It is applicable for text, submit, reset, button.
It is not applicable for radio, checkbox, textarea,.. so on.
Example: input : first-of-type{
color: red;
background-color: yellow;
}

[Link].5 Last-of-type: The Last-of-type pseudo class selectors targets the last element of the
input.
The input type should be the last type of all the input types.
It also behaves as last-child selector.
It is applicable for text, submit, reset, button.
It is not applicable for radio, checkbox, textarea,.. so on.
Example: input : last-of-type{
color: red;
background-color: yellow;
}

131
[Link].6 Nth-of-type: The nth-of-type pseudo class selectors targets all the element of the input
type.
It also behaves as nth-child selector.
It is applicable for text, submit, reset, button.
It is not applicable for radio, checkbox, textarea,.. so on.
Example: input : nth-of-type(n){
color: red;
background-color: yellow;

Example:

<!DOCTYPE html>

<html>

<head>

<style>

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

132
}

/* selected link */

a:active {

color: blue;

</style>

</head>

Example:

<html>

<head>

<style>

p{

display: none;

background-color: yellow;

padding: 20px;

div:hover p {

display: block;

</style>

</head>

133
<body>

<div>Hover over this div element to show the p element

<p>Tada! Here I am!</p>

</div>

</body>

</html>

2.10 Pseudo Element Selectors:


Pseudo Elements targets the content of the HTML element by the following ways:
1. First Letter
2. First Line
3. Before
4. After
5. Selection
6. Marker

Each pseudo element selectors is declared with the double colon : :

2.10.1 First Letter: The first letter styles the very first letter of the content in the targeted
HTML element.
Example: p : : first-letter{
font-size: 30px;
color: black;

134
}

2.10.2 First Line: The first line styles the very first line of the content in the targeted HTML
element.
Example: p : : first-line{
background-color: black;
color: white;
}

2.10.3 Before: The before pseudo element is used to place the specific content before the
targeted HTML element.
Example: p : : before{
content: “&phone”;
background-color: black;
color: white;
}

2.10.4 After: The after pseudo element is used to place the specific content after the targeted
HTML element.
Example: p : : after{
content: “Thank You”;
color: blue;
}

2.10.5 Selection: The selection pseudo element is used to style the content when the cursor is
dragged on the content (when the content is selected) on the targeted
HTML element.
Also copying the text content from the user can also be disabled, by using the property user-
select: none.
Example: p : : selection{
background-color: pink;
color: magenta;
}

2.10.6 Marker: Marker pseudo element is used to style the lists in the HTML document.
Marker is only used to style the list type not the content.
Declaration of selector is not mandatory here.
Background color will not work for Marker.
Example: li : : marker{
color: red;
font-size: 30px;
}

2.11 Navigation Bar

135
A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect
sense:
<!DOCTYPE html>
<html>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<p>Note: We use href="#" for test links. In a real web site this would be URLs.</p>

</body>
</html>
Example for horizontal navigation
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

li {
display: inline;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

136
Figure 2.21 Marker

2.12 Image Sprites


2.12.1 What 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.

2.12.2 Why
Using image sprites will reduce the number of server requests and save bandwidth.

2.12.3 Where
In navigation bar
Example;

137
!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}

#next {
width: 43px;
height: 44px;
background: url(img_navsprites.gif) -91px 0;
}
</style>
</head>
<body>

<img id="home" src="img_trans.gif" width="1" height="1">


<img id="next" src="img_trans.gif" width="1" height="1">

</body>
</html>

2.13 Attribute selector:

2.13.1 What
This selector selects elements that have specified attribute, regardless of its value or type of
element.

[Link] Syntax

[attribute]{
property: value;
}

138
The [attribute] selector is used to select elements with a specified attribute.
The following example selects all <a> elements with a target attribute:

<!DOCTYPE html>

<html>

<head>

<style>

a[target] {

background-color: yellow;

</style>

</head>

<body>

<h2>CSS [attribute] Selector</h2>

<p>The links with a target attribute gets a yellow background:</p>

<a href="[Link]

<a href="[Link] target="_blank">[Link]</a>

<a href="[Link] target="_top">[Link]</a>

</body>

</html>

Output:

139
Figure 2.22 attribute selector

2.13.2 Why

Attribute selectors offer several advantages:

● Flexibility: You don't have to rely on classes or IDs. You can style elements based on
any attribute they have, which can be especially useful when working with elements like
links, form inputs, or images.
● Semantics: They can be more semantically meaningful. For example, styling all links
with href attributes or styling all image elements based on their alt attributes makes your
CSS more logical and accessible.
● Target Specific Elements: You can target a subset of elements that share a common
attribute without needing to add extra markup. This is useful when working with
dynamically generated content or third-party libraries where you can't modify the HTML
directly.
● Avoid Overuse of Classes: Instead of cluttering the markup with additional classes just
for styling, you can leverage attributes to avoid redundant or unnecessary classes in your
HTML.

140
2.13.3 Where

HTML Elements with Attributes

Forms

Responsive design

2.13.4 Types of Selector:

Selector Example Description


Matches elements with an attr attribute (whose
[attr] a[title]
name is the value in square brackets).
Matches elements with an attr attribute whose value
[attr=value]
a[href="[Link] is exactly value — the string inside the quotes.

Matches elements with an attr attribute whose value


[attr~=value] p[class~="special"] is exactly value, or contains value in its (space
separated) list of values.

Matches elements with an attr attribute whose value


[attr|=value] div[lang|="zh"] is exactly value or begins with value immediately
followed by a hyphen.

[Link] CSS [attribute="value"] Selector

This selector selects elements that have a specific attribute with a specific value.

Syntax

[attribute="value"]{
property: value;
}

Example

This selector selects all elements with a 'data-toggle' attribute whose value is set to 'yes'.
Open Compiler

<!DOCTYPE html>
<html>

141
<head>
<style>
[data-toggle="yes"] {
background: lightgray;
padding: 10px;
color: black;
}
</style>
</head>

<body>
<div data-toggle="yes">
The div with data-toggle="yes" attribute
</div>
<div>
The div without data-toggle attribute
</div>
<p data-toggle="no">
A paragraph with data-toggle="no" attribute
</p>
<p>
A paragraph without data-toggle attribute
</p>
</body>

</html>

2.13.4.2CSS [attribute*="value"] Selector

This selector selects elements that have a specific attribute with a value containing a specific
substring.

Syntax

[attribute*="value"]{
property: value;
}

Example

This selector selects all the elements with a "src" attribute which contain an "css" in the path:
Open Compiler

<!DOCTYPE html>
<html>

142
<head>
<style>
img{
height: 50px;
width: 150px;
}
[src*="css"] {
border: 2px solid;
}
</style>
</head>

<body>
<p>
Style applied to src attribute containing string 'css' in it
</p>
<img alt="Logo" src = "/css/images/[Link]" />
<img alt="Logo" src = "/html/images/[Link]" />
</body>

</html>

[Link] CSS [attribute^="value"] Selector

This selector selects elements that have a specific attribute with a value that starts with a specific
string.

Syntax

[attribute^="value"]{
property: value;
}

Example

This selector selects all elements with a "href" attribute starting with "[Link]

<html>

<head>
<style>
[href^="https"] {
background: lightgray;
color:black;

143
}
</style>
</head>

<body>
<a href="[Link] Link</a>
<br> <br>
<a href="[Link] Link</a>
</body>

</html>

[Link] CSS [attribute$="value"] Selector

This selector selects elements that have a specific attribute with a value that ends with a specific
string.

Syntax

[attribute$="value"]{
property: value;
}

Example

This selector selects all elements with a "src" attribute which ends with ".png"
Open Compiler

<!DOCTYPE html>
<html>

<head>
<style>
img{
height: 50px;
width: 150px;
}
[src$=".png"] {
border: 2px solid;
}
</style>
</head>

<body>
<p>

144
Style applied to src attribute's value ends with '.png'
</p>
<img alt="Logo" src = "/images/[Link]" />
<img alt="Logo" src = "/html/images/[Link]" />
</body>

</html>

[Link] CSS [attribute|="value"] Selector

This selector select elements that have a specific attribute with a value that begins with a
specified substring followed by a hyphen (-). This selector is often used for selecting elements
with language-specific attributes, such as lang attributes, which often use hyphens to denote
language sub-codes.

Syntax

[attribute|="value"]{
property: value;
}

Example

This selector selects all the elements with a "lang" attribute that starts with "en" followed by a
hyphen:
Open Compiler

<html>

<head>
<style>
[lang|="en"] {
background: lightgray;
padding: 10px;
color: black;
}
</style>
</head>

<body>
<div lang="en"> This is a div in English! </div>
<p lang="en-US"> This paragraph is in American English. </p>
<p lang="en-GB"> This paragraph is in British English. </p>
<div lang="fr"> Bonjour tout le monde en français! </div>
<div lang="es"> Hola Mundo en español! </div>
</body>

145
</html>

[Link] CSS [attribute~="value"] Selector

This selector is used to select elements that have a specific attribute with a value containing a
specified word. The word should be a standalone word, surrounded by spaces or at the beginning
or end of the attribute value.

Syntax

[attribute~="value"]{
property: value;
}

Example

This selector select all elements with a "class" attribute containing the word "highlight"

<html>

<head>
<style>
[class~="highlight"] {
background: yellow;
padding: 10px;
color: black;
}
</style>
</head>

<body>
<div class="highlight">
This is a highlighted div!
</div>
<p class="highlight special">
This paragraph is highlighted and special.
</p>
<p class="special">
This paragraph is special but not highlighted.
</p>
<div class="note">
This is just a note.
</div>
<div class="highlight note">

146
This note is highlighted.
</div>
</body>

</html>

[Link] Attribute Selectors For Inputs

Attribute selectors can be used to select input elements based on specific criteria, such as their
type, name, value, or other attributes.

Example

<html>
<head>
<style>
/* Applies to all input tags */
input {
display: block;
margin: 10px;
padding: 5px;
}
/* Applies to input tags with type attribute */
input[type] {
border: 1px solid gray;
}
/* Applies to input tag with placeholder value as name */
input[placeholder="name"] {
border: 1px solid #f00;
}
/* Applies to input tags name attribute value start with "emailid" */
input[name|="emailid"] {
background-color: rgb(236, 178, 233);
}
/* Applies to input type attributes value containing "sub" string in it */
input[type~="sub"] {
background-color: rgb(88, 241, 88);
padding: 10px;
}
</style>
</head>

<body>
<input type="text" placeholder="Username">
<input type="text" placeholder="name">

147
<input type="email" placeholder="Email" name="emailid">
<input type="submit" placeholder="Submit">
</body>
</html>

[Link] Attribute Selectors For Language

You can use the lang attribute to select elements based on their language. The lang attribute
specifies the language of the text contained within an element.

Example

Open Compiler

<html>
<head>
<style>
div[lang] {
color: red;
}
div[lang="fr"] {
color: blue;
}
div[lang~="es"] {
color: green;
}
div[lang|="de"] {
color: orange;
}
div[lang^="it"] {
color: purple;
}
div[lang$="ja"] {
color: brown;
}
div[lang*="zh"] {
color: teal;
}
</style>
</head>

<body>

148
<div lang="en">Hello World in English!</div>
<div lang="fr">Bonjour tout le monde en français!</div>
<div lang="es">Hola Mundo en español!</div>
<div lang="ja">こんにちは、日本語で世界！</div>
<div lang="de">Hallo Welt auf Deutsch!</div>
<div lang="it">Ciao Mondo in italiano!</div>
<div lang="zh">你好世界，中文！</div>
</body>
</html>

2.13.5 CSS Multiple Attribute Selectors

CSS multiple attribute selectors allow you to select elements based on multiple attribute values.
It is use to target specific element that meet multiple criteria.

Example

<html>
<head>
<style>
/* Remove bullet points from list items */
ul {
list-style: none;
}

/* Target all anchor elements with an href attribute */


a[href] {
color: rgb(231, 11, 194);
}

/* Target anchor elements with both specific href values and file extension */
a[href="css_backgrounds.htm"][href$=".htm"] {
background-color: lightgray;
padding: 5px;
}

/* Target anchor elements with a specific href value */


a[href="css_colors.htm"] {
color: rgb(51, 255, 0);
}
</style>
</head>

149
<body>
<ul>
<li><a href="css_text.htm">
CSS Text
</a></li>
<li><a href="css_backgrounds.htm">
CSS Background
</a></li>
<li><a href="css_colors.htm">
CSS Color
</a></li>
</ul>
</body>

</html>

2.14 CSS Color: Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
Syntax: color:color name;

2.14.1 RGB Value

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and
the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

2.14.2 RGBA Value

RGBA color values are an extension of RGB color values with an alpha channel - which
specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

150
The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

Experiment by mixing the RGBA values below:( rgba(255, 99, 71, 0.5).

2.14.3 HEX Value

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB
(blue) hexadecimal integers specify the components of the color.

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as
decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others
are set to the lowest value (00).

To display black, set all values to 00, like this: #000000.

To display white, set all values to ff, like this: #ffffff.

Experiment by mixing the HEX values below:

#ff6347

2.14.4 HSL Value

In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue, saturation, lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.

151
Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is white

Experiment by mixing the HSL values below:hsl(0, 100%, 50%))

Saturation can be described as the intensity of a color.


100% is pure color, no shades of gray.
50% is 50% gray, but you can still see the color.
0% is completely gray; you can no longer see the color.

The lightness of a color can be described as how much light you want to give the color, where
0% means no light (black), 50% means 50% light (neither dark nor light) and 100% means full
lightness (white).

2.14.5 HSLA Value

HSLA color values are an extension of HSL color values with an alpha channel - which specifies
the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at
all).5, 99, 71, 0.5

Example:
<!DOCTYPE html>

<html>

<body>

<h1 style="background-color:Tomato;",”color:red;”>Tomato</h1>

<h1 style="background-color:Orange;">Orange</h1>

<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>

<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>

<h1 style="background-color:#ff6347;">#ff6347</h1>

152
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1><h1
style="background-color:LightGray;">LightGray</h1>

<h2 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>

<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>

</body>

</html>

LECTURE-18

2.15 Creating page Layout and Site Design

A website can be divided into various sections comprising of header, menus, content, and footer
based on which there are many different layout designs available for developers. Different layouts
can be created by using a div tag and using CSS property to style it.

2.15.1 Structure of Website Layout

Figure 2.23 website Layout

[Link]. Header Section

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.

[Link].Navigation Bar

153
A navigation bar contains a list of links to help visitors navigating through your website.

2.15.1.3Content Section

The content section is the main body of the website. The user can divide the content section in an
n-column layout.
The most common layouts are:

● 1 Column Layout: It is mostly used for mobile layout.

Figure 2.24 website content

● 2 Column Layout: This website layout is mostly used for tablets or laptops.

154
Figure 2.25 2 column Layout

● 3 Column Layout: This website layout is mostly used for desktops.

Figure 2.26 3 column Layout

The user can also create a responsive layout where the layout will get changed as per screen size.
Consider the below example where if the idth of the screen is more than 600px then there will be
a 3-column layout and if the width of the screen is between 400px to 600px then there will be a 2-
column layout and if the screen size is less than 400px then the 1-column layout will display.

[Link].Footer

The footer is placed at the bottom of your page. It often contains information like copyright and
contact info.

155
Example:

<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Website Layout</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

*{

box-sizing: border-box;

color:white;

body {

margin: 0;

background-image:url("[Link]");

color:white;

/* Style the header */

.header {

background-color: #f1f1f1;

padding: 20px;

text-align: center;

background-image:url("[Link]");

156
color:white;

/* Style the top navigation bar */

.topnav {

overflow: hidden;

background-color: #333;

/* Style the topnav links */

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

/* Change color on hover */

.topnav a:hover {

background-color: #ddd;

color: red;

157
/* Create three equal columns that floats next to each other */

.column {

float: left;

width: 33.33%;

padding: 15px;

/* Clear floats after the columns */

.row::after {

content: "";

display: table;

clear: both;

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on
top of each other instead of next to each other */

@media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack
on top of each other instead of next to each other */

158
@media screen and (max-width: 400px) {

.topnav a {

float: none;

width: 100%;

.footer {

padding: 20px;

align: center;

background: #ddd;

margin-top: 20px;

text-align: center;

</style>

</head>

<body>

<div class="header">

<h1>Header</h1>

<p>Resize the browser window to see the responsive effect.</p>

</div>

159
<div class="topnav">

<a href="#">Link</a>

<a href="#">Link</a>

<a href="#">Link</a>

</div>

<div class="row">

<div class="column">

<h2>Responsive web page design</h2>

<p>Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation.</p>

</div>

<div class="column">

<h2>Resposive architecture</h2>

<p>Recently, an emergent discipline called “responsive architecture” has begun asking how
physical spaces can respond to the presence of people passing through them. Through a
combination of embedded robotics and tensile materials, architects are experimenting with art
installations and wall structures that bend, flex, and expand as crowds approach them. Motion
sensors can be paired with climate control systems to adjust a room’s temperature and ambient
lighting as it fills with people. Companies have already produced “smart glass technology” that
can automatically become opaque when a room’s occupants reach a certain density threshold,
giving them an additional layer of privacy.”</p>

</div>

<div class="column">

160
<h2>Flexible Images</h2>

<p>The data-fullsrc is a custom HTML5 attribute.</p>

</div>

</div>

<div class="footer">

<h2>Footer</h2>

</div>

</body>

</html>

Output:

161
Figure 2.27 Header

Common types of CSS layouts include:

● Fixed Layout: The dimensions are given in fixed units (like pixels) and do not
change with the size of the browser window.

● Fluid Layout: Uses percentages for widths, allowing the layout to adjust to the
browser width.

● Responsive Layout: Uses media queries to adapt to different screen sizes and
orientations, providing optimal viewing across a range of devices.

162
● Grid Layout: Utilizes CSS Grid to define a grid-based layout system, making it
easier to design complex layouts.

IMPORTANT QUESTIONS

Q1: Create a css rule that makes all the text 2 times larger than the base font of the system.
Mention can you integrate css on a web page.

Q2: Describe the role and importance of CSS in web designing. Also Differentiate Class and Id
in CSS.

Q3:Define CSS. Explain the different ways to implement CSS using suitable example.

Q4:Explain the different types of selector in CSS.

Q5:Explain the pseudo class selector with the help of an example.

Q6:Explain the attribute selector using suitable example.

Q7:Design the 2-column page layout using CSS.

Q8:Explain the image sprite .

Q9:Explain box model in css with block diagram.

Q10:Explain the list and table using CSS with suitable example.

163

You might also like