Scribd
Upload
6 views48 pages

CSS Notes 1 Lyst4261

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose for styling web content and the hierarchy of style rules. It covers various methods of applying CSS, including inline, internal, and external styles, along with basic properties and selectors. Additionally, it includes examples of CSS for tables and responsive design techniques to manage overflow in tables.

Uploaded by

sravanikakarla731
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
6 views48 pages

CSS Notes 1 Lyst4261

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose for styling web content and the hierarchy of style rules. It covers various methods of applying CSS, including inline, internal, and external styles, along with basic properties and selectors. Additionally, it includes examples of CSS for tables and responsive design techniques to manage overflow in tables.

Uploaded by

sravanikakarla731
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

CSS Notes

Introduction to CSS
 CSS stands for Cascading Style sheet and it is used for styling the
content.
 Cascading means that CSS has an inherent hierarchy and styles of a
higher precedence will overwrite rules of a lower precedence.
imagine if I told a freelance designer that I’d just hired that I had some
rules for the color of the headers in the design that I want. Those are:
 make the first header red
 make the second header yellow
 make all headers blue
 make the third header green
These instructions conflict, so my designer might be confused and come
back to me to ask for clarification. Which one takes priority? So let’s say
that instead, I give the designer a sense of which instructions come first.
 make the first header red
 make the second header yellow
 make all headers blue
 make the third header green

Think of these as ranked in order of priority, so the higher listed


things have a greater precedence and overrule those of a lower
precedence (a “cascade”). Thus, despite the third instruction saying
make all headers blue, the top ranked instruction is to make the first
header red, so the first header will be colored red.

Syntax of CSS
 First approach to apply the styling is by using the style
property/attribute.
 Second approach to apply the styling is by using the <style> tag:

<style>
--------------
--------------
</style>

1
CSS Notes

 Third approach is by using the external file.

Types of CSS
1. Inline CSS
2. Internal CSS
3. External CSS

Basic CSS Properties


1. color: This property is used to apply/give the color for the
character, text, word or sentence.
2. text-align: This property is used to place or align the text in
center, right or left.
3. font-family: This property is used to change font style of text
like italic, cursive, Georgia etc.
4.background-color: This property is used to give the
background color for the text.
5. font-size: This property is used to change the size of the text.
6.border: This property is used to give the border for the text.
7. height: This property is used to set the height for the image
content etc.
8. width: This property is used to set the width for the image
content etc.

Note: We have many other CSS properties we will use them


according to the requirement.

2
CSS Notes

Inline CSS
If we apply the styling to the content inside the element only by using the
style attribute, we call it as “inline CSS”.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: brown; font-family: cursive; text-align: center;">Tap
Academy</h1>
</body>
</html>

Output:

3
CSS Notes

Note: In the above example we are using the color property and value
for that as brown, whenever we are using the property a proper value also,
we need to assign for it. And based on our required we are style our
contents by using many more CSS properties.

The <meta> tag will help us to set the content according to our browser
width properly.
CSS Properties
Attribute

Tag

<h1 style="color: brown; font-family: cursive; text-align: center;">Tap


Academy</h1>

Properties values Content

4
CSS Notes

Internal CSS
 If we apply the styling to the content by using the <style> tag, we call it
as “internal CSS”.
 <style> tag we can specify in <head> section or in the <body> section as
well. But as a standard we use it in the <head> section.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Internal CSS</title>
<style>
p{
color: blue;
text-align: right;
background-color: aquamarine;
}
</style>
</head>
<body>
<p>This is a first paragraph</p>
</body>
</html>

Output:

5
CSS Notes

Note: In the above example, we have taken <p> tag and given the
content, for that content we are applying the styling in the internal
approach, in the internal styling we need to select the element name and
apply the styling. Syntax for that is:

