Scribd
Upload
6 views

CSS

css

Uploaded by

rakesh.kumar.mtcs.2022
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

CSS

css

Uploaded by

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

Icons can easily be added to your HTML page, by using an icon library.

How To Add Icons


The simplest way to add an icon to your HTML page, is with an icon library, such
as Font Awesome.

Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).

All the icons in the icon libraries below, are scalable vectors that can be
customized with CSS (size, color, shadow, etc.)

Font Awesome Icons


To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code
to add in the <head> section of your HTML page:

<script src="https://kit.fontawesome.com/yourcode.js"
crossorigin="anonymous"></script>

Read more about how to get started with Font Awesome in our Font Awesome 5
tutorial.

Note: No downloading or installation is required!

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin
="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>


<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>

Bootstrap Icons
To use the Bootstrap glyphicons, add the following line inside
the <head> section of your HTML page:

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootst
rap.min.css">

Note: No downloading or installation is required!

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootst
rap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>


<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>

Google Icons
To use the Google icons, add the following line inside the <head> section of your
HTML page:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?


family=Material+Icons">

Note: No downloading or installation is required!

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>
CSS Links
Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example

a{
color: hotpink;
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

 a:link - a normal, unvisited link


 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

Example
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}

/* mouse over link */


a:hover {
color: hotpink;
}

/* selected link */
a:active {
color: blue;
}

Text Decoration
The text-decoration property is mostly used to remove underlines from links:

Example
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}

Background Color
The background-color property can be used to specify a background color for
links:

Example
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}

Link Buttons
This example demonstrates a more advanced example where we combine
several CSS properties to display links as boxes/buttons:

Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola

 Coffee
 Tea
 Coca Cola

Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola

I. Coffee
II. Tea
III. Coca Cola

HTML Lists and CSS List Properties


In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

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

Different List Item Markers


The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example
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;
}
An Image as The List Item Marker
The list-style-image property specifies an image as the list item marker:

Example
ul {
list-style-image: url('sqpurple.gif');
}

Position The List Item Markers


The list-style-position property specifies the position of the list-item
markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list
item. The start of each line of a list item will be aligned vertically. This is default:

 Coffee - A brewed drink prepared from roasted coffee beans...


 Tea
 Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list
item. As it is part of the list item, it will be part of the text and push the text at
the start:

 Coffee - A brewed drink prepared from roasted coffee beans...


 Tea
 Coca-cola

Example
ul.a {
list-style-position: outside;
}

ul.b {
list-style-position: inside;
}

Remove Default Settings


