Scribd
Upload
13 views

CSS III Second

CSS selectors are used to select and style HTML elements on a page. There are five main categories of CSS selectors: simple selectors select elements by name, id or class; combinator selectors select elements based on their relationship; pseudo-class selectors select elements based on a certain state; pseudo-element selectors select and style parts of elements; and attribute selectors select elements based on attributes or values.

Uploaded by

Vikas Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

CSS III Second

CSS selectors are used to select and style HTML elements on a page. There are five main categories of CSS selectors: simple selectors select elements by name, id or class; combinator selectors select elements based on their relationship; pseudo-class selectors select elements based on a certain state; pseudo-element selectors select and style parts of elements; and attribute selectors select elements based on attributes or values.

Uploaded by

Vikas Yadav
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

CSS Selectors

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

We can divide CSS selectors into five categories:

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

 Combinator selectors (select elements based on a specific relationship


between them)

 Pseudo-class selectors (select elements based on a certain state)

 Pseudo-elements selectors (select and style a part of an element)

 Attribute selectors (select elements based on an attribute or attribute value


<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
The CSS id Selector
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

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


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

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the class name.
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>


<p class="center">Red and center-aligned paragraph.</p>

</body>
</html>

<p class="center large">This paragraph refers to two classes.</p>

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>


<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

The CSS Grouping Selector


The grouping selector selects all the HTML elements with the same style
definitions.
Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):

<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

How To Add CSS


Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website
by changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.

<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"mystyle.css"
body {
background-color: lightblue;
}

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

Internal CSS

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

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

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

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

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

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

<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS – Fonts:
We can set following font properties of an element −

 The font-family property is used to change the face of a font.


 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font properties.

<html>
<head>
</head>

<body>
<p style = "font-style:italic;">
<p style = "font-variant:small-caps;">
This text will be rendered in italic style
</p>
<p style = "font-weight:bold;">
This font is bold.
</p>
<p style = "font-weight:bolder;">
This font is bolder.
</p>

<p style = "font-weight:500;">


This font is 500 weight.
</p>

<p style = "font-size:20px;">


This font size is 20 pixels
</p>

<p style = "font-size:small;">


This font size is small
</p>

<p style = "font-size:large;">


This font size is large
</p>

<p style = "font-size-adjust:0.61;">


This text is using a font-size-adjust value.
</p>

<p style = "font:italic small-caps bold 15px georgia;">


Applying all the properties on the text at once.
</p>

</body>
</html>
CSS – Text:
A text refers to a piece of written or printed information in the form
of words or characters that can be read and understood. CSS
provides a number of properties to format text in beautiful way.

 color: Sets the color of the text.


 text-align Sets the alignment of the text.
 text-align-last: Sets the alignment of the last line of a block of text.
 direction: Sets the direction of the text of an element.
 text-indent: Sets the indentation of the first line of the text.
 letter-spacing: Specifies the space between the letters or characters that
make up a word or text.
 word-spacing: Specifies the space between the words in a text.
 white-space: Controls the white space flow inside the text in an element.
 text-decoration: Adds an underline, overline, and strikethrough over a
piece of text.
 text-decoration-skip: Determines what part of the content of the element,
where text decoration is affecting, needs to be skipped.
 text-decoration-skip-ink: Specifies how the overline and underline text
decoration lines are drawn around glyph ascenders and descenders.
 text-transform: Converts text to uppercase or lowercase letters.
 text-emphasis: Applies emphasis marks to text (except spaces and
control characters).
 text-shadow: Adds shadow to the text.
 line-break: Controls how to set the rule for a line break.
 word-break: Controls how to set the rule for a word break.

text-align :
<body>
<h2>Setting Text Alignment using CSS</h2>
<p style="text-align: left;">Text Left Alignment.</p>
<p style="text-align: right;">Text Right Alignment.</p>
<p style="text-align: center;">Text Center Alin.</p>

<p style="text-align: justify; border: 2px solid red; width:


200px; height: 100px;"> Text Justify Alignment. This alignment
aligns the text based on both the margins, left and right.</p>
</body>

text-align-last:
 LTR (Left-to-Right): Default value, used for languages that are written from
left to right, like English. You don't need to specify this value explicitly unless
you want to override an inherited right-to-left direction.
 RTL (Right-to-Left): Used for languages that are written from right to left, such as
Arabic or Hebrew. When using rtl, text will be aligned right by default.

<body>
<p style = "direction: rtl;">
Right to Left
</p>
<p style = "direction: ltr;">
Left to Right
</p>
</body>

text-decoration:
The CSS text-decoration property helps in adding extra decoration to the text, such as, adding a
line (underline, strikethrough, overline) and color, style and thickness to the line.
It is a shorthand property to the following properties:
 text-decoration-line: Sets the type of decoration line (underline, strikethrough or
overline).
 text-decoration-color: Sets the color to the text decoration.
 text-decoration-style: Sets the style to the text decoration (dotted, dashed, solid, wavy,
double, etc.)
 text-decoration-thickness: Sets the thickness to the text decoration.

<html>
<head>
<style>
.overline{
text-decoration: overline solid red 5px;
}
.line-through{
text-decoration: line-through solid green 1px;
}

.underline{
text-decoration: underline dashed 2pt blue;
}
</style>
</head>
<body>
<h2>Text Decoration using CSS</h2>
<p class="overline">Overline text decoration.</p>
<p class="line-through">Line-through text decoration.</p>
<p class="underline">Underline text decoration.</p>
</body>
</html>
Text Transform:
The CSS text-transform property is used to change the appearance of text by transforming it in
various ways. It can be used to convert text to uppercase, lowercase, capitalize the first letter of
each word, or even capitalize all letters.
The text-transform property can have one of the following values:
 lowercase: Transforms all text to lowercase.
 uppercase: Transforms all text to uppercase.
 capitalize: Capitalizes the first character of each word.
 none: No text transformation is applied.
 full-width: Transforms all characters to their full-width variant.
 full-size-kana: Transforms all the small Kana characters to full-size Kana characters.
This is specifically used for <ruby> annotation text.
 initial: Sets the text-transform value to its default value (none).
 inherit: Inherits the text-transform value from its parent element.
 unset: Removes any previously set text-transform value.
<html>
<body>
<h2>Text Transform Examples</h2>
<p style="text-transform: capitalize;">This text will be capitalized.</p>

<p style="text-transform: lowercase;">This text will be in lowercase.</p>

<p style="text-transform: uppercase;">This text will be in upercase.</p>

<p style="text-transform: none;">This text will not have any transformation.</p>

<p style="text-transform: full-width;">TRANSFORMATION OF TEXT AS FULL-


WIDTH.</p>
</body>
</html>

Text Indentation:
Indentation is the space between the margin and the first line of text. Proper indentation enhances
the readability and clarity of text on a page. The following values can be passed to this property:

 length: Any specific length {pixels (px), points (pt), ems (em), etc}. Default value is 0.
 percentage (%): The value passed is in relation to the percentage of the width of the
parent element.
 each-line: Affects the first line of a block of text along with each line after a forced line
break.
 hanging: Indentation is inverted, except for the first line.
 initial: Sets the text-indent to its default value.
 inherit: Allows to inherit the text-indent value from its parent element.
<html>
<head>
</head>
<body>
<h2>Text indentation Examples</h2>
<p style="text-indent: 2cm;">Text indentation at 2 cm.</p>
<p style="text-indent: 2in;">Text indentation at 2 inches.</p>
<p style="text-indent: 20%;">Text indentation at 20%.</p>
</body>
</html>

Output:

Text indentation Examples


Text indentation at 2 cm.

Text indentation at 2 inches.

Text indentation at 20%.

Text Letter Spacing:


The CSS property letter-spacing is used to adjust the space between the letters of a text. The
space can either be increased or decreased between the letters.
 normal: Default value and represents the normal amount of space between letters.
 length: Any specific length {pixels (px), points (pt), ems (em), or percentages (%)}.
 initial: Sets the letter-spacing to its default value.
 inherit: Allows to inherit the letter-spacing value from its parent element.

<html>
<body>
<h2>Letter Spacing Examples</h2>
<p style="letter-spacing: normal;">Letter spacing normal.</p>
<p style="letter-spacing: 5px;">Letter spacing increased.</p>
<p style="letter-spacing: -1px;">Letter spacing decreased.</p>
</body>
</html>

Output:

Letter Spacing Examples


Letter spacing normal.

Letter spacing increased.

Letter spacing decreased.

Text Shadow:
The text-shadow property is used to add a shadow effect to text. It allows you to specify the
color, offset, blur-radius, and spread-radius of the shadow. Following is the syntax of text-
shadow:

<html>
<head>
</head>
<body>
<h2>Text Shadow Examples</h2>
<p style="text-shadow: 2px 5px yellow;"> Simple Text shadow </p>
<p style="text-shadow: 5px 5px 2px #ff00ff;">Text shadow with blur radius</p>
<p style="text-shadow: 1px 1px 2px green, 0 0 1em yellow, 0 0 0.2em red;">Multiple
shadows</p>
<p style="text-shadow: 0px 0px 10px rgb(26, 69, 105); ">Text shadow with RGB colors</p>
</body>
</html>

Output:
CSS - Using Images:
CSS plays a good role to control image display. You can set the following
image properties using CSS.

 The border property is used to set the width of an image border.


 The height property is used to set the height of an image.
 The width property is used to set the width of an image.
 The -moz-opacity property is used to set the opacity of an image.
<html>
<head>
</head>

<body>
<img style = "border:0px;" src = a1.png"; height:100px; width:150px; />
<br />
<img style = "border:3px dashed red;" src = a1.png" />

<img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = a1.png" />

</body>
</html>

Responsive Image Gallery


<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
}

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

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

div.desc {
padding: 15px;
text-align: center;
}

1
*{
box-sizing: border-box;
}

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

<!-- space of Two Image -->


@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

<!-- For Responsive Code -->


@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}

<!-- for space -->


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

<h2>Responsive Image Gallery</h2>

<h4>Resize the browser window to see the effect.</h4>

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

<div class="responsive">
<div class="gallery">

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

<div style="padding:6px;">

<p >This example use media queries to re-arrange the images on different screen sizes: for
screens larger than 700px wide, it will show four images side by side, for screens smaller than
700px, it will show two images side by side. For screens smaller than 500px, the images will
stack vertically (100%).</p>

<p>You will learn more about media queries and responsive web design later in our CSS </p>

</div>
</body>
</html>

Output:

CSS – Links:
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

3
CSS – Tables:
1.
<html>
<head>
<style>
table {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse; width: 100%;
}
td, th {
border: 1px solid #ddd; padding: 8px;
}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #ddd;}
th {
padding-top: 12px; padding-bottom: 12px;
text-align: left; background-color: #40a944; color: white;
}
</style>
</head>
<body>
<h1>CSS Styled Table</h1>
<table>
<tr>
<th>Name</th>
<th>Address</th>
<th>Country</th>
</tr>
<tr>
<td>Nuha Ali</td>
<td>My Home Bhooja</td>
<td>India</td>
</tr>
<tr>
<td>Zara Ali</td>
<td>Students Roosters</td>
<td>England</td>
</tr>
<tr>
<td>Mahira</td>
<td>Orland Park</td>
<td>Chicago</td>
</tr>

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

4
2. Collapse Table Border using CSS
The property border-collapse ensures that borders between table cells collapse
into a single border, creating a cleaner look. Property border-collapse can have
values collapse

