Unit - 3 PPT Final

R.M.D.
ENGINEERING COLLEGE
22CS102 – SOFTWARE DEVELOPMENT PRACTICES
UNIT – 3
CSS
UNIT 3 - CSS
Inline Styles - Embedded Style Sheets - Conflicting Styles – Linking

External Style Sheets - Positioning Elements- Backgrounds - Element
Dimensions - Box Model and Text Flow - Media Types and Media
Queries - Drop Down Menus – Text Shadows - Rounded Corners –
Color - Box Shadows - Linear Gradients – Radial Gradients - Multiple
Background Images - Image Borders - Animations – Transitions and
Transformations - Flexible Box Layout Module - Multicolumn Layout
CASCADING STYLE SHEETS
• CSS stands for Cascading Style Sheets.
• With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and laid
out, what background images or background colors are to be
used, different displays for different devices and screen sizes,
and much more.
• There are three ways of inserting a style sheet:
- Inline CSS
- Internal CSS
- External CSS
INLINE STYLE
• 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.
SYNTAX
• <html tag
style="cssproperty1:value;cssproperty2:value;”></htmltag>
INLINE STYLE
<!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>
1.html
INTERNAL STYLE
• An internal style sheet may be used if one single HTML page has a unique
style.
• The internal style is defined inside the <element>, inside the head section.
<!DOCTYPE html>
<html> </head>
<head> <body>
<h1>This is a heading</h1>
<style> <p>This is a paragraph.</p>
body{ </body>
background-color:linen; </html>
}
h1{
color:maroon;
margin-left:40px;
}
</style> 2.html
EXTERNAL STYLE
• 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> 3.html
EXTERNAL STYLE
• 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.
body
{
background-color:lightblue;
}
h1
{
color:navy;
margin-left:20px;
}
CONFLICTING STYLES
• If there are two or more CSS rules that point to the same element, the selector
with the highest specificity value will “win” and its style declaration will be applied
to that HTML element.
• In this example, we have used the “p” element as selector, and specified a red
color for this element. The text will be red:
<!DOCTYPE html>
<html>
<head>
<style>
p{color:red;}
</style>
</head>
<body>
<p>Welcome Friends!</p>
</body> 4.html
</html>
CONFLICTING STYLES
• In this example, we have added a class selector (named “test”), and specified a
green color for this class The text will now be green (even though we have
specified a red color for the element selector “p”). This is because the class
selector is given higher priority.
<!DOCTYPEhtml>
<html>
<head>
<style>
.test{color:green;}
p{color:red;}
</style>
</head>
<body>
<p class="test">Welcome Friends!!</p>
</body>
</html> 5.html
CONFLICTING STYLES
• In this example, we have added the id selector (named “demo”). The text will
now be blue, because the id selector is given higher priority.
<html>
<head>
<style>
#demo{color:blue;}
.test{color:green;}
p{color:red;}
</style>
</head>
<body>
<p id="demo“ class="test">Welcome Friends!!</p>
</body>
</html> 6.html
CONFLICTING STYLES
• In this example, we have added an inline style for the “p” element. Now,
The text will be pink, because the inline style is given the highest priority.
<html>
<head>
<style>
#demo{color:blue;}
.test{color:green;}
p{color:red;}
</style>
</head>
<body>
<p id=“demo” class=“test” style=“color:pink;”>Welcome Friends!!</p>
</body>
</html> 7.html
LINKING EXTERNAL STYLE SHEETS
Create the Style Sheet
• Type CSS code into a plain text file, and save with a .css extension (for example, styles.css)
• Here’s an example of some CSS code.
body
{
background-color:darkslategrey;
color:azure;
font-size:1.1em;
}
h1
{
color:coral;
}
#intro
{
font-size: 1.3em;
}
.colorful
{
color:orange;
}
LINKING EXTERNAL STYLE SHEETS
Link to the Style Sheet from the HTML Documents:
<html>
<head>
<title>My Example</title>
<link rel ="stylesheet" href ="styles.css">
</head>
<body>
<h1>External Styles</h1>
<p id="intro">Allow you to define styles for the whole website.</p>
<p class="colorful">This has a style applied via a class.</p>
</body>
</html> 8.html
POSITIONING ELEMENTS
• The CSS position property is used to set position for an element it is also used to
place an element behind another and also useful for scripted animation effect.
• You can position an element using the top, bottom, left and right properties.
• These properties can be used only after position property is set first.
• A position element’s computed position property is relative, absolute, fixed or
sticky.
a) Fixed
b) Static
c) Relative
d) Absolute
e) Sticky
CSS Static Positioning
• This is a by default position for HTML elements It always positions an
element according to the normal flow of the page It is not affected by the
top, bottom, left and right properties.
<html>
<head>
<style>
div.static
{
position: static;
border:3px solid #73AD21;
}
</style>
</head>
CSS Static Positioning
<body>
<h2>position:static;</h2>
<p>An element with position static is not positioned in any special way it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position static
</div>
</body>
</html>
9.html
CSS Fixed Positioning
• The fixed positioning property helps to put the text fixed on the browser This fixed test is
positioned relative to the browser window, and doesn't move even you scroll the window.
<html>
<head>
<style>
div.fixed{
position:fixed;
bottom:0;
right:0;
width:300px;
border:3px solid #73AD21;
}
</style>
</head>
CSS Fixed Positioning
<body>
<h2>position:fixed;</h2>
<p>An element with position fixed is positioned relative to the
viewport, which means
it always stays in the same place even if the page is scrolled:</p>
<div class="fixed">
This div element has position fixed
</div>
</body>
</html> 10.html
CSS Relative Positioning
• An element with position relative is positioned relative to its normal position
• Setting the top, right, bottom, and left properties of a relatively positioned
element will cause it to be adjusted away from its normal position.
• Other content will not be adjusted to fit into any gap left by the element.
<html>
<head>
<style>
h2.pos_left
{
position:relative;
left:-10px;
}
h2.pos_right
{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class=" pos_left">This heading is positioned left according to its normal
position</h2>
<h2 class=" pos_right">This heading is positioned right according to its
normal position</h2>
</body>
</html> 11.html
CSS Absolute Positioning
• The absolute positioning is used to position an element relative to the first parent element that
has a position other than static. If no such element is found, the containing block is HTML.
• With the absolute positioning, you can place an element anywhere on a page.
<html>
<head><style>
h2{
position:absolute;
left:150px;
top:250px;
}</style></head>
<body>
<h2>This heading has an absolute position</h2>
<p>The heading below is placed 150 px from the left and 250 px from the top of the page</p>
</body></html> 12.html
CSS Sticky Positioning
• An element with position sticky is positioned based on the user's
scroll position.
• A sticky element toggles between relative and fixed, depending on
the scroll position.
• It is positioned relative until a given offset position is met in the
viewport - then it “sticks” in place (like position:fixed).
Note: Internet Explorer does not support sticky positioning. Safari
requires a –webkit-prefix (see example below).
You must also specify at least one of top, right, bottom or left for
sticky positioning to work.
BACKGROUNDS
• The CSS background properties are used to define the background
effects for elements.
• There are lots of properties to design the background.
• CSS background properties are as follows:
- CSS Background-color Property
- CSS Background-image Property
- CSS Background-repeat Property
- CSS Background-attachment Property
- CSS Background-position Property
- CSS Background-origin Property
- CSS Background clip Property
CSS Background-color Property
• This property specifies the background color of an element.
• A color name can also be given as: “green”, a HEX value as “#5570f0”
an RGB value as “rgb(25, 255, 2)”.
Syntax:
body
{
background-color:color name;
}
CSS Background-color Property
<html>
<head>
<style>
h1{
background-color: blue;
}
</style>
</head>
<body>
<h1>WELCOME TO ENGINEERING</h1>
</body>
</html> 14.html
CSS Background-image Property
• This property specify an image to use as the background of an element.
• By default, the image is repeated so it covers the entire element.
Syntax
body
{
background-image: link;
}
CSS Background-image Property
<html>
<head>
<style>
body{
background-image:url("https://tse4.mm.bing.net/th?
id=OIP.U0SfqHcCr4A3TEW4cIDGOQHaEI&pid=Api&P=0.jpg");
}
</style></head>
<body>
<h1>LOVE THE MOTHER NATURE</h1>
</body>
</html> 15.html
CSS Background repeat Property
• By default the background image property repeats the image both horizontally and
vertically.
Syntax:
To repeat an image horizontally
body{
background-image:link;
background-repeat:repeat:x;
}
body{
background-image:url("img_tree.gif");
background-repeat:no-repeat;
}
body{
background-image:url("paper.gif");
background-repeat:repeat;
}
CSS Background repeat Property
<html>
<head>
<style>
body
{
background-image: url("https://tse4.mm.bing.net/th?
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>Here, the background image is repeated only vertically.</p>
</body>
</html> 16.html
CSS Background-attachment Property
• This property is used to fix the background ground image. The image will not scroll with the page.
<html> <p>The background-image is fixed.</p>
<head>
<p>The background-image is fixed.</p>
<style>
body { <p>The background-image is fixed.</p>
background-image: url("img_tree.gif"); <p>The background-image is fixed.</p>
background-repeat: no-repeat; <p>The background-image is fixed.</p>
background-attachment: fixed;
}
</style>
</head> <p>The background-image is fixed.</p>
<body> <p>The background-image is fixed.</p>
<h1>The background-attachment Property</h1> <p>The background-image is fixed.</p>
<p>The background-image is fixed.</p> </body>
<p>The background-image is fixed.</p> </html>
<p>The background-image is fixed.</p> 17.html
CSS Background-position Property
This property is used to set the image to a particular position.
- background-position: left top;

- background-position: left center;
- background-position: left bottom;
- background-position: right top;
- background-position: right center;
- background-position: right bottom;
- background-position: center top;
- background-position: 10% 40%;
- background-position: 50px 100px;
CSS Background-position Property
<html>
<head>
<style>
body {
background-image:
url("https://tse4.mm.bing.net/th?id=OIP.U0SfqHcCr4A3TEW4cIDGOQHaEI&pid=Api&P=0.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style></head>
<body>
<h1>The background-position Property</h1>
<p>Here, the background image will be positioned in the center of the element (in this case, the body
element).</p>
</body>
</html> 18.html
CSS Background-origin Property
• The background origin property specifies the origin position(the background positioning
area) of a background image.
• Note: This property has no effect if background attachment is “fixed”.
<html>
<head>
<style>
#example1 {
border: 10px dashed black;
padding: 25px;
background: url("https://tse4.mm.bing.net/th?
background-origin: padding-box;
}
#example2 {
padding: 25px;
background: url("https://tse4.mm.bing.net/th?id=OIP.U0SfqHcCr4A3TEW4cIDGOQHaEI&pid=Api&P=0.jpg");
background-origin: border-box;
}
#example3 {
padding: 25px;
background: url("https://tse4.mm.bing.net/th?id=OIP.U0SfqHcCr4A3TEW4cIDGOQHaEI&pid=Api&P=0.jpg");
background-origin: content-box;
}
</style>
</head>
<body>
<h2>background-origin: padding-box (default):</h2>
<div id="example1">
<h2>Hello World</h2>
<p>The background image starts from the upper left corner of the padding edge.</p>
</div>
<h2>background-origin: border-box:</h2>
<div id="example2">
<p>The background image starts from the upper left corner of the border.</p>
</div>
<h2>background-origin: content-box:</h2>
<div id="example3">
<p>The background image starts from the upper left corner of the content.</p>
</div>
</body>
</html> 19.html
CSS Background-clip Property
• The background clip property defines how far the background (color or image) should extend within an
element.
<html>
<head>
<style>
#example1 {
border: 10px dotted black;
padding: 15px;
background: lightblue;
background-clip: border-box;
}
#example2 {
padding: 15px;
background-clip: padding-box;
}
#example3 {
padding: 15px;
background-clip: content-box;
}
</style>
</head>
<body>
<h1>The background-clip Property</h1>
<p>The background-clip property defines how far the background should extend within an
element.</p>
<p>background-clip: border-box (this is default):</p>
<div id="example1">
<p>The background extends behind the border.</p>
</div>
<p>background-clip: padding-box:</p>
<div id="example2">
<p>The background extends to the inside edge of the border.</p>
</div>
<p>background-clip: content-box:</p>
<div id="example3">
<p>The background extends to the edge of the content box.</p>
</div>
</body>
</html>
20.html
ELEMENT DIMENSIONS
• The border that surrounds every box ie. element, the padding that can
appear inside each box and the margin that can go around them We have
the following properties that allow us to control the dimensions of a box.
• The height property is used to set the height of a box

• The width property is used to set the width of a box
• The line height property is used to set the height of a line of text
• The max height property is used to set a maximum height that a box can be
• The min height property is used to set the minimum height that a box can
be
• The max width property is used to set the maximum width that a box can be
• The min width property is used to set the minimum width that a box can be
The Height and Width Properties
• The height and width properties allow you to set the height and width
for boxes.
• They can take values of a length, a percentage, or the keyword auto.
Auto - This is default. The browser calculates the height and width
Length - Defines the height/width in px cm, etc
% - Defines the height/width in percent of the containing block
Initial - Sets the height/width to its default value
Inherit - The height/width will be inherited from its parent value
The Height and Width Properties
<html>
<head>
<style>
div{
height:200px;
width:50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%</div>
</body>
</html> 21.html
Setting max-width
• The max width property is used to set the maximum width of an
element.
• The max-width can be specified in length values, like px cm, etc., or in
percent of the containing block, or set to none (this is default Means
that there is no maximum width).
• The problem with the <div> above occurs when the browser window is
smaller than the width of the element (500px).
• The browser then adds a horizontal scrollbar to the page.
• Using max-width instead, in this situation, will improve the browser's
handling of small windows.
Setting max-width
<html>
<head>
<style>
div{
max-width:500px;
height:100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max width of an element</h2>
<div>This div element has a height of 100 px and a max width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html> 22.html
BOX MODEL AND TEXT FLOW
• The CSS box model is a container that contains multiple properties

including borders, margin, padding, and the content itself It is used to
create the design and layout of web pages.
• It can be used as a toolkit for customizing the layout of different
elements.
• The web browser renders every element as a rectangular box according
to the CSS box model.
• Box Model has multiple properties in CSS.
Some of them are given below:

• content - This property is used to displays the text, images, etc,
that can be sized using the width & height property.
• padding - This property is used to create space around the
element, inside any defined border.
• border - This property is used to cover the content any padding,
also allows to set the style, color, and width of the border.
• margin - This property is used to create space around the
element ie., around the border area.
CSS Padding
• The CSS padding properties are used to generate space around an element's content,
inside of any defined borders With CSS, you have full control over the padding.
• There are properties for setting the padding for each side of an element ( right, bottom,
and left).
<html>
<head>
<style>
div{
border:1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Padding
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px,
a bottom
padding of 50px, and a left padding of 80px</div>
</body>
</html>
25.html
CSS Margins
• Margins are used to create space around elements, outside of any defined
borders.
<html>
<head>
<style>
div{
border:1px solid black;
margin-top:100px;
margin-bottom:100px;
margin-right:150px;
margin-left:80px;
background-color: lightblue;
}
CSS Margins
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a
bottom
margin of 100px, and a left margin of 80px</h2>
</body>
</html>
26.html
Note: Margins Shorthand Property
The auto value – margin: auto;
CSS Borders
• The CSS border properties allow you to specify the style, width, and
color of an element's border. The border-style property specifies what
kind of border to display.
• The following values are allowed

Dotted - Defines a dotted border
Dashed - Defines a dashed border
Solid - Defines a solid border
Double - Defines a double border
CSS Borders
Groove - Defines a 3 D grooved border The effect depends on the

border color value
Ridge - Defines a 3 D ridged border The effect depends on the
border color value
Inset - Defines a 3 D inset border The effect depends on the border
color value
Outset - Defines a 3 D outset border The effect depends on the
border color value
None - Defines no border
Hidden - Defines a hidden border
CSS Borders
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style></head>
CSS Borders
<body>
<h2>The border style Property</h2>
<p>This property specifies what kind of border to display.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
CSS Border Width
• The width can be set as a specific size (in px, pt, cm, em etc)or by using one of the three pre
defined values: thin, medium, or thick:
<html>
<head>
<style>
p.one{
border-style: solid;
border-width: 5px;
}
p.two{
border-width: medium;
}
p.three{
border-style: dotted;
border-width: 2px;
}
CSS Border Width
p.four{ <h2>The border-width Property</h2>
border-style: dotted; <p>This property specifies the width of the four
border-width: thick; borders:</p>
} <p class="one">Some text.</p>
p.five{ <p class="two">Sometext.</p>
border-style: double; <p class="three">Sometext.</p>
border-width: 15px; <p class="four">Sometext.</p>
} <p class="five">Sometext.</p>
<p class="six">Sometext.</p>
p.six{
<p><b>Note:</b>The "border-width" propertydoes not work
border-style: double;
if it is used alone.
border-width: thick;
Always specify the"border-style" propertyto set the borders
} first.</p>
</style> </body>
</head> </html>
<body> 28.html
CSS Border Color
• The border-color property is used to set the color of the four borders.
• The color can be set by:
name – specify a color name, like "red"

HEX- specify a HEX value, like "#ff0000"
RGB- specify a RGB value, like “rgb(255,0,0)"
HSL- specify a HSL value, like "hsl(0,100%,50%)“ Transparent
CSS Border Color
<html>
<head>
<style>
h1 {
border-color: coral;
}
div {
border-color: coral;
}
</style>
</head>
<body>
<h1>A heading with a colored border</h1>
<div>The border-color can be specified with a color name.</div>
<p><strong>Note:</strong> The border-color property does not work if it is used alone. Use the border-
style property to set the border first.</p>
</body>
</html> 29.html
CSS text-overflow Property
• This property specifies the representation of overflowed text,
which is not visible to the user.
• It signals the user about the content that is not visible.
• This property helps us to decide whether the text should be
clipped, show some dots (ellipsis), or display a custom string.
• This property does not work on its own. We have to use white
space: nowrap; and overflow hidden with this property.
CSS Syntax
• text-overflow: clip|ellipsis|string|initial|inherit;
<html>
<head>
<style>
div.a {
white-space: nowrap;
width: 50px;
overflow: hidden;
text-overflow: clip;
border: 1px solid #000000;
}
div.b {
width: 50px;
overflow: hidden;
text-overflow: ellipsis;
}
div.c {
width: 50px;
overflow: hidden;
text-overflow: "----";
}</style></head>
<body>
<h1>The text-overflow Property</h1>
<p>The following two divs contains a text that will not fit in the box.</p>
<h2>text-overflow: clip (default):</h2>
<div class="a">Hello world!</div>
<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world!</div>
<h2>text-overflow: "----" (user defined string):</h2>
<div class="c">Hello world!</div>
<p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in Firefox.</p>
Media Types and Media Queries
• The @media rule, introduced in CSS2, made it possible to define
different style rules for different media types.
• Examples: You could have one set of style rules for computer
screens, one for printers, one for handheld devices, one for
television-type devices, and so on.
• Unfortunately these media types never got a lot of support by
devices, other than the print media type.
• CSS3 Introduced Media Queries
• Media queries in CSS3 extended the CSS2 media types idea:
Instead of looking for a type of device, they look at the capability
of the device.
• Media queries can be used to check many things, such as:

- width and height of the viewport
- width and height of the device
- orientation (is the tablet/phone in landscape or portrait mode?)
- resolution
• Using media queries are a popular technique for delivering a
tailored style sheet to desktops, laptops, tablets, and mobile
phones
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html> 31.html
Drop-Down Menus
• A CSS dropdown is an effective solution for enhancing the UI and UX of
an app or website.
• A dropdown menu is the submenu of the website or app’s main menu.
• It is used to showcase content buttons for each parent menu item.
• Dropdown menus help users easily navigate an app or website by
narrowing down their choices.
• Create a dropdown box that appears when the user moves the mouse
over an element.
.dropdown:hover .dropdown-content {
Drop-Down Menus display: block;
<html>
}
<head> </style>
<style> </head>
.dropdown { <body>
position: relative; <h2>Hoverable Dropdown</h2>
display: inline-block; <p>Move the mouse over the text below to
} open the dropdown content.</p>
.dropdown-content { <div class="dropdown">
display: none; <span>Mouse over me</span>
position: absolute; <div class="dropdown-content">
background-color: #f9f9f9; <p>Hello World!</p>
min-width: 160px; <p>Wonderful World!!</p>
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); </div>
padding: 12px 16px; </div>
z-index: 1; </body>
}
</html>
32.html
CSS Text-Shadow Property
• The text-shadow property adds shadow to text.

• This property accepts a comma-separated list of shadows to be
applied to the text.
• CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
• Basic text-shadow:
h1 {
text-shadow: 2px 2px #ff0000;
}
Text-shadow with a blur effect:
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
Value Description
• h-shadow - Required. The position of the horizontal shadow. Negative values are
allowed
• v-shadow - Required The position of the vertical shadow. Negative values are
allowed
• blur-radius - Optional. The blur radius. Default value is 0
• Color - Optional. The color of the shadow.
• None - Default value. No shadow
• Initial - Sets this property to its default value.
• Inherits - this property from its parent element.
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #FF0000;
}
</style>
</head>
<body>
<h1>The text-shadow Property</h1>
</body>
</html> 33.html
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 8px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with blur effect</h1>
</body>
</html> 34.html
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow</h1>
</body>
</html> 35.html
CSS Rounded Corners
• With the CSS border radius property, you can give any element
"rounded corners“.
CSS border-radius Property
• The CSS border radius property defines the radius of an element's
corners
• Tip: This property allows you to add rounded corners to elements!
• 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):
CSS Rounded Corners
<html> <body>
<head> <h2>border-radius: 25px:</h2>
<style> <div id="example1">
#example1 { <p>The border-radius property defines the radius of the element's
border: 2px solid red; corners.</p>
padding: 10px; </div>
border-radius: 25px; <h2>border-radius: 50px 20px:</h2>
} <div id="example2">
#example2 { <p>If two values are set;
border: 2px solid red; the first one is for the top-left and bottom-right corner, the second
padding: 10px; one for the top-right and bottom-left corner.</p>
border-radius: 50px 20px; </div>
} </body>
</style> </html>
</head> 36.html
CSS COLOR PROPERTY
• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values. CSS/HTML support 140 standard color names.
<html>
<body>
<h1 style="background-color:Tomato";>Tomato</h1>
<h1 style="background-color:Orange";>Orange</h1>
<h1 style="background-color:DodgerBlue";>DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen";>MediumSeaGreen</h1>
<h1 style="background-color:Gray";>Gray</h1>
<h1 style="background-color:SlateBlue";>SlateBlue </h1>
<h1 style="background-color:Violet";>Violet</h1>
<h1 style="background-color:LightGray";>LightGray</h1>
</body>
</html> 37.html
CSS COLOR PROPERTY
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Let’s face it life is messy and complicated Yet, it's
the small slivers of happiness that make it all worth it, despite the unforeseen
situations and the roller coaster of emotions experienced daily</p>
<p style="color:MediumSeaGreen";> While there doesn’t seem to be a clear answer
on what the purpose of life is, most people can agree that through it all they only
hope to live with a warm heart and pure joy On the tough days when it’s hard to
find something to smile about, funny stories, heartwarming pictures, and happy
quotes can be helpful in finding the joy in life again</p>
</body>
</html> 38.html
CSS BORDER COLOR
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>
39.html
CSS Box Shadows
• The box shadow CSS property adds shadow effects around an