The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to <ul> or <ol>:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

 list-style-type (if a list-style-image is specified, the value of this property


will be displayed if the image for some reason cannot be displayed)
 list-style-position (specifies whether the list-item markers should
appear inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above is missing, the default value for the missing
property will be inserted, if any.
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:

Example
ol {
background: #ff9999;
padding: 20px;
}

ul {
background: #3399ff;
padding: 20px;
}

ol li {
background: #ffe5e5;
color: darkred;
padding: 5px;
margin-left: 35px;
}

ul li {
background: #cce5ff;
color: darkblue;
margin: 5px;
}

CSS Tables
<!DOCTYPE html>

<html>

<head>

<style>

#customers {

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

border-collapse: collapse;

width: 100%;

#customers td, #customers th {

border: 1px solid #ddd;

padding: 8px;

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
padding-top: 12px;

padding-bottom: 12px;

text-align: left;

background-color: #04AA6D;

color: white;

</style>

</head>

<body>

<h1>A Fancy Table</h1>

<table id="customers">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>

<td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>
<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

<tr>

<td>Königlich Essen</td>

<td>Philip Cramer</td>

<td>Germany</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

<td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>
<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr>

<td>Paris spécialités</td>

<td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>
Table Borders
To specify table borders in CSS, use the border property.

The example below specifies a solid border for <table>, <th>, and <td>
elements:

Firstname Lastname
Peter Griffin
Lois Griffin
Example
table, th, td {
border: 1px solid;
}
complete html document
<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid;

</style>

</head>

<body>

<h2>Add a border to a table:</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>
</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

Full-Width Table
The table above might seem small in some cases. If you need a table that
should span the entire screen (full-width), add width: 100% to the <table>
element:

Firstname
Peter
Lois
Example
table {
width: 100%;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be
collapsed into a single border:

Firstname
Peter
Lois
Example
table {
border-collapse: collapse;
}

If you only want a border around the table, only specify the border property for
<table>:

Firstname Lastname
Peter Griffin
Lois Griffin
Example
table {
border: 1px solid;
}
Table Width and Height
The width and height of a table are defined by
the width and height properties.

The example below sets the width of the table to 100%, and the height of the
<th> elements to 70px:

Firstname Lastname Savings

Peter Griffin $100


Lois Griffin $150
Joe Swanson $300
Example
table {
width: 100%;
}

th {
height: 70px;
}

To create a table that should only span half the page, use width: 50%:

Firstname Lastname Savings


Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
table {
width: 50%;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.

By default, the content of <th> elements are center-aligned and the content of
<td> elements are left-aligned.

To center-align the content of <td> elements as well, use text-align:


center:

Firstname Lastname Savings


Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
td {
text-align: center;
}

To left-align the content, force the alignment of <th> elements to be left-


aligned, with the text-align: left property:

Firstname Lastname Savings


Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Example
th {
text-align: left;
}

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.

By default, the vertical alignment of the content in a table is middle (for both
<th> and <td> elements).
The following example sets the vertical text alignment to bottom for <td>
elements:

Firstname Lastname Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300


Example
td {
height: 50px;
vertical-align: bottom;
}

CSS Table Style


Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
th, td {
padding: 15px;
text-align: left;
}
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Horizontal Dividers
Add the border-bottom property to <th> and <td> for horizontal dividers:

Example
th, td {
border-bottom: 1px solid #ddd;
}

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

First Name Last Name Savings

Peter Griffin $100


Lois Griffin $150

Joe Swanson $300

Example
tr:hover {background-color: coral;}

Striped Tables
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

For zebra-striped tables, use the nth-child() selector and add a background-
color to all even (or odd) table rows:
Example
tr:nth-child(even) {background-color: #f2f2f2;}

Table Color
The example below specifies the background color and text color of <th>
elements:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

Example
th {
background-color: #04AA6D;
color: white;
}

CSS Layout - The


display Property
The display property is the most important CSS property for controlling
layout.
The display Property
The display property is used to specify how an element is shown on a web
page.

Every HTML element has a default display value, depending on what type of
element it is. The default display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML
elements.

Block-level Elements
A block-level element ALWAYS starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).

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

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>

Inline Elements
An inline element DOES NOT start on a new line and only takes up as much
width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>

 The display Property Values


 The display property has many values:

Value Description

inline Displays an element as an inline element

block Displays an element as a block element

contents Makes the container disappear, making the child elements children of

the element the next level up in the DOM

flex Displays an element as a block-level flex container

grid Displays an element as a block-level grid container

inline-block Displays an element as an inline-level block container. The element

itself is formatted as an inline element, but you can apply height and

width values

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


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

inline-table The element is displayed as an inline-level table

list-item Let the element behave like a <li> element

run-in Displays an element as either block or inline, depending on context

table Let the element behave like a <table> element

table-caption Let the element behave like a <caption> element

table-column-group Let the element behave like a <colgroup> element

table-header-group Let the element behave like a <thead> element

table-footer-group Let the element behave like a <tfoot> element

table-row-group Let the element behave like a <tbody> element

table-cell Let the element behave like a <td> element


table-column Let the element behave like a <col> element

table-row Let the element behave like a <tr> element

none The element is completely removed

initial Sets this property to its default value

inherit Inherits this property from its parent element

Override The Default Display Value


As mentioned, every element has a default display value. However, you can
override this.

Changing an inline element to a block element, or vice versa, can be useful for
making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

Example
li {
display: inline;
}

The following example displays <span> elements as block elements:

Example
span {
display: block;
}
The following example displays <a> elements as block elements:

Example
a {
display: block;
}

Hide an Element - display:none or


visibility:hidden?
display:none

Remove

visibility:hidden
Hide

Reset

Reset All

Hiding an element can be done by setting the display property to none. The
element will be hidden, and the page will be displayed as if the element is not
there:

Example
h1.hidden {
display: none;
}

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element
will be hidden, but still affect the layout:

Example
h1.hidden {
visibility: hidden;
}

CSS Layout - The z-


index Property
The z-index property specifies the stack order of an element.

The z-index Property


When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Because the image has a z-index of -1, it will be placed behind the text.

Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Without z-index
If two positioned elements overlap each other without a z-index specified, the
element defined last in the HTML code will be shown on top.

Example
Same example as above, but here with no z-index specified:

<!DOCTYPE html>

<html>

<head>

<style>

.container {

position: relative;

.black-box {

position: relative;

border: 2px solid black;

height: 100px;

margin: 30px;

.gray-box {

position: absolute;

background: lightgray;

height: 60px;

width: 70%;

left: 50px;
top: 50px;

.green-box {

position: absolute;

background: lightgreen;

width: 35%;

left: 270px;

top: -15px;

height: 100px;

</style>

</head>

<body>

<h1>Overlapping elements</h1>

<p>If two positioned elements overlap each other without a z-index specified,

the element defined last in the HTML code will be shown on top:</p>

<div class="container">

<div class="black-box">Black box</div>

<div class="gray-box">Gray box</div>

<div class="green-box">Green box</div>

</div>

</body>

</html>
CSS Layout - Overflow

CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars
when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. The content renders outside
the element's box
 hidden - The overflow is clipped, and the rest of the content will be
invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest of
the content
 auto - Similar to scroll, but it adds scrollbars only when necessary

 overflow: visible
 By default, the overflow is visible, meaning that it is not clipped and it
renders outside the element's box:

 div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
CSS Layout - float
The CSS float property specifies how an element should float.

The CSS clear property specifies what elements can float beside the cleared
element and on which side.

The float Property


The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.

The float property can have one of the following values:

 left - The element floats to the left of its container


 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in
the text). This is default
 inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Example - float: right;


The following example specifies that an image should float to the right in a text:

img {
float: right;
}

img {
float: left;
}

img {
float: none;
}
Float Next To Each Other
Normally div elements will be displayed on top of each other. However, if we
use float: left we can let elements float next to each other:

Example
div {
float: left;
padding: 15px;
}

.div1 {
background: red;
}

.div2 {
background: yellow;
}

.div3 {
background: green;
}

CSS Layout - display: inline-


block
The display: inline-block Value
Compared to display: inline, the major difference is that display:
inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-


block does not add a line-break after the element, so the element can sit next
to other elements.

The following example shows the different behavior of display:


inline, display: inline-block and display: block:

Example
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}

span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
Using inline-block to Create
Navigation Links
One common use for display: inline-block is to display list items
horizontally instead of vertically. The following example creates horizontal
navigation links:

Example
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}

.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}

CSS Navigation Bar

Navigation Bars
Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menus into good-looking navigation
bars.

Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standard HTML list.

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

Example
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

CSS Vertical Navigation Bar

Vertical Navigation Bar Examples


Create a basic vertical navigation bar with a gray background color and change
the background color of the links when the user moves the mouse over them:

 Home
 News
 Contact
 About

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* Change the link color on hover */


li a:hover {
background-color: #555;
color: white;
}

Active/Current Navigation Link


Add an "active" class to the current link to let the user know which page he/she
is on:

 Home
 News
 Contact
 About

Example
.active {
background-color: #04AA6D;
color: white;
}

Center Links & Add Borders


Add text-align:center to <li> or <a> to center the links.

Add the border property to <ul> add a border around the navbar. If you also
want borders inside the navbar, add a border-bottom to all <li> elements, except
for the last one:

 Home
 News
 Contact
 About

Example
ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

Full-height Fixed Vertical Navbar


Create a full-height, "sticky" side navigation:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much
content */
}

CSS Horizontal Navigation


Bar
CSS Image Gallery

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>

CSS Forms
<!DOCTYPE html>

<html>

<head>

<style>

*{

box-sizing: border-box;

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

resize: vertical;

}
label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #04AA6D;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

float: right;

input[type=submit]:hover {

background-color: #45a049;

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

.col-25 {

float: left;

width: 25%;
margin-top: 6px;

.col-75 {

float: left;

width: 75%;

margin-top: 6px;

/* Clear floats after the columns */

.row::after {

content: "";

display: table;

clear: both;

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

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

.col-25, .col-75, input[type=submit] {

width: 100%;

margin-top: 0;

</style>

</head>

<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other.</p>

<div class="container">

<form action="/action_page.php">

<div class="row">

<div class="col-25">

<label for="fname">First Name</label>

</div>

<div class="col-75">

<input type="text" id="fname" name="firstname" placeholder="Your name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="lname">Last Name</label>

</div>

<div class="col-75">

<input type="text" id="lname" name="lastname" placeholder="Your last name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="country">Country</label>

</div>

<div class="col-75">

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>
<option value="usa">USA</option>

</select>

</div>

</div>

<div class="row">

<div class="col-25">

<label for="subject">Subject</label>

</div>

<div class="col-75">

<textarea id="subject" name="subject" placeholder="Write something.."


style="height:200px"></textarea>

</div>

</div>

<br>

<div class="row">

<input type="submit" value="Submit">

</div>

</form>

</div>

</body>

</html>

CSS Rounded Corners


#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}

CSS border-radius - Specify Each


Corner
The border-radius property can have from one to four values. Here are the
rules:

Four values - border-radius: 15px 50px 30px 5px; (first value applies to
top-left corner, second value applies to top-right corner, third value applies to
bottom-right corner, and fourth value applies to bottom-left

corner):

Three values - border-radius: 15px 50px 30px; (first value applies to top-
left corner, second value applies to top-right and bottom-left corners, and third

value applies to bottom-right corner):


Two values - border-radius: 15px 50px; (first value applies to top-left and
bottom-right corners, and the second value applies to top-right and bottom-left

corners):

One value - border-radius: 15px; (the value applies to all four corners, which

are rounded equally:

Here is the code:

Example
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

You could also create elliptical corners:

Example
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

You might also like