<html>
<head>
<style>
table {
border-collapse: collapse;
border: 3px solid;
width: 100%; padding:5px;
}
th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<tr>
<th>Name</th>
<th>Address</th>
<th>Country</th>
</tr>
<tr>
<td>Nuha Ali</td>
<td>My Home Bhooja</td>
<td>India</td>
</tr>
<tr>
<td>Zara Ali</td>
<td>Students Roosters</td>
<td>England</td>
</tr>
<tr>
<td>Mahira</td>
<td>Orland Park</td>
<td>Chicago</td>
</tr>
</table>
</body>
</html>

5
3. Setting Table Border Spacing
The border-spacing property specifies the distance that separates adjacent
cells' borders in a table. This property may be specified as either one or two
values.

 border-spacing: 2px;: If one value is passed, the spacing is applied to both


vertical and horizontal borders.
 border-spacing: 1cm 2em;: If two values are passed, the first value defines the
horizontal spacing between cells (i.e., the space between cells in adjacent
columns), and the second value defines the vertical spacing between cells
(i.e., the space between cells in adjacent rows).
<html>
<head>
<style>
table {
border-collapse: separate; border-spacing: 1em; width: 100%;
padding: 5px; border: 3px solid #40a944;
}
td {
width: 1.5em; height: 1.5em; background: #d2d2d2;
text-align: center; vertical-align: middle;
}
</style>
<body>
<table>
<tr>
<th>Name</th>
<th>Address</th>
<th>Country</th>
</tr>
<tr>
<td>Nuha Ali</td>
<td>My Home Bhooja</td>
<td>India</td>
</tr>
<tr>
<td>Zara Ali</td>
<td>Students Roosters</td>
<td>England</td>
</tr>
<tr>
<td>Mahira</td>
<td>Orland Park</td>
<td>Chicago</td>
</tr>
</table> </body></html>

6
Lists in CSS:
Lists are useful as they present the information in a structured and organized
manner. Lists improve the readability and comprehension of content on a web
page. Lists are commonly used to display items, steps, options, or any other type of
related information that should be presented sequentially or in a group

<html>
<head>
<!—for listing in image form ->
<style>
ul {
list-style-image: url('/images/icon-bullet.png');
}
</style>

<!—for listing in outside and inside form ->

<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>

</head>
<body>
<h2>CSS Lists - Image Marker</h2>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

</body>
</html>

7
Lists - Setting Colors
<html>
<head>
<style>
ol {
list-style: upper-latin; background: Aquamarine; padding:20px;
}
ol li {
background: silver; padding:10px; font-size:20px; margin:10px;
}
ul {
list-style: square inside; background: teal; padding:20px;
}
ul li {
background: olive; color:white; padding:10px; font-size:20px; margin:10px;
}
</style>
</head>
<body>
<h2>CSS Lists - Setting Colors</h2>

<ol>
<li>Java.</li>
<li>HTML.</li>
<li>CSS.</li>
<li>React.</li>
</ol>
<ul>
<li>Java.</li>
<li>HTML.</li>
<li>CSS.</li>
<li>React.</li>
</ul>

</body>
</html>

8
CSS Box
It is a design and layout. The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.

Explanation of the different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

Example:

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

<h2>Demonstrating the Box Model</h2>

<div> ITMGIDA Gorakhpur </div>


</body> </html>
CSS Buttons

9
<html>
<head>
<style>
.button {
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>
<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">
</body>
</html>

Rounded Buttons
Use the border-radius property to add rounded corners to a button:

<html>

10
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

.button1 {border-radius: 2px;}


.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>

<h2>Rounded Buttons</h2>

<p>Add rounded corners to a button with the border-radius property:</p>

<button class="button button1">2px</button>


<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>

</body>
</html>

Hoverable Buttons
<html>
<head>

11
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.3s;
cursor: pointer;
}

.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}

.button1:hover {
background-color: #4CAF50;
color: white;
}

.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}

.button2:hover {
background-color: #008CBA;
color: white;
}

.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}

.button3:hover {
background-color: #f44336;
color: white;
}

.button4 {
background-color: white;

12
color: black;
border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}

.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>

<h2>Hoverable Buttons</h2>

