Scribd
Upload
2 views

unit-6-css

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its purpose in styling web pages, methods of adding CSS (external, internal, and inline), and various properties such as colors, fonts, backgrounds, borders, margins, paddings, height/width, positioning, and overflow. It includes examples of CSS code for practical understanding. Overall, it serves as a guide for effectively using CSS to enhance web design and layout.

Uploaded by

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

unit-6-css

The document provides a comprehensive overview of Cascading Style Sheets (CSS), detailing its purpose in styling web pages, methods of adding CSS (external, internal, and inline), and various properties such as colors, fonts, backgrounds, borders, margins, paddings, height/width, positioning, and overflow. It includes examples of CSS code for practical understanding. Overall, it serves as a guide for effectively using CSS to enhance web design and layout.

Uploaded by

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

Unit-6 Cascading Style Sheets (CSS)

CSS:
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
• CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External stylesheets are stored in CSS files

How to Add CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

External CSS
External styles are defined within the <link> element, inside the <head>
section of an HTML page.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

An external style sheet can be written in any text editor, and must be saved
with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

Example:

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

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

Internal CSS
Internal styles are defined within the <style> element, inside the <head>
section of an HTML page.
Example:
<!DOCTYPE html>
<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
Inline styles are defined within the "style" attribute of the relevant element.
Example:
<!DOCTYPE html>
<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 classes and ids


In CSS, classes and IDs are used to identify and style specific elements on
a webpage.
A class is a set of style rules that can be applied to multiple HTML elements.
Classes are identified using a period (".") followed by the class name in the
CSS code.
example:
.some-class
{
color: blue;
font-size: 14px;
}

To apply this class to an HTML element, add the class name to the class
attribute of the element, like this:

<p class="some-class">This paragraph has blue text and a font size of


14 pixels.</p>

IDs, on the other hand, are used to uniquely identify a single HTML
element. IDs are identified using a hash ("#") followed by the ID name in the
CSS code.
example:
#some-id {
background-color: yellow;
border: 1px solid black;
}

To apply this ID to an HTML element, add the ID name to the id attribute of


the element, like this:
<div id="some-id">This div has a yellow background and a black
border.</div>

It's important to note that while IDs must be unique and can only be used
once on a page, classes can be used on multiple elements. Additionally,
classes and IDs can be combined to apply different styles to different
elements that share a class or ID. For example, you could apply a class to
all paragraphs on a page, but then use an ID to apply a different style to a
specific paragraph.

CSS Colors
Colors are specified using predefined color names, or RGB, HEX values.

1.CSS Color Names

In CSS, a color can be specified by using a predefined color name: red,


blue, gray, orange etc.

Example:

<!DOCTYPE html>
<html>
<body>

<h3 style="color:red;">Hello World</h3>

<p style="color:blue;">mahunyal </p>

<p style="color:orange;">mahunyal </p>

</body>
</html>
2.CSS RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.

For example,
rgb(255, 0, 0) is displayed as red.
rgb(0, 255, 0) is displayed as green.
rgb(0, 0, 255) is displayed as blue.
rgb(255, 255, 255) is displayed as white.
rgb(0, 0, 0) is displayed as black.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using RGB values</h1>

<h2 style="background-color:rgb(255, 0, 0);">red</h2>


<h2 style="background-color:rgb(0, 0, 255);">blue</h2>
</body>
</html>

3.CSS HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG


(green) and BB (blue) hexadecimal integers specify the components of the
color.

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between
00 and ff (same as decimal 0-255).

For example,
#ff0000 is displayed as red.
#000000 is displayed as black.
#ffffff is displayed as white.

Example:

<!DOCTYPE html>
<html>
<body>

<h1>Specify colors using HEX values</h1>

<h2 style="background-color:#ff0000;">red</h2>
<h2 style="background-color:#0000ff;">blue</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>

</body>
</html>

CSS Font
In CSS, the font property is used to define the font style for an HTML
element.
Here are some commonly used font properties:
1.font-family: This property is used to specify the font family for an
element. It takes a list of font names, in order of preference.
For example:
code
body { font-family: Arial, sans-serif; }
This will set the font family for the body element to Arial, or a sans-serif font
if Arial is not available.

