0% found this document useful (0 votes)
8 views66 pagesWeb Development CSS Techniques Guide
The document outlines tasks for a Web Development Lab course, focusing on creating HTML files with various CSS styles, including inline, external, and internal styles. It provides examples of CSS syntax, selectors, and the cascading order of styles. Additionally, it includes instructions for creating a registration form and a personal resume using HTML5 and CSS3 properties.
Uploaded by
D.P. MishraCopyright
© 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
0% found this document useful (0 votes)
8 views66 pagesWeb Development CSS Techniques Guide
The document outlines tasks for a Web Development Lab course, focusing on creating HTML files with various CSS styles, including inline, external, and internal styles. It provides examples of CSS syntax, selectors, and the cascading order of styles. Additionally, it includes instructions for creating a registration form and a personal resume using HTML5 and CSS3 properties.
Uploaded by
D.P. MishraCopyright
© 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
Web Development Lab (102592CS)
B. Tech. 5 th CSE BIT Durg
Lab2
Dr. D. P. Mishra
[Link]
Task 6 : To create a registration
form as mentioned below.
Web Development Technique - Dr. D. P. Mishra
Task 7 : To create an html file by applying the
different styles using inline, external &
internal style sheets.
Procedure :
1. Create a external style sheet named as “external_css.css” and
provide some styles for h2, hr, p & a tags.
Web Development Technique - Dr. D. P. Mishra
2. Create an html file named as “Style_sheet.html”
a) Include the external style sheet with necessary tag.
b) Include the internal style sheet for body tags & also use class name, so
that the style can be applied for all tags.
c) include a <p> tags with inline style sheet.
File Name: Style_Sheet.html <body> • File Name: external_style.css
<html> <div class="container"> <style>
<head> <div class="center_div"> h2 {color:maroon; font-size:20pt}
<link rel="stylesheet" type="text/css" <h1> Hellow World ! </h1> hr {color:navy}
href="external_style.css" /> <p>This example contains some advanced p {font-size:11pt; margin-left: 15px}
<style type="text/css"> CSS methods you may not have learned a:link {color:green}
body yet. But, we will explain these methods in a:visited {color:yellow}
{ a later chapter in the tutorial.</p> a:hover {color:black}
margin-left:200px; </div> a:active {color:blue}
background:#5d9ab2 url('img_tree.png') no- </div> </style>
repeat top left; <p style="border-style:dotted solid dashed
} double">This is some text in a
.container paragraph.</p>
{ <p style="border-style:dotted solid
Web Development Technique - Dr. D. P. Mishra
text-align:center; dashed">This is some text in a
} paragraph.</p>
.center_div <p style="border-style:dotted solid">This
{ is some text in a paragraph.</p>
border:1px solid gray; <p style="border-style:dotted">This is
margin-left:auto; some text in a paragraph.</p>
margin-right:auto; <h2>This is a header 1</h2>
width:90%; <hr />
background-color:#d0f0f6; <p>You can see that the style
text-align:left; sheet formats the text</p>
padding:8px; <p><a href="cd_catalog.xml"
} target="_blank">This is a link</a></p>
</style> </body>
</head> </html>
Task 8: Create your own Resume using
HTML 5 Tags
1. Add Styles to your Resume using CSS 3 Properties.
2. Add External CSS styles, Internal and Inline CSS styles to
know the priority, add functionalities that add any two of
Web Development Technique - Dr. D. P. Mishra
HTML5 API’s
CSS
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
Example :
Web Development Technique - Dr. D. P. Mishra
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
CSS Syntax and Selectors
• A CSS rule-set consists of a selector and a declaration block:
Web Development Technique - Dr. D. P. Mishra
• 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.
• A CSS declaration always ends with a semicolon, and declaration blocks
are surrounded by curly braces.
Example
• In the following example all <p> elements will be center-aligned,
with a red text color:
p{
color: red;
Web Development Technique - Dr. D. P. Mishra
text-align: center;
}
The element Selector
• The element selector selects elements based on the element name.
• You can select all <p> elements on a page like this (in this case, all
<p> elements will be center-aligned, with a red text color):
Web Development Technique - Dr. D. P. Mishra
• Example
p{
text-align: center;
color: red;
}
The id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element should be unique within a page, so the id selector is
used to select one unique element!
Web Development Technique - Dr. D. P. Mishra
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
• The style rule below will be applied to the HTML element with
id="para1":
Example
#para1 {
text-align: center;
color: red;
}
The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
Web Development Technique - Dr. D. P. Mishra
Example
.center {
text-align: center;
color: red;
}
The class Selector ..
• You can also specify that only specific HTML elements should be
affected by a class.
• In the example below, only <p> elements with class="center" will be
center-aligned:
Web Development Technique - Dr. D. P. Mishra
Example
[Link] {
text-align: center;
color: red;
}
Types of CSS
Web Development Technique - Dr. D. P. Mishra
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
1. External style sheet
Web Development Technique - Dr. D. P. Mishra
2. Internal style sheet
3. Inline style
1. External Style Sheet
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each page must include a reference to the external style sheet file
inside the <link> element.
Web Development Technique - Dr. D. P. Mishra
• The <link> element goes inside the <head> section:
Example:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
[Link]
• An external style sheet can be written in any text editor. The file should
not contain any html tags. The style sheet file must be saved with a .css
extension.
• Here is how the "[Link]" looks:
Web Development Technique - Dr. D. P. Mishra
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
2. Internal Style Sheet
• An internal style sheet may be used if one single page has a unique
style.
• Internal styles are defined within the <style> element, inside the
<head> section of an HTML page
Web Development Technique - Dr. D. P. Mishra
Example
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3. Inline Styles
• 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.
Web Development Technique - Dr. D. P. Mishra
• The example below shows how to change the color and the left
margin of a <h1> element:
Example
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
Examples
Web Development Technique - Dr. D. P. Mishra
External Style
<HTML>
<HEAD>
<TITLE> My First Stylesheet </TITLE>
Web Development Technique - Dr. D. P. Mishra
<LINK REL = stylesheet TYPE = “text/css” HREF = “[Link]”>
</HEAD>
<BODY>
<H1> Stylesheets : The Tool of the Web Design Gods </H1>
<P> Amaze your friends! Squash your enemies! </P>
</BODY>
</HTML>
Internal Styles
<HTML>
<HEAD>
<TITLE> My First Stylesheet </TITLE>
<STYLE TYPE = “text/css”>
Web Development Technique - Dr. D. P. Mishra
H1 {color : green; font-size : 37px; font-family : impact}
P {text-indent : 1cm; background : yellow}
</STYLE>
</HEAD>
<BODY>
<H1> Stylesheets : The Tool of the Web Design Gods </H1>
<P> Amaze your friends! Squash your enemies! </P>
</BODY>
</HTML>
Inline Style
<HTML>
<HEAD>
<TITLE> My First Stylesheet </TITLE>
</HEAD>
Web Development Technique - Dr. D. P. Mishra
<BODY>
<H1 STYLE = “color : green; font-size : 37px; font-family : impact”>
Stylesheets : The Tool of the Web Design Gods
</H1>
<P STYLE = “text-indent : 1cm; background : yellow”>
Amaze your friends! Squash your enemies! </P>
</BODY>
</HTML>
Cascading Order
• What style will be used when there is more than one style specified for
an HTML element?
• Generally speaking we can say that all the styles will "cascade" into a
new "virtual" style sheet by the following rules, where number one has
Web Development Technique - Dr. D. P. Mishra
the highest priority:
• Inline style (inside an HTML element)
• External and internal style sheets (in the head section)
• Browser default
• So, an inline style (inside a specific HTML element) has the highest
priority,
• It means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
Ex.1
<html> <body>
<head> <h1>This is header 1</h1>
<style type="text/css">
Web Development Technique - Dr. D. P. Mishra
<h2>This is header 2</h2>
body {background-color: yellow}
<p>This is a paragraph</p>
h1 {background-color: #00ff00}
</body>
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)} </html>
</style>
</head>
Ex.2
<html> </style>
<head> </head>
<style type="text/css"> <body>
Web Development Technique - Dr. D. P. Mishra
body </body>
{ </html>
background-image:url('[Link]')
}
Ex.3
<html> </style>
<head> </head>
<style type="text/css"> <body>
Web Development Technique - Dr. D. P. Mishra
body </body>
{ </html>
background-image: url('[Link]');
background-repeat: repeat-y
}
Ex.4
html> </style>
<head> </head>
<style type="text/css"> <body>
Web Development Technique - Dr. D. P. Mishra
body </body>
{ /<html>
background-image: url('[Link]');
background-repeat: repeat-x
}
Ex.5
<html> </style>
<head> </head>
<style type="text/css"> <body>
Web Development Technique - Dr. D. P. Mishra
body </body>
{ </html>
background-image: url('[Link]');
background-repeat: no-repeat;
background-position: center;
}
Ex.6
<body>
<html>
<p>The image will not scroll with the rest of the page</p>
<head>
<style type="text/css"> <p>The image will not scroll with the rest of the page</p>
body <p>The image will not scroll with the rest of the page</p>
Web Development Technique - Dr. D. P. Mishra
{ <p>The image will not scroll with the rest of the page</p>
background-image:url('[Link]'); <p>The image will not scroll with the rest of the page</p>
background-repeat:no-repeat; <p>The image will not scroll with the rest of the page</p>
background-attachment:fixed <p>The image will not scroll with the rest of the page</p>
} </body>
</style> </html>
</head>
Ex.7
<html> <body>
<head> <p>This is some text</p>
<style type="text/css"> <p>This is some text</p>
Web Development Technique - Dr. D. P. Mishra
body <p>This is some text</p>
{ <p>This is some text</p>
background: #00ff00 url('[Link]') no-repeat fixed center; <p>This is some text</p>
} <p>This is some text</p>
</style> <p>This is some text</p>
</head> <p>This is some text</p>
</body>
</html>
EX: 8 To set color of text:
<html> <body>
<head> <h1>This is header 1</h1>
<style type="text/css"> <h2>This is header 2</h2>
Web Development Technique - Dr. D. P. Mishra
h1 {color: #00ff00} <p>This is a paragraph</p>
h2 {color: #dda0dd} </body>
p {color: rgb(0,0,255)} </html>
</style>
</head>
Ex.9 Give Space Between
Characters
<html> <body>
<head> <h1>This is header 1</h1>
<style type="text/css"> <h4>This is header 4</h4>
Web Development Technique - Dr. D. P. Mishra
h1 {letter-spacing: -3px} </body>
h4 {letter-spacing: 0.5cm} </html>
</style> •
</head>
EX: 10 Aligning text
<html> <body>
<head> <h1>This is header 1</h1>
<style type="text/css"> <h2>This is header 2</h2>
Web Development Technique - Dr. D. P. Mishra
h1 {text-align: center} <h3>This is header 3</h3>
h2 {text-align: left} </body>
h3 {text-align: right} </html>
</style>
</head>
Paragraph formatting
Whenever the browser
renders a <p> paragraph,
Web Development Technique - Dr. D. P. Mishra
p{
the text will inherit the
font-size: 120%;
color: dimgray; size (120 percent of
} normal) and the color
(“dimgray”).
Change Letter Case
• Let’s write code for paragraphs <p class="smallcaps">
that should be in small caps.
Your paragraph here.
[Link] {
Web Development Technique - Dr. D. P. Mishra
font-variant: small-caps; </p>
}
• If you want to change the case of
a set of text to a specific case, you
can use these CSS lines:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
Change Link Colors
• There are four different colors a a:link {
link can be assigned: color: gray;
}
• its standard color,
a:hover {
Web Development Technique - Dr. D. P. Mishra
• its visited color, color: rebeccapurple;
}
• its hover color,
a:active {
• and its active color (which it color: teal;
displays while you’re clicking on }
it). a:visited {
color: green;
• Here’s how we might change
those: }
Remove Link Underlines
• Underlined text clearly indicates a • Anything with the link (“a”) tag
link, it sometimes looks nicer to will remain un-underlined. Want
scrap that underline. to underline it when the user
hovers over it? Just add this
This is accomplished with the
Web Development Technique - Dr. D. P. Mishra
• below:
“text-decoration” attribute.
a:hover {
a{
text-decoration: underline;
text-decoration: none;
}
}
More Examples
Web Development Technique - Dr. D. P. Mishra
Simple Style
<HTML>
<HEAD>
<TITLE> My First Stylesheet </TITLE>
<STYLE TYPE = "text/css">
Web Development Technique - Dr. D. P. Mishra
H1 {color : green; font-size : 37px; font-family : impact}
P {text-indent : 1cm; background : yellow}
</STYLE>
</HEAD>
<BODY>
<H1> Stylesheets : The Tool of the Web Design Gods </H1>
<P> Amaze your friends! Squash your enemies! </P>
</BODY>
</HTML>
Ex- Class Selector
<HTML>
<HEAD>
<STYLE TYPE = "text/css">
[Link] {color : green}
Web Development Technique - Dr. D. P. Mishra
[Link] {color : purple}
[Link] {color : gray}
</STYLE>
</HEAD>
<BODY>
<P CLASS = "first"> The first paragraph, colored green </P>
<P CLASS = "second"> The second paragraph, colored purple </P>
<P CLASS = "third"> The third paragraph, colored gray </P>
</BODY>
</HTML>
Ex- Class Selector ..
<HTML>
<HEAD>
<STYLE TYPE = "text/css">
.hot {color : red; text-decoration : underline}
Web Development Technique - Dr. D. P. Mishra
</STYLE>
</HEAD>
<BODY>
<H1 CLASS = "hot"> Get a load of this! </H1>
<P> This is a normal paragraph </P>
<P CLASS = "hot"> This paragraph should be colored red </P>
</BODY>
</HTML>
Ex – Class & ID Selector
<HTML> <BODY>
<HEAD> <P> This is a normal paragraph </P>
<STYLE TYPE = "text/css"> <P CLASS = "narrow"> This paragraph
Web Development Technique - Dr. D. P. Mishra
should have wider margins and red
P {font-size : 14 pt; margin-left : 2em;
margin-right : 2em} color </P>
[Link] {color : red; margin-left : 5em; <P CLASS = "narrow" ID = "special4">
margin-right : 5em} This paragraph has wider margins, red
#special4 {border : 5px ridge red} color and red border </P>
</STYLE> </BODY>
</HEAD> </HTML>
Ex- Span Element
<HTML> <BODY>
<HEAD> <P> This is a normal paragraph </P>
<STYLE TYPE = "text/css"> <P CLASS = "narrow"> This
paragraph has wider margins and red
Web Development Technique - Dr. D. P. Mishra
P {font-size : 14 pt; margin-left : 2em; color </P>
margin-right : 2em}
<P CLASS = "narrow"><SPAN
[Link] {color : red; margin-left : CLASS=B> This is a paragraph to be
5em; margin-right : 5em}
<SPAN CLASS=A>set
.A {font-weight : bold; background- apart</SPAN> from the
color : yellow} rest.</SPAN></P>
.B {border : 5px ridge red} </BODY>
</STYLE> </HTML>
</HEAD>
Ex-Background
<HTML> color of their own and it can be different
from <BR>
<HEAD>
paragraph to paragraph</P>
<STYLE TYPE="text/css">
<P CLASS=B> Not only so, we can also have
.A {background-color : #FFFF66} our own localized <BR>
Web Development Technique - Dr. D. P. Mishra
.B {background-image : url([Link])} background images like this one, which can
also be different for <BR>
</STYLE>
different paragraphs. Thus background color
</HEAD> and images are visible <BR>
<BODY> at the same time. Not only so even words
like <SPAN CLASS=A>this one</SPAN> can
<P CLASS=A> Now paragraphs can have a
background<BR> have <BR> their own backgrounds.</P>
</BODY>
</HTML>
Ex-Background..
<HTML> <P><FONT FACE=times COLOR=red SIZE=4><I> George Gordon, Lord
<HEAD> Byron </I></FONT>
<STYLE TYPE="text/css"> <FONT FACE=impact COLOR=red SIZE=7><P> A book is not an isolated being: <BR>
.A {background-image : url([Link]); background-attachment : fixed} It is a relationship, an axis of innumerable relationships </P></FONT>
Web Development Technique - Dr. D. P. Mishra
</STYLE> <P><FONT FACE=times COLOR=red SIZE=4><I> Jorge Luis Borges </I></FONT>
</HEAD> <FONT FACE=impact COLOR=red SIZE=7><P> Society is now one polished
horde<BR>
<BODY CLASS=A>
formed of two mighty tribes, the Bores and <BR> and the Bored </P></FONT>
<FONT FACE=impact COLOR=red SIZE=7><P> A book is not an isolated being: <BR>
<P><FONT FACE=times COLOR=red SIZE=4><I> George Gordon, Lord Byron
It is a relationship, an axis of innumerable relationships </P></FONT>
</I></FONT>
<P><FONT FACE=times COLOR=red SIZE=4><I> Jorge Luis Borges </I></FONT>
</BODY>
<FONT FACE=impact COLOR=red SIZE=7><P> Society is now one polished horde
</HTML>
<BR>
formed of two mighty tribes, the Bores and <BR> and the Bored </P></FONT>
Ex-Border Attribute
<HTML> <P CLASS=B>Now paragraphs can have a border<BR>
<HEAD> of their own and it can be different from <BR>
<STYLE TYPE="text/css"> paragraph to paragraph (dotted) </P>
.A {border-style : dashed} <P CLASS=C>Now paragraphs can have a border <BR>
Web Development Technique - Dr. D. P. Mishra
.B {border-style : dotted} of their own and it can be different from <BR>
.C {border-style : double} paragraph to paragraph (double) </P>
.D {border-style : groove} <P CLASS=D>Now paragraphs can have a border <BR>
.E {border-style : ridge} of their own and it can be different from <BR>
</STYLE> paragraph to paragraph (groove) </P>
</HEAD> <P CLASS=E>Now paragraphs can have a border <BR>
<BODY> of their own and it can be different from <BR>
<P CLASS=A>Now paragraphs can have a border <BR> paragraph to paragraph (ridge) </P>
of their own and it can be different from <BR> </BODY>
paragraph to paragraph (dashed) </P> </HTML>
Font and Clear Attribute
<HTML> <H1 STYLE = "CLEAR : left"> Netscape
Corporation </H1>
<HEAD>
<IMG SRC = "[Link]" HEIGHT = 60
</HEAD> WIDTH = 60 STYLE = "FLOAT : left">
Web Development Technique - Dr. D. P. Mishra
<BODY> <H1 STYLE = "CLEAR : right"> Netscape
Corporation </H1>
<IMG SRC = "[Link]" HEIGHT = 60
WIDTH = 60 STYLE = "FLOAT : left"> <IMG SRC = "[Link]" HEIGHT = 60
WIDTH = 60 STYLE = "FLOAT : right">
<H1 STYLE = "CLEAR : left"> Netscape
Corporation </H1> <H1 STYLE = "CLEAR : right"> Netscape
Corporation </H1>
<IMG SRC = "[Link]" HEIGHT = 60
WIDTH = 60 STYLE = "FLOAT : right"> </BODY>
</HTML>
Font Attribute
<HTML> paragraph to paragraph (dashed)</P>
<HEAD> <P CLASS=B>Now paragraphs can have a border<BR>
<STYLE TYPE="text/css"> of their own and it can be different from <BR>
.A {font-family : arial; font-style : itaLIc} paragraph to paragraph (dotted)</P>
Web Development Technique - Dr. D. P. Mishra
.B {font-size : 30px} <P CLASS=C>Now paragraphs can have a border<BR>
.C {font-variant : small-caps} of their own and it can be different from <BR>
.D {font-weight : 900} paragraph to paragraph (double)</P>
</STYLE> <P CLASS=D>Now paragraphs can have a border<BR>
</HEAD> of their own and it can be different from <BR>
<BODY> paragraph to paragraph (groove)</P>
<BASEFONT COLOR=green> </BODY>
<P CLASS=A>Now paragraphs can have a border<BR> </HTML>
of their own and it can be different from <BR>
Letter Spacing
<HTML> <P CLASS=B>Now paragraphs can have a border<BR>
<HEAD> of their own and it can be different from <BR>
<STYLE TYPE="text/css"> paragraph to paragraph (dotted)</P>
.A {position : absolute; left : 80px; top : 30px; letter-spacing : 1px} <BASEFONT COLOR=blue>
Web Development Technique - Dr. D. P. Mishra
.B {position : absolute; left : 60%; top : 30px; letter-spacing : -3px} <P CLASS=C>Now paragraphs can have a border<BR>
.C {position : absolute; right : 30pt; top : 50%; letter-spacing : 5px} of their own and it can be different from <BR>
.D {position : absolute; right : 50pt; bottom : 10%; letter-spacing : 10px} paragraph to paragraph (double)</P>
.E {position : absolute; left : 100px; top : 150px} <BASEFONT COLOR=black>
</STYLE> <P CLASS=D>Now paragraphs can have a border<BR>
</HEAD><BODY> of their own and it can be different from <BR>
<BASEFONT COLOR=green> paragraph to paragraph (groove)</P> <P CLASS=E><IMG SRC="[Link]"
HEIGHT=100></P>
<P CLASS=A>Now paragraphs can have a border<BR>
</BODY>
of their own and it can be different from <BR>paragraph to paragraph (dashed)</P>
</HTML>
<BASEFONT COLOR=red>
List Style Attribute
<HTML> <UL CLASS=B> <LI>three
<HEAD> <LI>one </OL>
<STYLE TYPE="text/css"> <LI>two <OL CLASS=F>
.A {list-style-image : <LI>three <LI>four
url([Link])} </UL> <LI>five
.B {list-style-position : inside} <UL CLASS=C> <LI>six
.C {list-style-position : outside} <LI>four </OL>
Web Development Technique - Dr. D. P. Mishra
.D {list-style-type : circle} <LI>five </BODY>
.E {list-style-type : lower-alpha} <LI>six </HTML>
.F {list-style-type : upper-roman} </UL>
</STYLE> <BASEFONT COLOR=blue>
</HEAD> <UL CLASS=D>
<BODY> <LI>one
<BASEFONT COLOR=green> <LI>two
<UL CLASS=A> <LI>three
<LI>one </UL>
<LI>two <BASEFONT COLOR=black>
<LI>three <OL CLASS=E>
</UL> <LI>one
<BASEFONT COLOR=red> <LI>two
Styling Forms
Web Development Technique - Dr. D. P. Mishra
Basic Input Styling
<input type="text" placeholder="Enter your name">
<style>
input {
Web Development Technique - Dr. D. P. Mishra
padding: 10px;
border: 2px solid #007BFF;
border-radius: 8px;
font-size: 16px;
}
</style>
Effects on Input
<input type="email" placeholder="Email address">
<style>
input:focus {
Web Development Technique - Dr. D. P. Mishra
border-color: #28a745;
outline: none;
box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}
</style>
Styling Placeholder
<input type="password" placeholder="Enter password">
<style>
Web Development Technique - Dr. D. P. Mishra
::placeholder {
color: #999;
font-style: italic;
}
</style>
Custom Button Styling
<button type="submit">Submit</button> button:hover {
<style> background: #0056b3;
button { }
background: linear-gradient(90deg, #007BFF,
Web Development Technique - Dr. D. P. Mishra
</style>
#0056b3);
border: none;
padding: 12px 20px;
color: #fff;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
Checkbox Customization
<label>
<input type="checkbox"> I agree
</label>
Web Development Technique - Dr. D. P. Mishra
<style>
input[type="checkbox"] {
accent-color: #ff5722; /* modern CSS */
}
</style>
Radio Button Styling
<label><input type="radio" name="gender"> Male</label>
<label><input type="radio" name="gender"> Female</label>
Web Development Technique - Dr. D. P. Mishra
<style>
input[type="radio"] {
accent-color: #9c27b0;
}
</style>
Select Dropdown Styling
<select> <style>
<option>Choose country</option> select {
<option>India</option> padding: 8px;
Web Development Technique - Dr. D. P. Mishra
<option>USA</option> border: 2px solid #007BFF;
</select> border-radius: 6px;
background: #f9f9f9;
}
</style>
Validation Styling
<input type="email" required placeholder="Enter email">
<style>
Web Development Technique - Dr. D. P. Mishra
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
</style>
Responsive Form with Flexbox
<form> <style>
<input type="text" placeholder="First Name"> form {
display: flex;
<input type="text" placeholder="Last Name">
Web Development Technique - Dr. D. P. Mishra
gap: 10px;
</form>
flex-wrap: wrap;
}
input {
flex: 1;
min-width: 150px;
}
</style>
Card Style Login Form
<div class="form-card"> <style>
.form-card {
<h2>Login</h2> width: 300px;
margin: 30px auto;
<input type="text" padding: 20px;
Web Development Technique - Dr. D. P. Mishra
placeholder="Username"> border-radius: 12px;
background: #fff;
<input type="password" box-shadow: 0 4px 15px
placeholder="Password"> rgba(0,0,0,0.2);
}
<button>Login</button> .form-card input, .form-card button {
width: 100%;
</div> margin: 8px 0;
padding: 10px;
}
</style>
Styling Forms
<form action="/submit" method="post">
<input type="text" name="name" placeholder="Your name">
<input type="password" name="password" placeholder="Your password">
Web Development Technique - Dr. D. P. Mishra
<input type="submit" value="Submit">
</form>
Styling Input Field
<input type="text" name="name" id="name" >
Web Development Technique - Dr. D. P. Mishra
We can add the following styles to the input field :
• Width • Box shadow
• Padding • Font
• Margin • Colored input
• Border • Focused input
• Border radius
Colored Input
input {
background-color: purple;
color: white;
width: 100%;
padding: 10px;
Web Development Technique - Dr. D. P. Mishra
border-radius: 5px;
box-sizing: border-box;
}
In the above example :
background-color: purple adds a purple color to input background
color:white sets the text color to white
Styling Buttons
input[type="submit"] {
background-color: purple;
width: 180px;
display: block;
margin: 0px auto;
Web Development Technique - Dr. D. P. Mishra
border: none;
border-radius: 5px;
font-weight: bold;
font-size: 18px;
font-family: "Courier New", Courier, monospace;
color: white;
margin-top: 30px;
padding: 20px;
text-align: center;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: indigo;
Web Development Technique - Dr. D. P. Mishra