Scribd
Upload
4 views

Unit 3 CSS Final

This document provides an overview of HTML and CSS basics, focusing on CSS for web design, including internal, external, and inline styles. It covers various CSS properties such as background images, colors, text manipulation, positioning, and animations. Additionally, it explains the use of classes and IDs, as well as advanced topics like tooltips and styling images.

Uploaded by

vaghanikaram1
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
4 views

Unit 3 CSS Final

This document provides an overview of HTML and CSS basics, focusing on CSS for web design, including internal, external, and inline styles. It covers various CSS properties such as background images, colors, text manipulation, positioning, and animations. Additionally, it explains the use of classes and IDs, as well as advanced topics like tooltips and styling images.

Uploaded by

vaghanikaram1
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/ 32

Unit-2: Basics of HTML and CSS

CASCADING STYLE SHEETS (CSS)


CSS is used for web designing. It helps the web designers to apply style on HTML tags. It
includes fonts, colors, margins, lines, height, width, background images, etc.

Rules
selector {property:value; …}

INTERNAL CSS
Examples:

<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
<style>
p {font-family: “TimesNewRoman”;
text-align: center;
color: blue}

h1, h2 {color:red}

</style>

</head>
<body>
<p>Welcome to CSS</p>
<h1>Heading h1</h1>
<h2>Heading h2</h2>
</body>
</html>

Output:
Classes

Sometimes you need to make several styles for same HTML element.

<html>
<head>
<title>
css with class
</title>
<style>
p.right {text-align: right}
p.left {text-align: center}
</style>
</head>
<body>
<p class="right"> this paragraph will be right-aligned. </p>
<p class="left"> this paragraph will be center-aligned. </p>
</body>
</html>

Output:

Specify a class without its main tag so it can be applied to any other class.
.left {text-align:left}

<html>
<head>
<title>
css with class
</title>
<style>
.right {text-align: right}
.left {text-align: center}
</style>
</head>
<body>
<p class="right"> this paragraph will be right-aligned. </p>
<p class="left"> this paragraph will be center-aligned. </p>
</body>
</html>

Output:

ID

It can apply to a specific style to an identified element.

<html>
<head>
<title>
css with ID
</title>
<style>
p#bluepara
{ text-align: center;
Color: red}
</style>
</head>
<body>
<p id="bluepara"> some text </p>
</body>
</html>

Output:
You could match any element with the id of bluepara and bluepara1 by using
<html>
<head>
<title>
css with ID
</title>
<style>
#bluepara
{ text-align: center;
Color: blue}
#bluepara1
{ text-align: center;
Color: blue}
</style>
</head>
<body>
<p id="bluepara"> some text </p>
<h6 id="bluepara1"> some text1 </h6>
</body>
</html>

Output:

A Class name can be used by multiple HTML elements, while an ID name must only be
used by one HTML element within the page.

INLINE CSS
<html>
<body>
<h1 style="color:red;text-align:center;">Heading h1</h1>
<p style="color:blue;">Welcome to CSS.</p>
</body>
</html>

Output:
Pseudo-Class Selectors

some selectors can be considered different because of the way the element they belong
to work.

Ex. Anchor tag- different states are visited, not visited or being selected.

<html>
<head>
<style>
a:link {color:red}
a:active {color:yellow}
a:visited {color:green}
</style>
</head>
<body>
<a href="https://www.w3schools.com/">link</a>
</body>
</html>

Output:

link is initially red, when visited it would be green, and process of being clicked, it would be
yellow.

<html>
<head>
<style>
a:hover {font-weight: bold}
a: link: hover { font-weight: bold}
</style>
</head>
<body>
<a href="https://www.w3schools.com/">link</a>
</body>
</html>

EXTERNAL CSS
 When you have no. of pages or complete site, you need to control in terms of
presentation.
 We can change look of entire site by altering only one file.
 Page that uses style sheets to have a link to associate it with.
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”/>
</head>
 Actual style document has extension .css, it should not have any HTML elements in
it.
Example:
mystyle.css
h1{ color:blue;}
p{ font-size:20px;
font-family:Arial;
}
externalcss.html
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Heading h1</h1>
<p>Paragraph.</p>
</body>
</html>
Output:

Background Images, Colors, Properties