2.font-size: This property is used to set the font size for an element. It
takes a value in pixels, ems, or other units.
For example:
code
h1 { font-size: 2em; }
This will set the font size for all h1 elements to twice the size of the parent
element's font size.

3.font-style: This property is used to set the font style for an element, such
as italic or normal.
For example:
code
p { font-style: italic; }
This will set the font style for all p elements to italic.

4.font-weight: This property is used to set the font weight for an element,
such as bold or normal.
For example:
code
p { font-weight: bold; }
This will set the font weight for all p elements to bold.
5.text-decoration: This property is used to add text decorations to an
element, such as underline or line-through.
For example:
code
a { text-decoration: underline; }
This will add an underline to all links on the page.

6.line-height: This property is used to set the line height for an element,
which affects the spacing between lines of text.
For example:
code
p { line-height: 1.5; }
This will set the line height for all paragraphs to 1.5 times the font size.

CSS Background
In CSS, the background property is used to set the background of an HTML
element. It can be used to set a background color, an image, or a
combination of both.
Here are some examples of using the background property:
1. Setting a background color:
code
body
{
background-color: #f0f0f0;
}
This will set the background color of the body element to a light gray color.
2. Setting a background image:
code
body
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
}
This will set the background of the body element to an image called
"image.jpg". The background-repeat property is used to prevent the image
from repeating, and the background-size property is used to make the image
cover the entire background.
3. Using a combination of background color and image:
code
body
{ background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
}

This will set the background of the body element to a light gray color, and
then overlay an image called "image.jpg" on top of it.
The background property can also be used to set other background-related
properties, such as background-position to set the position of the
background image, background-attachment to control whether the
background image scrolls with the content or stays fixed, and background-
blend-mode to blend the background color and image together.
CSS Border
In CSS, the border property is used to create a border around an HTML
element. Here are some examples of using the border property:
1.Setting the border style:

div {
border-style: solid;
}

This will create a solid border around all div elements.


2.Setting the border color:

h1 {
border-color: red;
}
This will create a red border around all h1 elements.
3.Setting the border width:

img {
border-width: 2px;
}
This will create a 2-pixel-wide border around all img elements.
4.Using shorthand for multiple border properties:

button {
border: 1px solid black;
}
This will create a 1-pixel-wide solid black border around all button elements.
The border property can be used to set many other border properties, such
as border-radius to create rounded corners, border-image to use an image
for the border, and border-collapse to control how borders are collapsed
between adjacent table cells.

CSS Margins and Paddings

In CSS, margin and padding are two properties that are used to create space
around and within an HTML element, respectively.
Margin is the space outside of an element's border, which separates it from
other elements on the page. Margins can be set using the margin property
and can be defined for each side of the element separately using margin-
top, margin-right, margin-bottom, and margin-left. You can set margin
values in pixels, ems, rems, or percentages.
For example:
.box {
margin: 20px; /* sets a margin of 20 pixels on all sides */
margin-top: 10px; /* sets a margin of 10 pixels on the top side only */
margin-left: 5%; /* sets a margin of 5% on the left side only */
}

Padding, on the other hand, is the space between an element's content and
its border. It can be set using the padding property and can be set separately
for each side of the element using padding-top, padding-right, padding-
bottom, and padding-left. Like margins, padding can be specified in various
units.
For example:
.box {
padding: 20px; /* sets a padding of 20 pixels on all sides */
padding-top: 10px; /* sets a padding of 10 pixels on the top side only
*/
padding-left: 5%; /* sets a padding of 5% on the left side only */
}

CSS Height/Width
In CSS, you can use the height and width properties to set the dimensions
of an HTML element.
The height property sets the height of the element, while the width property
sets the width. You can specify values in pixels, ems, rems, percentages, or
other units.
Here's an example of how to use the height and width properties:

.box {
height: 200px;
width: 300px;
}

This would set the height of the .box element to 200 pixels and the width to
300 pixels.