element's frame.
• You can set multiple effects separated by commas.
• A box shadow is described by X and Y offsets relative to the
element, blur and spread radius, and color
• Offset defines the first value is the horizontal offset and the
second value is the vertical offset. The shadow color will be
inherited from the text color.
CSS Box Shadows
<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> 40.html
CSS Box Shadows
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>A div element with a 5px blurred, lightblue box-shadow.</div>
</body>
</html> 41.html
LINEAR GRADIENTS
• CSS gradients let you display smooth transitions between two or more
specified colors
• CSS defines three types of gradients
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
- Conic Gradients (rotated around a center point)
CSS Linear Gradients
• To create a linear gradient you must define at least two color stops Color
stops are the colors you want to render smooth transitions among
• You can also set a starting point and a direction (or an angle) along with the
gradient effect
• Syntax
background-image linear gradient(direction, color-stop1, color-stop2,…);
LINEAR GRADIENTS
Direction Top to Bottom (this is default)
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
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> 42.html
LINEAR GRADIENTS
• Direction - Left to Right
<html>
<head>
<style>
#grad1 {
height: 200px;
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>
</body>
</html> 43.html
LINEAR GRADIENTS
• Direction – Diagonal
<html>
<head>
<style>
#grad1 {
height: 200px;
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>
</body>
</html> 44.html
LINEAR GRADIENTS #grad4 {
height: 100px;
• Using Angles
background-color: red; /* For browsers that do not
<head> support gradients */
<style> background-image: linear-gradient(-90deg, red,
#grad1 { yellow);
}
height: 100px;
</style>
background-color: red; </head>
background-image: linear-gradient(0deg, red, yellow); <body>
} <h1>Linear Gradients - Using Different Angles</h1>
#grad2 { <div id="grad1"
style="text-align:center;">0deg</div><br>
height: 100px;
<div id="grad2"
background-color: red; style="text-align:center;">90deg</div><br>
background-image: linear-gradient(90deg, red, yellow); <div id="grad3"
} style="text-align:center;">180deg</div><br>
#grad3 { <div id="grad4"
style="text-align:center;">-90deg</div>
height: 100px;
</body>
background-color: red; </html> 45.html
background-image: linear-gradient(180deg, red, yellow);
}
RADIAL GRADIENTS
• A radial gradient is defined by its center.
• To create a radial gradient you must also define at least two color
stops.
Syntax
background-image: radial-gradient(shape size at position, start-
color,…,last color);
By default, shape is ellipse, size is farthest corner, and position is center