It is used to control color of an element’s background, use an image in background, place
an image at a specific place on a page.
Background color
<html>
<head>
<style>
body { background: pink;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output:

NOTE: Background properties that include background-color, background-image,


background-repeat, background-attachment and background-position.
Property Description Values
Background Sets all background as RGB
properties in one declaration
Background-attachment Sets whether image moves Scroll or fixed
with page when scrolled
Background-color Sets the background color of RGB, hex, name
an element
Background-image Sets an image in the URL or none
background
Background-position Sets the starting position ofTop left, top center, top right,
an image in the background center left, center center,
center right, bottom left,
bottom center, bottom right,
x-%, y-%, x-pos, y-pos
Background-repeat Sets the repetition of an Repeat, repeat-x, repeat-y,
image used in the background no-repeat

Example:
<html>
<head>
<style>
body {
background: #F4a460;
background-image: url("cat.gif");
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
Output:
Output1:

Manipulating Text
<html>
<head>
<style type="text/css">
h1{color: #00ff00; text-align:center}
h1{ text-decoration:overline}
h1{text-transform:uppercase}
h2{color: green}
h2{text-decoration:line-through}
h2{letter-spacing: 0.9px }
h2{text-transform:lowercase}
h3{color: rgb(255, 20, 40); background-color: yellow; text-decoration:underline}
h4{color: rgb(0, 0, 255); text-indent: 1cm}
h4{text-transform:capitalize}
p{text-indent: 1cm}
</style>
</head>
<body>
<h1> a colored header 1 </h1>
<h2> a colored header 2 </h2>
<h3> a colored header 3 </h3>
<h4> a colored header 4 </h4>
<p>A paragraph is defined as a group of sentences or a single sentence that forms a unit. Length
and appearance do not determine whether a section in a paper is a paragraph. </p>
</body>
</html>
Output:

Using Fonts
Example:
<html>
<head>
<style>
h3{font-family: times; font-size:150%; font-style:normal}
p{ font-family: courier; font-size:100%; font-style:oblique}
p.san{font-family:sans-serif; font-style:italic}
</style>
</head>
<body>
<h3> This is header 3 </h3>
<p>This is a paragraph</p>
<p class=”san”> This is a paragraph</p>
</body>
</html>
Output:

Margins
Example:
<html>
<head>
<style>
p.all{margin:2cm 2cm 2cm 2cm};
p.margin{margin-top:3cm}
</style>
</head>
<body>
<p class="all"> This is a paragraph with margin top bottom left right </p>
<p class="margin"> This is a paragraph with top margin
This is a paragraph with top margin </p>
</body>
</html>
Output:
Padding
Example
<html>
<head>
<style>
td{padding-bottom:2cm; padding-top:2cm; padding-left:2cm; padding-right:2cm}
</style>
</head>
<body>
<table border=”1”>
<tr>
<td> A table cell with top bottom left right padding </td>
</tr>
</table>
</body>
</html>
Output:
Lists
<html>
<head>
<title>List CSS</title>
<style>
ul.disc {list-style-type:disc;}
ol.roman {list-style-type:roman;}
ol.roman {list-style-type:lower-roman;}
ul.none {list-style-type:none;}
</style>
</head>
<body>
<ul class="disc">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
<ol class="roman">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ol>
<ul class="none">
<li>apple</li>
<li>orange</li>
<li>banana</li>
</ul>
</body>
</html>
Output:

Property Description Values


list-style-image Use an image as marker None, url
list-style-position Positioning of marker Inside, outside

Borders and Boxes


Positioning
It is possible to control exactly where elements will appear.
Types of position: static, relative, fixed, absolute, sticky.
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first.
Relative: places an element relative to its normal position. You can move it using top, left, right,
or bottom.
Example:
<html>
<head>
<style>
div.relative {
position: relative;
left: 50px;
border: 5px solid blue;
}
</style>
</head>
<body>
<h1>Realtive</h1>

<div class="relative">
position with relative
</div>
</body>
</html>

Output:

Absolute: adjust an element position relative to its parent. Absolute positioning removes the
element from the document flow and places it relative to the nearest ancestor with a positioning
context (relative, absolute, or fixed).
Example:
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid blue;
}
div.absolute {
position: absolute;
top: 80px;
left: 80px;
width: 200px;
height: 100px;
border: 2px solid #73AD21;
}
</style>
</head>
<body>
<h1>absolute</h1>
<div class="relative">
element with position relative
<div class="absolute">
element with position absolute
</div>
</div>
</body>
</html>

Fixed: that keeps an element in the same place even when the page is scrolled.
Example:
<html>
<head>
<style>
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightgreen;
padding: 20px;
border: 2px solid black;
}
.content {
height: 1200px;
padding: 10px;
}
</style>
</head>
<body>
<h2>Fixed</h2>
<div class="fixed">Fixed Box</div>
<div class="content">
<p>element with fixed position</p>
</div>
</body>
</html>

Output:

Sticky: Sticky positioning switches between relative and fixed based on the scroll position.
Example:
<html>
<head>
<style>
.sticky {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>Sticky</h1>
<div class="sticky">I am sticky</div>
<p>Scroll down to see the effect.</p>
<div style="height: 1000px;"></div>
</body>
</html>

Output:

Static: Static is the default position of an element. It does not accept properties like top, left,
right, or bottom.

Example:
<html>
<head>
<style>
div {
position:static;
border: 1px solid black;
padding: 10px;
margin: 10px;
top:100px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
</body>
</html>

Output:

z-index:
Example:
<html>
<head>
<style>
img.x{position:absolute; left:0px; top:0px; z-index:-1;}
</style>
</head>
<body>
<h1> heading1 </h1>
<img class="x" src="cat.gif" width="100" height="180">
<p class="ap"> Default z-index is 0. z-index -1 has lower priority.</p>
</body>
</html>

Output:
Shaping an element: an element, such as image, can also be usefully shaped with the clip
property.

Example:
<html>
<head>
<style>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
</style>
</head>
<body>
<img src="cat.gif" width="100" height="140">
</body>
</html>

Output:

Floating elements: used for positioning and formatting content.

Example:
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<h2>Float Right</h2>
<p>example of floating with left</p>

<p><img src="cat.gif" alt="cat" style="width:170px;height:170px;margin-left:15px;"> write


paragraph here </p>
</body>
</html>

Output:

Animation
The animation-duration property defines how long an animation should take to complete. If
the animation-duration property is not specified, no animation will occur, because the default value
is 0s (0 seconds).
Example:
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</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>

Output:

Tool tips: A tooltip is often used to specify extra information about something when the user
moves the mouse pointer over an element.

<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<h2>Basic Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue
reading on how to position the tooltip in a desirable way.</p>
</body>
</html>

Output:

Tooltip text

Style images

Rounded image

Example 1:
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circled Image</h2>
<p>Use the border-radius property to create circled images:</p>
<img src="paris.jpg" alt="Paris" width="300" height="300">
</body>
</html>

Output:

Example 2:
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail images. Wrap an anchor around the image to use
it as a link.</p>
<p>Hover over the image and click on it to see the effect.</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris" style="width:150px">
</a>
</body>
</html>

Output:

Variables
 The var() function is used to insert the value of a CSS variable.
 Syntax: var(--name, value)
 Global variables can be accessed/used through the entire document, while local
variables can be used only inside the selector where it is declared.
 To create a variable with global scope, declare it inside the :root selector.
The :root selector matches the document's root element.
Example:
<html>
<head>
<style>
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body {
background-color: var(--blue);
}
h2 {
border-bottom: 2px solid var(--blue);
}
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>
</head>
<body>
<h1>Using the var() Function</h1>
<div class="container">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
pulvinar, at pulvinar felis blandit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
pulvinar, at pulvinar felis blandit.</p>
<p>
<button>Yes</button>
<button>No</button>
</p>
</div>
</body>
</html>
Note: First, we declare two global variables (--blue and --white). Then, we use the var() function
to insert the value of the variables later in the style sheet.

Output:

Media Queries

 it possible to define different style rules for different media types.

 Media queries can be used to check many things, such as: width and height of the
viewport, orientation of the viewport (landscape or portrait), and resolution.

Media Types
Value Description

all Used for all media type devices

print Used for print preview mode

screen Used for computer screens, tablets, smart-


phones etc.

Example:
<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>

Output:

Working with Gradients


 It display smooth transitions between two or more specified colors.
 types of gradients:
o Linear Gradients (goes down/up/left/right/diagonally)
o Radial Gradients (defined by their center)
o Conic Gradients (rotated around a center point)
 Syntax, background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Example:
<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>

Output:

Pseudo Elements
 A CSS pseudo-element is used to style specific parts of an element.
 Example,
o Style the first letter or line, of an element
o Insert content before or after an element
o Style the markers of list items
o Style the viewbox behind a dialog box

Syntax:
selector::pseudo-element {
property: value;
}

Example:

<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text.
Some more text. And even more, and more, and more, and more, and more, and more, and more,
and more, and more, and more, and more, and more.</p>
</body>
</html>

Output:

Types

 ::first-line pseudo-element is used to add a special style to the first line of a text.
 ::first-letter pseudo-element is used to add a special style to the first letter of a text.

 ::before pseudo-element can be used to insert some content before the content of an element.

 ::after pseudo-element can be used to insert some content after the content of an element.

 ::marker pseudo-element selects the markers of list items.


 ::selection pseudo-element matches the portion of an element that is selected by a user.

You might also like