Scribd
Upload
25 views

Style Attributel4

The document discusses various ways to style HTML elements using CSS including adding background images, colors and borders to text and elements. Key points covered include using the style attribute to add inline styles, and utilizing selectors in internal and external CSS to style multiple elements.

Uploaded by

Vineel Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views

Style Attributel4

The document discusses various ways to style HTML elements using CSS including adding background images, colors and borders to text and elements. Key points covered include using the style attribute to add inline styles, and utilizing selectors in internal and external CSS to style multiple elements.

Uploaded by

Vineel Reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

4.

The style Attribute


CSS can be added to HTML documents in 3 ways:
• Inline - by using the style attribute inside HTML elements
• Internal
• External

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body><p style="font-family:arial; color:red;">Some text...</p>
</body>
</html>
Background Color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">Hello all</p>
</body>
</html>
Text Color
<!DOCTYPE html>
<html>
<body>

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

<p style="color:DodgerBlue;">First Paragraph</p>

<p style="color:MediumSeaGreen;">Second paragraph</p>

</body>
</html>
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>
HTML Link
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<a href="new.html" target="_blank">Images</a>
</body>
</html>
Create a Bookmark
• Use the id attribute (id="value") to define
bookmarks in a page
• Use the href attribute (href="#value") to link
to the bookmark
Create a Bookmark
Jump to Chapter 4
Jump to Chapter 10
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Example: Create a Bookmark
<!DOCTYPE html>
<html>
<body>

<a href="#C4">Jump to Chapter 4</a> <br><br>


<a href="#C10">Jump to Chapter 10</a>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>
Image-float attribute
<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<p><img src="C:\Users\ADMIN\Desktop\CSE326\
image3.gif" alt="Computer man"
style="float:left;">This is my new paragraph</p>
</body>
</html>
Image Maps

• Create Image Map


• Then, add a <map> element.
• The <map> element is used to create an image map, and is
linked to the image by using the required name attribute:
• <map name="workmap">
• The image is inserted using the <img> tag. The only
difference from other images is that you must add
a usemap attribute.
• The usemap value starts with a hash tag # followed by the
name of the image map, and is used to create a
relationship between the image and the image map.
Image Maps:continue…
• The Areas
• Then, add the clickable areas.
• A clickable area is defined using an <area> element.
• Shape
• You must define the shape of the clickable area, and you can choose one
of these values:
• rect - defines a rectangular region
• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
• You must also define some coordinates to be able to place the clickable
area onto the image.
• Shape="rect"
Image Maps :Rectangle shape
• The coordinates for shape="rect" come in pairs, one for the x-axis and one for the
y-axis.
• So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:
• The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels
from the top:
Image Maps :Circle shape
• To add a circle area, first locate the coordinates of the center
of the circle:337,300
• Then specify the radius of the circle:44 pixels
Image Maps: Example
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about
the topic:</p>
<img src="C:\Users\ADMIN\Desktop\CSE326\MAP image.jpg" alt="Workplace" usemap="#workmap"
width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://images.unsplash.com/photo-
1542393545-10f5cde2c810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bGFwdG9wc3xlbnwwfHwwfHw
%3D&auto=format&fit=crop&w=500&q=60">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="https://images.unsplash.com/photo-
1523206489230-c012c64b2b48?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8aXBob25lfGVufDB8fDB8fA%3D
%3D&auto=format&fit=crop&w=500&q=60">
<area shape="circle" coords="337,300,44" alt="Cup of coffee"
href="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?ixlib=rb-
1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8Y29mZmVlfGVufDB8fDB8fA%3D
%3D&auto=format&fit=crop&w=500&q=60">
</map>
</body>
</html>
Background Image on a HTML element

1. Add a background image on a HTML element:


<p style="background-image: url('img_girl.jpg');">
2. Specify the background image in the <style> element:
<style>
p{
background-image: url('img_girl.jpg');
}
</style>
3. Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
1. Add a background image on a HTML
element: :Example
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a p element:</p>
<p style="background-image:url('https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQfXcHtql7qwZQtxg_O0tfTpLcDE9Y00ZIuYg&usqp=CAU'); color: white;">
Hello all Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nemo quibusdam quia totam
eos labore eligendi deserunt doloribus minima hic eius minus, vel odio dignissimos nam qui
perspiciatis numquam iste. Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolorem.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde eius illo assumenda dolorum suscipit?
Magnam quis quaerat quia commodi incidunt accusamus, voluptatum consectetur! Dolores, cum
placeat! Doloremque neque asperiores expedita ullam. Alias numquam iste molestiae dolor id animi,
minus, ipsam vel voluptas sed ratione distinctio quod ducimus repellendus repellat, magni officia
delectus sequi modi? Corporis blanditiis quaerat deleniti dignissimos dolore repellendus nostrum ad,
maxime nobis vero, nam aliquam exercitationem placeat fugit veritatis tenetur suscipit harum
perspiciatis omnis ipsam fugiat. Culpa, excepturi amet voluptatem rerum sunt eaque pariatur minus,
quas veniam, voluptas fuga. Dolorem tempore ratione blanditiis. Vero laboriosam assumenda illum!
</p>
</body>
</html>
2. Specify the background image in
the <style> element:Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url('https://p4.wallpaperbetter.com/wallpaper/644/446/544/mercedes-4k-full-screen-hd-wallpaper-
preview.jpg');
color: white;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>Hello all Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nemo quibusdam quia totam eos labore
eligendi deserunt doloribus minima hic eius minus, vel odio dignissimos nam qui perspiciatis numquam iste. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolorem.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde eius illo assumenda dolorum suscipit? Magnam quis quaerat
quia commodi incidunt accusamus, voluptatum consectetur! Dolores, cum placeat! Doloremque neque asperiores
expedita ullam. Alias numquam iste molestiae dolor id animi, minus, ipsam vel voluptas sed ratione distinctio quod
ducimus repellendus repellat, magni officia delectus sequi modi? Corporis blanditiis quaerat deleniti dignissimos
dolore repellendus nostrum ad, maxime nobis vero, nam aliquam exercitationem placeat fugit veritatis tenetur suscipit
harum perspiciatis omnis ipsam fugiat. Culpa, excepturi amet voluptatem rerum sunt eaque pariatur minus, quas
veniam, voluptas fuga. Dolorem tempore ratione blanditiis. Vero laboriosam assumenda illum!</p>
</body>
3. Add a background image for the entire
page:Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://p4.wallpaperbetter.com/wallpaper/254/767/791/computer-
desktop-full-screen-nature-pics-1920x1200-wallpaper-preview.jpg');
color:white;
}
</style>
</head>
<body>
<h2>Background Image</h2>
<p>By default, the background image will repeat itself <br>
it is smaller than the element where it is specified, <br>
in this case the body element.</p>
</body>
</html>
Background Repeat

• If the background image is smaller than the element, the image


will repeat itself, horizontally and vertically, until it reaches the
end of the element:
• To avoid the background image from repeating itself, set
the background-repeat property to no-repeat.
background-repeat: no-repeat;
• If you want the background image to cover the entire element,
you can set the background-size property to cover.
background-size: cover;
• If you want the background image to stretch to fit the entire
element, you can set the background-size property to 100%
100%:
background-size: 100% 100%;
HTML Favicon
• A favicon is a small image displayed next to the page title in the browser tab.
• add a <link> element to your "index.html" file, after the <title> element.

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" href="C:\Users\ADMIN\Desktop\CSE326\smiley.gif">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

You might also like