RADIAL GRADIENTS
Evenly Spaced Color Stops
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
</body>
</html>
46.html
RADIAL GRADIENTS
Differently Spaced Color Stops
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
</body>
</html> 47.html
RADIAL GRADIENTS - Shapes
<html>
</style>
<head>
</head>
<style>
<body>
#grad1 {
<h1>Radial Gradient - Shapes</h1>
height: 150px;
<h2>Ellipse (this is default):</h2>
width: 200px;
<h2><strong>Circle:</strong></h2>
background-image: radial-gradient(red, yellow, green);
}
</body>
#grad2 {
</html>
height: 150px;
width: 200px;
background-image: radial-gradient(circle, red, yellow, green);
} 48.html
RADIAL GRADIENTS
Repeating Radial Gradient
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h1>Repeating Radial Gradient</h1>
</body>
</html> 49.html
Multiple Background Images
• CSS allows you to add multiple background images for an element,
through the background image property
• The different background images are separated by commas, and the
images are stacked on top of each other, where the first image is
closest to the viewer
• The following example has two background images, the first image
is a flower (aligned to the bottom and right) and the second image
is a paper background (aligned to the top left corner):
Multiple Background Images
<html>
<head>
<style>
#example1 {
background: url(https://tse1.mm.bing.net/th?id=OIP.4_aGPIkds1n-IDHittWo-QHaE8&pid=Api&P=0.jpg) right bottom
no-repeat, url(https://tse3.mm.bing.net/th?id=OIP.aHVgpAi6CNRgT7KZprLpSgHaE8&pid=Api&P=0.jpg) left top repeat;
padding: 15px;
}
</style>
</head>
<body>
<div id="example1">
<h1>Flowers</h1>
<p>Flowers can increase creativity, innovation and productivity. Sitting in an office all day can be difficult. It is easy
to get distracted and feel all your creative energy dissipate. Fortunately, placing a vase of flowers in your office can
increase productivity and innovation</p></div>
</body>
</html> 50.html
CSS Image Border
• The CSS border-image property allows you to specify an image to

be used instead of the normal border around an element.
The property has three parts:
1. The image to use as the border
2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched
• The border-image property takes the image and slices it into nine
sections, like a tic-tac-toe board. It then places the corners at the
corners, and the middle sections are repeated or stretched as you
specify.
CSS Image Border
<html>
<head>
<style>
#borderimg
{
border: 10px solid transparent;
padding: 15px;
border-image: url(https://tse3.mm.bing.net/th?id=OIP.wNGEVcclltsOoO__wEysbAHaHa&pid=Api&P=0.jpg) 30 stretch;
}
</style></head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(https://tse3.mm.bing.net/th?
id=OIP.wNGEVcclltsOoO__wEysbAHaHa&pid=Api&P=0.jpg) 30 stretch;</p>
<p>Here is the original image:</p><img src="https://tse3.mm.bing.net/th?
id=OIP.wNGEVcclltsOoO__wEysbAHaHa&pid=Api&P=0.jpg">
CSS ANIMATION
• CSS allows animation of HTML elements without using JavaScript.
What are CSS Animations?
• An animation lets an element gradually change from one style to

another
• You can change as many CSS properties you want, as many times as
you want
• To use CSS animation, you must first specify some keyframes for the
animation
• Keyframes hold what styles the element will have at certain times
CSS ANIMATION
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>
</body>
</html>
52.html
75% {background-color:green; left:0px; top:200px;}
Delay an Animation
100% {background-color:red; left:0px; top:0px;}
<html> }
<head> </style>
<style> </head>
div {
<body>
width: 100px;
height: 100px; <h1>CSS Animation</h1>
background-color: red; <p>The animation-delay property specifies a delay for
position: relative; the start of an animation. The following example has a 2
seconds delay before starting the animation:</p>
animation-duration: 4s; <div></div>
animation-delay: 2s; </body>
} </html>
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;} 53.html
Set How Many Times an Animation Should Run
<html> 50% {background-color:blue; left:200px; top:200px;}
<head> 75% {background-color:green; left:0px; top:200px;}
<style> 100% {background-color:red; left:0px; top:0px;}
div { }
width: 100px; </style>
height: 100px; </head>
background-color: red; <body>
position: relative; <h1>CSS Animation</h1>
animation-name: example; <p>The animation-iteration-count property specifies the number of times
an animation should run. The following example will run the animation 3
animation-duration: 4s; times before it stops:</p>
animation-iteration-count: 3; <div></div>
} </body>
@keyframes example { </html>
25% {background-color:yellow; left:200px; top:0px;} 54.html
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property specifies whether an animation

should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:

normal - The animation is played as normal (forwards). This is default
reverse - The animation is played in reverse direction (backwards)
alternate - The animation is played forwards first, then backwards
alternate-reverse - The animation is played backwards first, then
forwards
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
position: relative;
animation-duration: 4s;
animation-direction: reverse;
}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
}
</style>
</head>
<body>
<p>The animation-direction property specifies whether an animation should be played
forwards, backwards or in alternate cycles. The following example will run the animation in
reverse direction (backwards):</p>
<div></div>
</body>
</html>
55.html
Specify the Speed Curve of the Animation
• The animation-timing-function property specifies the speed curve of the