If you want to maintain the aspect ratio of an element, you can set either the
height or width to auto.
For example, if you want an image to scale with its container, but maintain
its aspect ratio, you could do something like this:
img {
max-width: 100%;
height: auto;
}
This would set the maximum width of the image to 100% of its container, and
the height would automatically adjust to maintain the aspect ratio.

CSS Position and Float


In CSS, the position and float properties are used to control the layout and
positioning of HTML elements.
The position property sets the positioning method of an element. There are
several possible values for the position property:
• static: the default positioning method for all HTML elements. The element
is positioned according to the normal flow of the document.
• relative: the element is positioned relative to its normal position. You can
use the top, right, bottom, and left properties to offset the element from its
normal position.
• absolute: the element is positioned relative to the nearest positioned
ancestor element (i.e., an element with a position value of relative,
absolute, or fixed). You can use the top, right, bottom, and left properties
to position the element within its ancestor element.
• fixed: the element is positioned relative to the viewport (i.e., the browser
window). You can use the top, right, bottom, and left properties to position
the element within the viewport.
Here's an example of how to use the position property to position a div
element:
div {
position: absolute;
top: 100px;
left: 50px;
}
This would position the div element 100 pixels down from the top of its
nearest positioned ancestor element and 50 pixels to the right of the left edge
of its nearest positioned ancestor element.

The float property is used to set an element to float to the left or right of its
containing element. When an element is floated, it is taken out of the normal
document flow and other content flows around it. There are two possible
values for the float property:
• left: the element is floated to the left of its containing element.
• right: the element is floated to the right of its containing element.
Here's an example of how to float an image element to the left of its
containing element:
img {
float: left;
margin-right: 10px;
}

This would float the image to the left of its containing element and add a 10-
pixel margin to its right side to prevent other content from overlapping with
the image.
It's important to note that when elements are floated, they may not take up
the full width of their containing element. To prevent this, you can use the
clear property to ensure that other content does not flow around the floated
element.
Here are some possible values for the clear property:
• none: the element is allowed to float alongside any adjacent content.
• left: the element is not allowed to float to the left of any preceding
floated elements.
• right: the element is not allowed to float to the right of any preceding
floated elements.
• both: the element is not allowed to float to the left or right of any
preceding floated elements.
Here's an example of how to clear any preceding floats and ensure that
other content does not flow around a div element:
div {
clear: both;
}

CSS Overflow

In CSS, the overflow property is used to control what happens when the
content of an element overflows its area. This can happen if the content is
larger than the element's dimensions, or if the element has a fixed height or
width and the content is too large to fit.
There are four possible values for the overflow property:
• visible: This is the default value, where the content overflows the element
and is visible outside of its borders.
• hidden: This value clips the content that overflows the element and
makes it hidden. The content that exceeds the dimensions of the element
will not be visible.
• scroll: This value creates scrollbars to allow the user to scroll through the
content that overflows the element.
• auto: This value behaves like scroll, but only adds scrollbars if necessary
(i.e., if the content overflows the element).
Here's an example of how to use the overflow property to hide the content
that overflows a div element:
div {
width: 200px;
height: 100px;
overflow: hidden;
}

This would create a div element with a fixed width of 200 pixels and a fixed
height of 100 pixels, and hide any content that overflows the div.
If you use the overflow property with a value of scroll or auto, the element
will have scrollbars that the user can use to scroll through the content that
overflows the element. Here's an example of how to use the overflow
property to create scrollbars for a div element:

div {
width: 200px;
height: 100px;
overflow: auto;
}
This would create a div element with a fixed width of 200 pixels and a fixed
height of 100 pixels, and add scrollbars to allow the user to scroll through
any content that overflows the div.

CSS box model