<p>Use the :hover selector to change the style of the button when you move the mouse
over it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed
of the "hover" effect:</p>

<button class="button button1">Green</button>


<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>

</body>
</html>

Bordered Button Group


Use the border property to create a bordered button group:

<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;

13
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}

.btn-group .button:not(:last-child) {
border-right: none; /* Prevent double borders */
}

.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Bordered Button Group</h2>

<p>Add borders to create a bordered button group:</p>

<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>

<p style="clear:both"><br>Remember to clear floats after, or else will this p element


also float next to the buttons.</p>

</body></html>

Vertical Button Group


<html>
<head>
<style>
.btn-group .button {
background-color: #4CAF50; /* Green */
border: 1px solid green;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;

14
cursor: pointer;
width: 150px;
display: block;
}

.btn-group .button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}

.btn-group .button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>Vertical Button Group</h2>

<div class="btn-group">
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</div>

</body>
</html>

Shadow Buttons
Use the box-shadow property to add shadows to a button:

<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;

15
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>

<h2>Shadow Buttons</h2>

<p>Use the box-shadow property to add shadows to the button:</p>

<button class="button button1">Shadow Button</button>


<button class="button button2">Shadow on Hover</button>

</body>
</html>

Animated Button - "Pressed Effect"


<html>
<head>
<style>
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;

16
}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #ffadc3;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
</style>
</head>
<body>

<h2>Animated Button - "Pressed Effect"</h2>

<button class="button">Click Me</button>

</body>
</html>

Image Reflection
The box-reflect property is used to create an image reflection.

The value of the box-reflect property can be: below, above, left , or right.

<html>
<head>
<style>
img {
-webkit-box-reflect: right;
}
</style>
</head>

17
<body>

<h1>CSS Image Reflection</h1>

<p>Show the reflection below the image:</p>


<img src="img_tree.png">

</body>
</html>

Responsive Web Design:


Responsive web design provides an optimal experience, easy reading and
easy navigation with a minimum of resizing on different devices such as
desktops, mobiles and tabs).

Responsive web design is not a program or a JavaScript. It is uses only HTML


and CSS.

Example of Responsive web page with Media Query:


<html>
<head>
<style>

.example {
padding: 20px;
color: white;
}

body {

18
background-color: lightpink;
}
@media screen and (max-width: 420px) {
body {
background-color: lightblue;
}
}

/* Extra small devices (phones, 600px and down) */


@media only screen and (max-width: 600px) {
.example {background: red;}
}

/* Large devices (laptops/desktops, 992px and up) */


@media only screen and (min-width: 992px) {
.example {background: orange;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
}
</style>
</head>
<body>
<p class="example"> If screen size is less than 420px, then it will show lightblue
color, or else it will show light pink color </p>
</body>
</html>

Bootstrap responsive web design:


Bootstrap is most popular web design framework based on HTML,CSS and
Java script and it helps you to design web pages in responsive way for all
devices.

<html>
<head>

<link rel = "stylesheet" href =


"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>
body {
color:green;
}
</style>
</head>
<body>

19
<div class = "container">

<div class = "jumbotron">


<h1>ITM Gorakhpur</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</div>

<div class = "row">


<div class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alliance, led by Google, and other companies.
</p>
</div>

<div class = "col-md-4">


<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages presentable.
</p>
</div>

<div class = "col-md-4">


<h2>Java</h2>

<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</div>
</div>

</body>
</html>

20
CSS Forms
<html>
<head>
<style>

input[type=text1] {
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
}

21
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid red;
border-radius: 8px;
display: inline-block;

// background-color: #3CBC8D;
}

input[type=submit] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}

input[type=submit]:hover {
background-color: #45a049;
}

</style>
</head>
<body>

<h2>Input fields with borders</h2>

<form>
<label for="fname">First Name</label>
<input type="text1" name="search" placeholder="Search..">
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
<input type="submit" value="Submit">
</form>

</body>
</html>

22

You might also like