animation.
• The animation-timing-function property can have the following values:
• ease - Specifies an animation with a slow start, then fast, then end slowly (this is
default)
• linear - Specifies an animation with the same speed from start to end
• ease-in - Specifies an animation with a slow start
• ease-out - Specifies an animation with a slow end
• ease-in-out - Specifies an animation with a slow start and end
• cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
font-weight: bold;
position: relative;
animation: mymove 5s infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style></head>
<body>
<p>The animation-timing-function property specifies the speed curve of the animation. The following
example shows some of the different speed curves that can be used:</p>
<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>
</body>
</html> 56.html
CSS Transitions
• CSS transitions allows you to change property values smoothly, over a

given duration.
• Mouse over the element below to see a CSS transition effect:
transition
transition-delay
transition-duration
transition-property
transition-timing function
• To create a transition effect, you must specify two things
- The CSS property you want to add an effect to
- The duration of the effect
CSS Transitions
<html> <body>
<head> <h1>The transition Property</h1>
<style> <p>Hover over the div element below, to see the transition effect:</p>
div { <div></div>
width: 100px; </body>
height: 100px; </html>
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
57.html
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</p>
<div id="div1">linear</div><br>
<div id="div2">ease</div><br>
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br>
<div id="div5">ease-in-out</div><br>
Delay the Transition Effect
<html> <body>
<head> <h1>The transition-delay Property</h1>
<style> <p>Hover over the div element below, to see the
div { transition effect:</p>
width: 100px; <div></div>
height: 100px; <p><b>Note:</b> The transition effect has a 1 second
background: red; delay before starting.</p>
transition: width 3s; </body>
transition-delay: 3s; </html>
}
div:hover {
width: 300px;
}
</style>
</head> 59.html
CSS TRANSFORM
• CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 2D
transformation methods:
• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()
CSS TRANSFORM
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: translate(50px,100px);
}
</style>
</head>
<body>
<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>
<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>
</body>
</html> 60.html
CSS TRANSFORM
<html> <div>
<head> This a normal div element.
<style> </div>
div {
<div id="myDiv">
width: 300px;
height: 100px; This div element is rotated clockwise 20 degrees.
background-color: yellow; </div>
border: 1px solid black; </body>
} </html>
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p> 61.html
CSS TRANSFORM
<html> <body>
<head> <h1>The scale() Method</h1>
<style> <p>The scale() method increases or decreases the size of an
div { element.</p>
margin: 150px; <div>
width: 200px; This div element is two times of its original width, and three
height: 100px; times of its original height.
background-color: yellow; </div>
border: 1px solid black; </body>
transform: scale(2,3); </html>
}
</style>
</head>
62.html
CSS TRANSFORM
<html> <div>
<head>
This a normal div element.
<style>
div { </div>
width: 300px; <div id="myDiv">
height: 100px; This div element is skewed 20 degrees along the X-axis, and 10
background-color: yellow; degrees along the Y-axis.
border: 1px solid black; </div>
} </body>
div#myDiv {
</html>
transform: skew(20deg,10deg);
}
</style>
</head>
<body>
<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p> 63.html
CSS 3D TRANSFORM
• With the CSS transform property you can use the following 3 D transformation methods
• rotateX
• rotateY
• Rotate
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
CSS 3D TRANSFORM
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html> 64.html
CSS Flexbox
• Flexbox Elements
- CSS Flex Container
Syntax
.flex-container
{
display: flex;
}
• The flex container properties are:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
CSS Flexbox
<html>
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {

background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
CSS Flexbox
</style></head>
<body>
<h1>Flexible Boxes</h1>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>
CSS Multi-column Layout
• The CSS multi-column layout allows easy definition of multiple columns of

text - just like in newspapers:
• CSS Multi-column Properties

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
• column-count - Specifies the number of columns an element

should be divided into
• column-fill - Specifies how to fill columns
• column-gap - Specifies the gap between the columns
• column-rule - A shorthand property for setting all the column-
rule-* properties
• column-rule-color- Specifies the color of the rule between
columns
• column-rule-style - Specifies the style of the rule between

columns
• column-rule-width - Specifies the width of the rule between
columns
• column-span - Specifies how many columns an element should
span across
• column-width - Specifies a suggested, optimal width for the
columns
• Columns - A shorthand property for setting column-width and
column-count
<html>
<head>
<style>
.newspaper {
column-count: 3;
column-fill:auto;
column-gap: 40px;
column-rule: 1px solid black;
column-rule-width:4px;
column-width:200 px;
}
</style>
</head>
<body>
<h1>Use the column-rule Shorthand Property</h1>
<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>
66.html
THANK YOU

Unit - 3 PPT Final

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit - 3 PPT Final

Uploaded by

Copyright:

Available Formats

R.M.D.

22CS102 – SOFTWARE DEVELOPMENT PRACTICES

Inline Styles - Embedded Style Sheets - Conflicting Styles – Linking

- background-position: left top;

• The height property is used to set the height of a box

• The CSS box model is a container that contains multiple properties

Some of them are given below:

• The following values are allowed

Groove - Defines a 3 D grooved border The effect depends on the

name – specify a color name, like "red"

• Media queries can be used to check many things, such as:

• The text-shadow property adds shadow to text.

• The box shadow CSS property adds shadow effects around an

By default, shape is ellipse, size is farthest corner, and position is center

• The CSS border-image property allows you to specify an image to

• An animation lets an element gradually change from one style to

The animation-direction property specifies whether an animation

The animation-direction property can have the following values:

• The animation-timing-function property specifies the speed curve of the

• CSS transitions allows you to change property values smoothly, over a

The transition-timing-function property can have the following values:

.flex-container > div {

• The CSS multi-column layout allows easy definition of multiple columns of

• CSS Multi-column Properties

• column-count - Specifies the number of columns an element

• column-rule-style - Specifies the style of the rule between

You might also like