The CSS box model is a design concept that describes how elements on a
web page are laid out and how their size is calculated. It consists of four
parts: content, padding, border, and margin.
• Content: This is the actual content of the element, such as text or an
image.
• Padding: This is the space between the content and the element's
border. Padding can be added to all four sides of the element, or
individually to specific sides.
• Border: This is a line that surrounds the padding and content of the
element. Borders can be set to different thicknesses, styles, and colors.
• Margin: This is the space between the element's border and the adjacent
elements on the page. Margins can be added to all four sides of the
element, or individually to specific sides.
Here's an example of how the CSS box model works:
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}

This would create a div element with a fixed width of 200 pixels and a fixed
height of 100 pixels. The padding would add an additional 10 pixels of space
between the content and the border, making the total width of the element
220 pixels and the total height 120 pixels. The border would be 1 pixel wide
and solid black. The margin would add an additional 20 pixels of space
around the border of the element, making the total width of the element 260
pixels and the total height 160 pixels.
It's important to note that the width and height properties in CSS refer to the
size of the content box, not the total size of the element including padding,
border, and margin.
If you want to calculate the total size of an element including all of its parts,
you can use the following formula:
total element width = width + (padding * 2) + (border * 2) + (margin * 2)
total element height = height + (padding * 2) + (border * 2) + (margin * 2)

CSS Navigation Bar


A navigation bar is a common design element used in web development to
provide users with a way to navigate through a website. It typically consists
of a horizontal or vertical list of links that lead to different sections or pages
on the website.
In CSS, navigation bars can be created using various techniques, including:

Using an unordered list and CSS: This is a popular and effective technique
for creating navigation bars. The HTML structure for the navigation bar is an
unordered list (<ul>) containing list items (<li>) with links (<a>) to the different
pages of the website.
example:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

In CSS, the unordered list can be styled to create the appearance of a


navigation bar.
For example:
nav {
background-color: #333;
overflow: hidden;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav li {
float: left;
}

nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

nav li a:hover {
background-color: #111;
}

This would create a horizontal navigation bar with a dark background color
and white text. The nav element sets the background color and uses the
overflow property to clear the floats of the li elements. The ul element
removes the default list styling, and the li elements are floated to the left to
create a horizontal layout. An element is displayed as blocks, and the text is
centered with padding on all sides. The: hover pseudo-class is used to
change the background color of the links when the user hovers over them.

CSS Rounded Corners

In CSS, you can create rounded corners on elements such as boxes,


buttons, and images using the border-radius property. This property allows
you to specify the radius of the corners in pixels or percentages.
Here's an example of how to create a box with rounded corners:
HTML:
div {
border-radius: 10px;
}
This would create a div element with 10-pixel rounded corners on all four
corners. You can also create different radii for each corner, using the border-
top-left-radius, border-top-right-radius, border-bottom-left-radius, and
border-bottom-right-radius properties.

div {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
}
This would create a div element with different radii for each corner.
You can also use percentages to specify the radius of the corners.
For example:

div {
border-radius: 50%;
}

This would create a div element with perfectly rounded corners.


In addition to the border-radius property, you can also use the border-top-
left-radius, border-top-right-radius, border-bottom-left-radius, and
border-bottom-right-radius properties to specify different radii for each
corner. You can also use the shorthand border-radius property to specify all
four radii at once:
div {
border-radius: 10px 20px 30px 40px;
}
This would create a div element with different radii for each corner, specified
in a clockwise order starting with the top-left corner.
CSS Border Images

CSS Border Images allow you to use an image to create the border of an
element instead of a solid color. This can add visual interest and variety to
your website's design.
To use a border image, you will need to first define an image to use as the
border. This can be done using the CSS border-image-source property.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p>Here, the middle sections of the image are repeated to create the
border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do
not support the border-image property.</p>

</body>
</html>

Example2:

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}

#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>

<p id="borderimg1">border-image: url(border.png) 50 round;</p>


<p id="borderimg2">border-image: url(border.png) 20% round;</p>
<p id="borderimg3">border-image: url(border.png) 30% round;</p>

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do


not support the border-image property.</p>

</body>
</html>

CSS Gradients
CSS gradients allow you to create smooth transitions between two or more
specified colors. Gradients can be used as a background for an element, or
as the fill for a shape or text.
There are two types of gradients in CSS: linear and radial.
1. Linear Gradients:
A linear gradient creates a smooth transition between two or more colors
in a straight line.

