FSD CSS Part 6

CSS Borders
The border property is used to add a border around the element and these borders can be
stylized from different styles, colors, size, etc.
Given below are the different properties which helps in creating an attractive border:
• Border Style
• Border Color
• Border Width
• Border Radius
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Border </title>
<meta charset="UTF-8">
<style>
.dotted {border-style: dotted;}
.dashed {border-style: dashed;}
.solid {border-style: solid;}
.double {border-style: double;}
.groove {border-style: groove;}
.ridge {border-style: ridge;}
.inset {border-style: inset;}
.outset {border-style: outset;}
.none {border-style: none;}
.hidden {border-style: hidden;}
</style>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Border Color </title>
<style>
.color1 {
border-style: solid;
border-color: red blue yellow green;
}
.color2 {
border-style: solid;
border-color: #98bf21 yellow orange brown;
}
</style>
</head>
<body>
<p class="color1">This is a solid red border</p>
<p class="color2">This is a solid green border</p>
</body>
</html>
CSS Forms
Input Field Width
The width of an input field can be given by CSS width property. It can be given in pixels or
in percent value also.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Width </title>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en"> Input Field Padding
<head>
<title> CSS Form Padding </title>
The padding of an input
<style> field creates space
input[type=text] { between the content and
width: 100%; the borders.
padding: 10px 15px;
margin: 8px 0;
box-sizing: border-box; It can be given by CSS
} padding property. It's value
</style>
also can be given in pixels
</head>
<body> or in percent.
<form>
</form>
</body>
</html>
Input Field Border Color
The CSS border property is used to give the border and the color of the input field.
The border-radius property is used which creates curves at the vertices of the input
field.
The syntax of giving border color: border width style color;.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Form Padding </title>
<style>
input[type=text] {
width: 100%;
padding: 10px 15px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>
<form>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en"> Input Field Background
<head>
<title> CSS Form background color </title>
Color
<style>
input[type=text] {
width: 100%; The background-color
padding: 12px 20px;
margin: 8px 0;
property is used to add
box-sizing: border-box; background color to the
border: 1px solid red;
background-color: #3CBC8D;
input.
color: white;
}
</style>
</head>
<body>
<form>
<input type="text" id="fname" name="fname" value=“Talent">
<input type="text" id="lname" name="lname" value=“Battle">
</form>
</body>
</html>
<!DOCTYPE html>
CSS Navigation Bar
<html lang="en">
<head>
Navigation bar is a list of
<title> CSS Navbar </title>
links which helps you to
visit a website fully.
</head>
<body>
It consist links of various
important webpages of the
<ul>
website.
<li><a href="#home">Home</a></li>
<li><a href="#package">Package</a></li>
You can also use table to
<li><a href="#contact">Contact Us</a></li>
make a navbar.
<li><a href="#about">About Us</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en"> li a:hover:not(.active) { Active Navigation Bar
<head> background-color: #555;
<title> CSS Active Navbar </title> color: white;
<meta charset="UTF-8"> } A Navigation bar links can
<style> </style> be made active by using
ul { </head> active class in the links.
list-style-type: none; <body>
margin: 0; <h2>Vertical Navigation Bar</h2>
padding: 0; <ul> This styling will be applied
width: 200px; <li><a class="active" to only that link which is
background-color: #f1f1f1; href="#home">Home</a></li>
currently active, this way a
} <li><a href="#news">News</a></li>
li a { <li><a user can know in which
display: block; href="#contact">Contact</a></li> page they are present.
color: #000; <li><a href="#about">About</a></li>
padding: 8px 16px; </ul>
text-decoration: none; </body>
} </html>
li a.active {
background-color: seagreen;
color: white;
}
<!DOCTYPE html> li a.active { Horizontal Navigation
<html lang="en"> background-color: seagreen;
<head> color: white; bar
<title> CSS Horizontal Navbar </title> }
<style> li a:hover { It's a horizontal
ul { background-color: purple; navigation bar with list
list-style-type: none; }
margin: 0; </style> tags.
padding: 0; </head>
overflow: hidden; <body>
background-color: #333; The <li> has been given
} <ul> float:left;, which will
<li><a class="active"
li { href="#home">Home</a></li> align elements
float: left; <li><a href="#news">News</a></li> horizontally.
} <li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
li a { <li><a href="#more">More</a></li>
display: block;
color: white; </ul>
text-align: center;
padding: 14px 16px; </body>
text-decoration: none; </html>
}
<!DOCTYPE html>
<html lang="en"> .dropdown-content a {
<head> color: black; Dropdown
<title> CSS Dropdown Navbar </title> padding: 12px 16px;
<style>
text-decoration: none;
display: block;
Navbar
ul { text-align: left;
list-style-type: none; }
margin: 0;
padding: 0; .dropdown-content a:hover {background-color: #f1f1f1}
overflow: hidden;
background-color: #333; .dropdown:hover .dropdown-content {
} display: block;
}
li { </style>
float: left; </head>
} <body>
li a, .dropbtn { <ul>
display: inline-block; <li><a href="#home">Home</a></li>
color: white; <li><a href="#news">News</a></li>
text-align: center; <li class="dropdown">
padding: 14px 16px; <a href="#" class="dropbtn">Dropdown</a>
text-decoration: none; <div class="dropdown-content">
} <a href="#">Link 1</a>
<a href="#">Link 2</a>
li a:hover, .dropdown:hover .dropbtn { <a href="#">Link 3</a>
background-color: green; </div>
} </li>
</ul>
li.dropdown {
display: inline-block; <h3>Dropdown Menu inside a Navigation Bar</h3>
} <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
.dropdown-content { </body>
display: none; </html>
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
This video is a sole
box-shadow: property
0px 8px of Talent Battle
16px 0px rgba(0,0,0,0.2); Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
CSS Buttons
With CSS, button can be designed by applying different CSS properties.
Various CSS Properties like CSS Padding, Margins, Borders, Hover, etc., can be used on a
CSS button.
An efficient and intelligent use of these CSS Properties will result in a beautiful and user
appealing button.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Buttons </title>
<style>
.button-style {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS Buttons</h2>
<p><button>Default Button</button></p>
<p><a href="" class="button-style">Link Button</a></p>
<p><input type="button" class="button-style" value="Input Button"></p>
<button class="button-style">CSS Button</button>
</body>
CSS Round Buttons
CSS round buttons are those buttons in which the sharp edges of buttons are turned into
round-shaped.
The border-radius property makes the borders of an element round shaped.
This property can also create a fully rounded button, like a perfect circle.
Add border-radius:50%;, it will result in a full circle button.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1">
<style> <h2>Rounded Buttons</h2>
.button { <p>Add rounded corners to a button with the border-radius
background-color: blueviolet; property:</p>
border: none;
color: white; <button class="button button1">2px</button>
padding: 20px; <button class="button button2">4px</button>
text-align: center; <button class="button button3">8px</button>
text-decoration: none; <button class="button button4">12px</button>
display: inline-block; <button class="button button5">50%</button>
font-size: 16px;
margin: 4px 2px; </body>
cursor: pointer; </html>
}
.button1 {border-radius: 2px;}

.button5 {border-radius: 50%;}
</style>
</head>
<body>

FSD CSS Part 6

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FSD CSS Part 6

Uploaded by

Copyright:

Available Formats

CSS Borders

Input Field Width

The syntax of giving border color: border width style color;.

With CSS, button can be designed by applying different CSS properties.

The border-radius property makes the borders of an element round shaped.

Add border-radius:50%;, it will result in a full circle button.

.button1 {border-radius: 2px;}

You might also like