element_name{

CSS_property: value,

CSS_property: value

Where ever that element name matches for all those elements the styling
will be applied.

External CSS
 External CSS means we should create a separate file for the CSS with
the extension as .css and give all the styling properties in it.
 The content should be present in the HTML file only so here we will
have two file one is for content and one is for CSS.
 That CSS file we have to link it to the content file then only the styling
will be applied to the contents.
 To link the CSS file we need to use the <link> tag in html file and link
the CSS file by specifying the css file in the <link> tag.
 We need to execute the HTML file only always not the CSS file.

It is a css filename

<link rel="stylesheet" href="external.css">

rel is an attribute means relation


by this we are telling to browser
we are giving the stylesheet.

6
CSS Notes

Example:
HTML File
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>External File</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<h1>This is External CSS</h1>
</body>
</html>

CSS File
h1{
color: goldenrod;
text-align: center;
border: 3px solid red;
font-family: 'Times New Roman', Times, serif;
background-color: blanchedalmond;
}

Output:

7
CSS Notes

Note:
 In the CSS file while giving the styling we no need to specify style
attribute or <style> tag directly we can select the element and apply the
styling.

Selectors
 Selectors are used to select or find the element to apply the styling to
the content.
 There are different types of selectors such as:
 Element Selector
 Id Selector
 Class Selector
 Group Selector
 Universal Selector
 Pseudo-element Selectors
 Pseudo-class Selectors

8
CSS Notes

Element Selector
If we are applying the styling to the content by using the element name then
we call it as element selector.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-
width, initial-scale=1.0">
<title>Element Selector</title>
<style>
p{
Using the color: chocolate;
element
name that is
font-family: Georgia, 'Times New Roman',
p, we are Times, serif;
applying the font-weight: bold;
styling to the text-align: center;
content. }
</style>
</head>
<body>
<p>Education is one thing no one can take away
from you.</p>
</body>
</html>

Output:

9
CSS Notes

Id Selector
 If we are applying the styling to the content by using the id attribute
value then we call it as id selector.
 We need to give the suffix as # for the id attribute value when we are
applying the styling.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Id Selector</title>
<style>
#p1{
color:crimson;
font-family: cursive; Without using the <b> tag in CSS
font-weight: bold; we can bold the text by using the
text-align: center; font-weight CSS property.
}
</style>
</head>
<body>
<p id="p1">Education is the key that unlocks the golden door to
freedom.</p>
</body>
</html>

Output:

10
CSS Notes

Class Selector
 If we are applying the styling to the content by using the class
attribute value then we call it as id selector.
 We need to give the suffix as .(dot operator) for the id attribute value
when we are applying the styling.
 The class attribute also can be used to identify the element by using the
class value.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Class Selector</title>
<style>
.p1{
color:darkcyan;
font-family: cursive;
text-align: right;
border: 3px solid black;
}
</style>
</head>
<body>
<h3 class="p1">Education’s purpose is to replace an empty mind
with an open one.</h3>
</body>
</html>

11
CSS Notes

Output:

Group Selector
 If we want to apply the same styling to multiple elements, we no need of
selecting each element individually we can select all the elements at
once and apply the styling to the content.
 If we are selecting multiple elements at a time and if we apply the
styling, we call it as “Group Selector”.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
We have <title>Group Selector</title>
grouped <style>
the h4 h4,p{
and p
element
font-family: cursive;
together text-align: center;
and color: goldenrod;
applied }
the </style>
styling.
</head>
<body>
<h4>A child without education is like a bird without
wings.</h4>
<p>Education is the most powerful weapon which you can
use to change the world.</p>
</body></html>
12
CSS Notes

Output:

CSS Table
We know that in html if we create a table then we will be getting the double
lines for the border, in order to make it as single line to make it look same
like the table we need to apply the styling for that by using the CSS
properties.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Table</title>
<style>
table,th,td{
border: 2px solid;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student_Id</th>
<th>Student_Name</th>

13
CSS Notes

<th>Student_Age</th>
<th>Student_Gender</th>
</tr>
<tr>
<td>101</td>
<td>Ravi</td>
<td>23</td>
<td>Male</td>
</tr>
<tr>
<td>102</td>
<td>Ramya</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>103</td>
<td>Sam</td>
<td>24</td>
<td>Male</td>
</tr>
<tr>
<td>104</td>
<td>Roopa</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>105</td>
<td>Ram</td>
<td>23</td>
<td>Male</td>
</tr>
</table>
</body>
</html>

14
CSS Notes

Note: In the above example we are giving the border to table, table
header and table data by grouping them at once, instead of giving it
individually.

Output:

Note: We can change the height and width of the table header as shown
below:

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>CSS Table</title>
<style>
table,th,td{
border: 2px solid;
border-collapse: collapse;
}
th{
height:50px;
}

15
CSS Notes

</style>
</head>
<body>
<table>
<tr>
<th>Student_Id</th>
<th>Student_Name</th>
<th>Student_Age</th>
<th>Student_Gender</th>
</tr>
<tr>
<td>101</td>
<td>Ravi</td>
<td>23</td>
<td>Male</td>
</tr>
<tr>
<td>102</td>
<td>Ramya</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>103</td>
<td>Sam</td>
<td>24</td>
<td>Male</td>
</tr>
<tr>
<td>104</td>
<td>Roopa</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>105</td>
<td>Ram</td>
<td>23</td>
<td>Male</td>

16
CSS Notes

</tr>
</table>
</body>
</html>

Note: In similar way we can also change the height and width of the
table data as well.

Output:

CSS Responsive Table


 If a table is getting overflow in terms of width, then we can give the
option of scrolling by using the CSS overflow property.
 If the overflow happens at the x axis, we need to use overflow-x as set
it as auto.
 If the overflow happens at the y axis, we need to use overflow-y as set
it as auto.
 Before we give it, we need to divide the table as a separate division, then
only this property will be applied, to divide the screen or elements as
separate we need to use the <div> tag which stands for division and
which divides the screen.

17
CSS Notes

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Table</title>
<style>
table,th,td{
border: 2px solid;
border-collapse: collapse;
width: 60px;
}
th{
height:50px;
}
</style>
</head>
<body>
<div style="overflow-x: auto;">
<table>
<tr>
<th>Student_Id</th>
<th>Student_Name</th>
<th>Student_Age</th>
<th>Student_Gender</th>
<th>Phone_number</th>
<th>Email</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Ravi</td>
<td>23</td>
<td>Male</td>
<td>123456789</td>
<td>[email protected]</td>
18
CSS Notes

<td>89</td>
</tr>
<tr>
<td>102</td>
<td>Ramya</td>
<td>23</td>
<td>Female</td>
<td>123456799</td>
<td>[email protected]</td>
<td>80</td>
</tr>
<tr>
<td>103</td>
<td>Sam</td>
<td>24</td>
<td>Male</td>
<td>123456589</td>
<td>[email protected]</td>
<td>70</td>
</tr>
</table>
</div>
</body>
</html>

Output:

19
CSS Notes

Changing the color of the row, table data in CSS


 We can apply the styling to the table row, table data by using the selector
nth:child().
 In the nth:child() selector we can pass the parameter as even or odd,
based on even or odd it will apply the styling accordingly.
 Along with this we can add any other selectors as well.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>CSS Table</title>
<style>
table,th,td{
border: 2px solid;
border-collapse: collapse;
}
tr:nth-child(even)
{
background-color:bisque;
}
</style>
</head>
<body>
<table>
<tr>
<th>Student_Id</th>
<th>Student_Name</th>
<th>Student_Age</th>
<th>Student_Gender</th>
</tr>
<tr>
20
CSS Notes

<td>101</td>
<td>Ravi</td>
<td>23</td>
<td>Male</td>
</tr>
<tr>
<td>102</td>
<td>Ramya</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>103</td>
<td>Sam</td>
<td>24</td>
<td>Male</td>
</tr>
<tr>
<td>104</td>
<td>Roopa</td>
<td>23</td>
<td>Female</td>
</tr>
<tr>
<td>105</td>
<td>Ram</td>
<td>23</td>
<td>Male</td>
</tr>
</table>
</body>
</html>

21
CSS Notes

Output:

Note: As in the above example we can also apply the styling for the table
data as well.

Universal Selector
 Universal selector is used to select all the element in the page and apply
the styling to all of them at once.
 The universal selector is represented by *(asterisk).

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Universal Selector</title>
<style>
*{
font-family: cursive;
color: brown;
border: 2px solid black;
text-align: center;
font-weight: bold;
}

22
CSS Notes

</style>
</head>
<body>
<h1>Success is no accident</h1>
<h2>It is hard work</h2>
<h3>It is perseverance</h3>
<p>It is learning</p>
<pre>It is studying</pre>
<h4>It is sacrifice</h4>
<h5>most of all, love of what you are doing or learning to
do</h5>
</body>
</html>

Output:

Note: * (asterisk) will select everyone element in the web page including
the body and apply the styling to them.

23
CSS Notes

Pseudo-class Selectors
 This pseudo-class selectors are specially used to give styling for the links.
 We can change the default color of links by using this pseudo-class
selectors.
 The types of pseudo-class selectors are:
 link: Used to change the styling of the unvisited links.
 visited: Used to change the styling of the visited links.
 active: Used to change the styling of the active links.
 hover: hover means mouse over, using this selector we can change
the styling of that link whenever we keep the cursor on that link.
 The suffix of this pseudo-class selector should be : (colon).

Changing the styling of the unvisited link


By default, the color of unvisited link will be blue now we can change it in
CSS and using the :link selector.

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pseudo-class Selector</title>
<style>
a:link{
color: brown;
}
</style>
</head>
<body>
<a href="https://www.thetapacademy.com">Visit Tap
Academy</a>
</body></html>
24
CSS Notes

Output before changing the color:

Output after changing the color:

Changing the styling of the visited link


By default, the color of visited link will be purple now we can change it in
CSS and using the :visited selector.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pseudo-class Selector</title>
<style>
a:visited{
color: crimson;
}
</style>
25
CSS Notes

</head>
<body>
<a href="https://www.thetapacademy.com">Visit Tap
Academy</a>
</body>
</html>

Output before changing the color:

Output after changing the color:

26
CSS Notes

Changing the styling of the active link


By default, the color of active link will be red now we can change it in CSS
and using the :active selector.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pseudo-class Selector</title>
<style>
a:active{
color:goldenrod;
}
</style>
</head>
<body>
<a href="https://www.thetapacademy.com">Visit Tap
Academy</a>
</body>
</html>

Output before changing the color:

27
CSS Notes

Output after changing the color:

Changing the styling when mouse is over the


link
By using the :hover selector we can change the styling of the link when ever
the mouse is over the link.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-class Selector</title>
<style>
a{
border: 2px solid black;
text-decoration: none;
background-color: aquamarine;
}
a:hover{
background-color:bisque;
}
</style>
</head>
<body>
<a href="https://www.thetapacademy.com">Visit Tap Academy</a>
</body></html>

28
CSS Notes

Output before mouse over:

Output after mouse over:

Note:
 In the above example we have given the styling to <a> element and then
again by using the :hover selector we are changing the background color.
 text-decoration property is used to remove the underline for the link,
if we set the value as none to it, it will be removing the underline. For the
link.

29
CSS Notes

Pseudo-element Selectors
 The pseudo-class selectors are used to apply the styling specially for first
letter, first line or if we want to place any content before text or after
text.
 The different types of pseudo-element selectors are:
 ::first-line: By using this we can style the only first letter of a
paragraph/content
 ::first-letter: By using this we can style only the first line of a
paragraph/content
 ::before: By using this, we can place any content before the
paragraph/content
 ::after: By using this, we can place any content after the
paragraph/content.
 For pseudo-class selectors the suffix should be :: (double colon).

Example1 using first-line and first-letter:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pseudo-element selector</title>
<style>
p::first-letter{
font-family: cursive;
}
p::first-line{
color: crimson;
}
</style>
</head>
<body>
<p>One of the Unique features of Tap Academy is the use of
Augmented Reality in our training. Through this concepts are
visualized using cutting-edge animation to ensure an in-depth

30
CSS Notes

understanding of the concepts & experience the pure joy of learning


as well as upskilling your coding skills</p>
</body>
</html>

Output:

Example2 using before and after:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Pseudo-element selector</title>
<style>
p::before{
content: url(Tap_academy_logo.webp);
}
p::after{
content: url(Tap_academy_logo.webp);
}
</style>
</head>
<body>
<p>One of the Unique features of Tap Academy is the use of
Augmented Reality in our training. Through this concepts are
visualized using cutting-edge animation to ensure an in-depth

31
CSS Notes

understanding of the concepts & experience the pure joy of learning


as well as upskilling your coding skills</p>
</body>
</html>

Output:

Border
 In css we can give a border to the content by using the border property,
but that border we can style it in different ways.
 Types of borders are:
 solid
 dotted
 dashed
 double
 ridge

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Border</title>
<style>
h1{
border: 2px solid red;
32
CSS Notes

}
h2{
border:2px dotted brown;
}
h3{
border: 2px dashed blue;
}
h4{
border: 2px double purple;
}
p{
border: 2px ridge blanchedalmond;
}
pre{
border-top: 2px solid blue;
border-bottom: 2px double violet;
border-left: 2px dashed palevioletred;
border-right: 2px dotted brown;
}
</style>
</head>
<body>
<h1>You learn something new every day if you pay attention.</h1>
<h2>An investment in knowledge pays the best interest.</h2>
<h3>Education is not the filling of a pail but the lighting of a
fire.</h3>
<h4>The great aim of education is not knowledge but action.</h4>
<p>Education is the key to unlock a golden door of freedom.</p>
<pre>You are always a student, never a master. You have to keep
moving forward.</pre>

</body>
</html>

33
CSS Notes

Output:

Note: We can also give different border styling for different sides, by
using the border-left, border-right, border-top and border-bottom
properties.

Span Tag
 The <span> tag is used to apply the styling to the specific part of the text
or paragraph without breaking the link.

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

34
CSS Notes

<title>Span Tag</title>
</head>
<body>
<center>
<span style="color: blue; font-size: 50px;">G</span>
<span style="color: red;font-size: 50px;">O</span>
<span style="color: goldenrod;font-size: 50px;">O</span>
<span style="color: blue;font-size: 50px;">G</span>
<span style="color: green;font-size: 50px;">L</span>
<span style="color: red;font-size: 50px;">E</span>
</center>
</body>
</html>

Output:

35
CSS Notes

Box Model (Margin & Padding)


 The box model represents the design and layout of the web page.
 The box model contains the contents, padding, margin, borders.
 Margin is a space between the browser and the content.
 Padding is a space between the border and contents.

Browser Window Top

Margin
Border

Padding

Left TAP ACADEMY Right

Bottom

Note:
 To provide the space between the browser body and border/content
from the left, right, top or bottom we need to use margin-left,
margin-right, margin-top and margin-bottom CSS property.
 To provide the space between the border and content from the left,
right, top or bottom we need to use padding-left, padding-right,
padding-top and padding-bottom CSS property.

36
CSS Notes

Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Padding and Margin</title>
<style>
#container1{
border: 2px solid red;
width: 40%;
height: 45px;
text-align: center;
margin-top: 18%;
margin-left: 29%;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="container1">
TAP ACADEMY
</div>
</body>
</html>

37
CSS Notes

Output:

38
CSS Notes

Navigation Bar
 The navigation bar is displaying the content as menu.
 The contents in navigation bar will be links, once we click on them it will
be redirecting or navigating from one page to another page.
 We can create this navigation bars in vertical and horizontal way.

Vertical Navigation Bar


Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Vertical Navigation Bar</title>
<style>
ul{
list-style-type: none;
padding: 0px;
}
li a{
text-decoration: none;
color: black;
background-color:coral;
display: block;
font-family: Georgia, 'Times New Roman', Times, serif;
}
li a:hover{
background-color: bisque;
}
</style>
</head>
<body>

39
CSS Notes

<ul>
<li><a href="#home.html">HOME</a></li>
<li><a href="#course.html">COURSE</a></li>
<li><a href="#stu_reviews.html">STUDENT
REVIEWS</a></li>
<li><a href="#blog.html">BLOG</a></li>
<li><a href="#placement.html">PLACEMENT</a></li>
<li><a href="#contact.html">CONTACT</a></li>
</ul>
</body>
</html>

Output:

Note:
 For the unordered list by default, it will be display in bullets, if we want
to change or remove them then we need to use list-style-type CSS
property.
 It we want all the list of links to be consider as one block, and if we want
the entire block to be clickable not only just the link then we need to use
the display CSS property and set the value as block.

40
CSS Notes

Horizontal Navigation Bar


Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Horizontal Navigation Bar</title>
<style>
ul{
list-style-type: none;
}
li a{
text-decoration: none;
color: black;
background-color:coral;
font-family: Georgia, 'Times New Roman', Times, serif;
display: block;
float: left;
padding: 5px;
border: 1px solid grey;
}
li a:hover{
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li><a href="#home.html">HOME</a></li>
<li><a href="#course.html">COURSE</a></li>
<li><a href="#stu_reviews.html">STUDENT
REVIEWS</a></li>
<li><a href="#blog.html">BLOG</a></li>
<li><a href="#placement.html">PLACEMENT</a></li>

41
CSS Notes

<li><a href="#contact.html">CONTACT</a></li>
</ul>
</body>
</html>

Output:

Note:
 The float CSS property is used to float the element to left and right.
 In the above example padding is used to give the spaces between the
links/elements.
 If the navigation bar should be fixed in a place, then we need to use the
position CSS property and set the value as fixed.

42
CSS Notes

Box Shadow
 It is used to apply the more shadows and styling to the box or border.
 To apply the styling to box we will use the box-shadow CSS property.
 We need to specify the vertical and horizontal shadow and we can blur
the shadow and we can provide the color for the shadow.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box shadow</title>
<style>
h1{
border: 2px solid black;
box-shadow: 2px 2px 2px grey;
}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

Output:

43
CSS Notes

Text Shadow
 It is used to apply the more shadows and styling to the text.
 To apply the styling to box we will use the text-shadow CSS property.
 We need to specify the vertical and horizontal shadow and we can blur
the shadow and we can provide the color for the shadow.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box shadow</title>
<style>
p{
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<p>Tap Academy</p>
<h1>Hello</h1>
</body>
</html>

Output:

44
CSS Notes

Animations
 Changing from one style to another or moving of element we call it
“Animation” .
 In CSS to provide the animations we need to use one decorator, that is
@keyframes.
 If we need to embed the animations inside the element if it should work.

Example1:

<!DOCTYPE html>
<html>
<head>
<title>Animations Example1</title>
<style>
p{
border: 5px solid red;
border-radius: 50px;
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: ani;
animation-duration: 5s;
}
@keyframes ani{
from{background-color: aquamarine;}
to{background-color: brown;}
}
</style>
</head>
<body>
<p></p>
</body>
</html>

45
CSS Notes

Output:

In the above example we are using the from and to keyword to change from
one style to another style. We have used the animation-name CSS property
to specify the animation name and we have used the animation-duration to
specify by what duration the animation should be completed.

Example2:

<!DOCTYPE html>
<html>
<head>
<title>Animations Example2</title>
<style>
p{
border: 5px solid red;
border-radius: 50px;
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: ani;
animation-duration: 5s;
position: relative;
animation-iteration-count: infinite;
}
@keyframes ani{
0%{background-color: aquamarine;left: 0px; top: 0px;}
30%{background-color: brown;left:200px;top:0px}
40%{background-color: blue;left: 0px; top: 0px;}

46
CSS Notes

</style>
</head>
<body>
<p></p>
</body>
</html>

In the above example2 we have divided the overall duration into the
percentage and we have changed the styling and here we are moving up the
element as well by providing the top and left spaces. And if we have the
element to be moved from one position to another then we need to use the
position CSS property and set the value as relative.

Output:

47
CSS Notes

48

You might also like