The syntax for a linear gradient is:

Syntax
background-image: linear-gradient (direction, color-stop1, color-
stop2, ...);

Linear Gradient - Top to Bottom


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>


<p>This linear gradient starts red at the top, transitioning to yellow at the
bottom:</p>

<div id="grad1"></div>

</body>
</html>

Linear Gradient - Left to Right


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>


<p>This linear gradient starts red at the left, transitioning to yellow (to the
right):</p>
<div id="grad1"></div>

</body>
</html>

Linear Gradient - Diagonal


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>


<p>This linear gradient starts red at top left, transitioning to yellow (at
bottom right):</p>

<div id="grad1"></div>
</body>
</html>

Linear Gradients - Using Different Angles


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>


<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Linear Gradients - Multiple Color Stops


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow, green);
}

#grad2 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, orange, yellow, green, blue,
indigo, violet);
}

#grad3 {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>


<p><strong>Note:</strong> Color stops are spaced evenly when no
percents are specified.</p>
<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>


<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>


<div id="grad3"></div>

</body>
</html>

2. Radial Gradients
A radial gradient creates a smooth transition between two or more colors in
a circular shape.
The syntax for a radial gradient is:
syntax
background-image: radial-gradient(shape size at position, start-color,
..., last-color);

Radial Gradient - Evenly Spaced Color Stops (this is default)


The following example shows a radial gradient with evenly spaced color
stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Evenly Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Radial Gradient - Differently Spaced Color Stops


The following example shows a radial gradient with differently spaced color
stops:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Radial Gradient - Differently Spaced Color Stops</h1>

<div id="grad1"></div>

</body>
</html>

Set Shape
The shape parameter defines the shape. It can take the value circle or
ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
}

#grad2 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Radial Gradient - Shapes</h1>

<h2>Ellipse (this is default):</h2>


<div id="grad1"></div>

<h2><strong>Circle:</strong></h2>
<div id="grad2"></div>
</body>
</html>

CSS Shadow
CSS shadow is a styling effect that allows you to add a shadow to an element
on a web page. Shadows can be used to give depth and dimension to a
design and help create a sense of separation between elements.
• text-shadow
• box-shadow

CSS Text Shadow


The CSS text-shadow property applies shadow to text.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>

</body>
</html>
add a color to the shadow:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
add a blur effect to the shadow:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>

white text with black shadow:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>

</body>
</html>

CSS Box Shadow


The CSS box-shadow property is used to apply one or more shadows to an
element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>


<div>This is a div element with a box-shadow</div>

</body>
</html>

Color for the Shadow


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>


<div>A div element with a lightblue box-shadow</div>

</body>
</html>

Create html layout using CSS


here's an example of a simple HTML layout that can be styled using CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>CSS Layout Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vel
sollicitudin turpis. Sed ac faucibus mauris. </p>
</article>
<article>
<h2>Article 2</h2>
<p>Sed vitae convallis elit. Praesent at felis quis lacus bibendum
tempor. Curabitur vel risus id nunc dignissim porta.</p>
</article>
</main>
<aside>
<h2>Aside</h2>
<p>Suspendisse id tellus ac eros semper eleifend. Ut faucibus turpis nec
neque sagittis, vel aliquet purus accumsan.</p>
</aside>
<footer>
<p>Footer</p>
</footer>
</body>
</html>

CSS:
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

/* Header */
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}

/* Navigation */
nav {
background-color: #555;
color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}

nav li {
margin-right: 20px;
}

nav li:last-child {
margin-right: 0;
}

nav a {
color: #fff;
text-decoration: none;
}

/* Main Content */
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 20px;
}

article {
flex-basis: 45%;
background-color: #eee;
padding: 10px;
margin-bottom: 20px;
}

article h2 {
margin-top: 0;
}

/* Sidebar */
aside {
flex-basis: 30%;
background-color: #ccc;
padding: 20px;
}

aside h2 {
margin-top: 0;
}
/* Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}

You might also like