Scribd
Upload
37 views27 pages

WD Unit-3

Uploaded by

dhruvraj1002
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
37 views27 pages

WD Unit-3

Uploaded by

dhruvraj1002
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/ 27

Course Code: 4040233136

Course Name: Web designing


using HTML

SEMESTER: 1

(Unit -3 )

*Working with to Cascading Style Sheets(CSS)

*Concept of CSS

What is CSS?

● CSS stands for Cascading Style Sheets

● CSS, or Cascading Style Sheets, is a language used to style and layout web pages by
controlling the visual appearance of HTML elements.
● CSS describes how HTML elements are to be displayed on screen, paper, or
in other media.

Why Use 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.
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

CSS Syntax:-

● The selector points to the HTML element you want to style.


● The declaration block contains one or more declarations separated by
semicolons.
● Each declaration includes a CSS property name and a value, separated by a
colon.
● Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.

Example:-
<!DOCTYPE html>
<html>
<head>
<style> body {
Background-color: lightblue;
}
H1 {
Color: white;
Text-align: center;
}
P{
Font-family: verdana; font-size: 20px;
}
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>

Css selectors

1.Universal Selector (*)


The universal selector applies styles to all elements on the page.
<html>
<head>
<title>Universal Selector Example</title>
<style>
/* Select all elements */
• {
Color: darkblue; /* All text will be dark blue */
}
</style>
</head>
<body>
<h1>Heading Text</h1>
<p>This is a paragraph with dark blue text.</p>
<div>Div element with dark blue text.</div>
</body>
</html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

2.Class Selector (*)


The class selector targets elements with a specific class attribute.
<html>
<head>
<title>Class Selector Example</title>
<style>
/* Select all elements with the class “highlight” */
.h1 {
Background-color: yellow; /* Yellow background for elements with class
“highlight” */
}
</style>
</head>
<body>
<h1 class=”h1”>This heading has a yellow background.</h1>
</body></html>

3. ID Selector (#)
The ID selector targets an element with a specific ID. IDs should be unique
within a page.
<html>
<head>
<title>ID Selector Example</title>
<style>
/* Select the element with the id “unique” */
#h1 {
Font-size: 24px; /* Larger text for the element with id “unique” */
Color: red; /* Red text */
}
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

</style>
</head>

<body>
<h1 id=”h1”>This is a unique heading with larger red text.</h1>
<p>This paragraph is not affected by the ID selector.</p>
</body>
</html>

4. Grouping Selector:

The grouping selector is used to apply the same styles to multiple elements at
once. You can Group multiple selectors (tags, classes, IDs) together, separated by
commas, and apply a Common set of styles to them.
<html>
<head>
<title>Grouping Selector Example</title>
<style>
H1, p{
Font-family: Arial, sans-serif; /* Apply the same font to all */
Color: darkgreen; /* Apply dark green text color */
Font-size: 16px; /* Apply the same font size */
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with the same styling as the heading.</p>
</body>
</html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

Types of CSS

1.Inline CSS
Inline CSS is applied directly to an HTML element using the style attribute. It is
generally used for styling a single element.
Example:
<p style=”color: blue; font-size: 18px;”>This is inline CSS</p>

2. Internal CSS
Internal CSS is written within the <style> tag inside the <head> section of an
HTML document. It’s typically used when styling a single page.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
P{
Color: green;
Font-size: 20px;
}
</style>
</head>
<body>
<p>This is internal CSS</p>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

</body>
</html>

3.External CSS
External CSS is written in a separate .css file, and linked to the HTML document
using the <link> tag. This method is preferred for styling multiple pages
consistently.
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

Example:
Style.css
P{
Color: red;
Font-size: 22px;
}

Index.html
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<p>This is external CSS</p>
</body>
</html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

*CSS Properties

Here’s a list of common CSS properties with explanations

1. Color : Sets the color of text.


2. Background-color : Sets the background color of an element.
3. Font-size : Specifies the size of the text.
4. Width : Specifies the width of an element.
5. Height : Specifies the height of an element.
6. Box-shadow : adds shadow effects to elements.
CSS Text properties :

1. Color
2. Text-align
3. Text-decoration
4. Text-transform
5. Text-shadow
6. Text-indent

Example
<html>
<head>
<title> TEXT PROPERTIES</title>
<style>
P
{ text-align: center;
Text-decoration: underline overline;
Text-shadow: 2px 2px red;
Text-transform: uppercase;
Text-indent: 30px;
}
</head>
<body>
<p> hello, bca semester-1</p>
</body>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

*CSS Styling(Background, Text Format, Controlling Fonts)

1.Background Styling

Definition: Background styling in CSS is used to set the background color, image, or gradient for

Elements on a webpage.

Common Properties:

Background-color: Sets the background color.

Background-image: Sets an image as the background.

Background-repeat: Controls if and how a background image repeats (e.g., horizontally or vertically).

Background-position: Positions a background image.

Background-size: Adjusts the size of the background image.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Background Styling Example</title>
<style>
Body {
Background-color: #f0f8ff; /* Light blue background */
}
Header {
Background-image: url(‘header-bg.jpg’); /* Add an image background */
Background-repeat: no-repeat; /* No repeating of the image */
Background-size: cover; /* Image covers the entire header */
Padding: 50px;
Text-align: center;
Color: white;
}
</style>
</head>
<body>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

<header>
<h1>Welcome to My Webpage</h1>
<p>This is the header tag. </p>
</header>
</body>
</html>

2. Text Formatting

Definition: Text formatting in CSS changes how text appears, including its color, alignment, decoration,
And transformations.

Common Properties:

Color: Sets the text color.


Text-align: Aligns text (left, right, center, or justify).
Text-decoration: Adds decorations like underline, overline, or line-through.
Text-transform: Changes text case (uppercase, lowercase, capitalize).
Line-height: Adjusts the spacing between lines of text.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Text Formatting Example</title>
<style>
H1 {

Color: #4CAF50; /* Green color */


Text-align: center; /* Centers the text */
Text-decoration: underline; /* Underlines the text */
Text-transform: uppercase; /* Makes all letters uppercase */
Line-height: 1.6; /* Adds space between lines */
}
</style>
</head>
<body>
<h1>This paragraph is styled with color, alignment, and line spacing to make it more readable. CSS text
Formatting allows you to control how text looks on your page.</h1>
</body>
</html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

3.Font Control

Definition: Font control in CSS allows you to choose the font style, size, and weight, making text look
More attractive and readable.

Common Properties:

Font-family: Sets the font type (e.g., Arial, Times New Roman).
Font-size: Sets the font size.
Font-weight: Controls how bold the text is (e.g., normal, bold, 100–900).
Font-style: Sets the style (e.g., normal, italic, oblique).
Example:

<!DOCTYPE html>
<html>
<head>
<title>Font Control Example</title>
<style>
P{
Font-family: Arial, sans-serif; /* Sets the font type */
Font-size: 20px; /* Sets font size */
Font-weight: bold; /* Makes the text bold */
Font-style: italic; /* Makes the text italic */
Color: #333; /* Dark color for readability */
}
</style>
</head>
<body>
<p>This paragraph demonstrates font control. The text is in Arial, bold, italic, and slightly larger than
The default font size.</p>
</body>
</html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

* Working with block elements and objects

A block-level element always starts on a new line, and the browsers


automatically add some space (a margin) before and after the element.
●A block-level element always takes up the full width available (stretches out to the left and
right as far as it can).
●Two commonly used block elements are: <p> and <div>.
●The <p> element defines a paragraph in an HTML document.
●The <div> element defines a division or a section in an HTML document.
●The <p> element is a block-level element.
●The <div> element is a block-level element.

Example:
<html >
<head>
<title>Block Elements Example</title>
<style>
.container {
Background-color: #f3f3f3;
Padding: 20px;
Width: 80%;
Margin: 0 auto;
}
.header, .content, .footer {
Margin: 10px 0; }
</style>
</head><body>
<div class=”container”>
<div class=”header”>
<h1>Welcome to My Website</h1>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

</div>
<div class=”content”>
<p>This is a sample paragraph in the main content area.</p>
</div>
<div class=”footer”>
<p>&copy; 2024 My Website</p>
</div> </div></body>
</html>

●OBJECTS
●The CSS object-position property is used to specify how an <img> or
<video> should be positioned within its container.

Example:
<html>
<body>
<p style=”border: 1px solid black , object-fit: cover; object-position: 15% 100%;> Hello
World</p>
<div style=”border: 1px solid black”>Hello World</div>
<p>The P and the DIV elements are both block elements, and they will always start on a
new line and take up the full width available (stretches out to the left and right as far as it
can).
</p>
</body></html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

*Working with Lists and Tables

● In HTML, there are two main types of lists:


● unordered lists (<ul>) - the list items are marked with bullets
● ordered lists (<ol>) - the list items are marked with numbers or letters
● The CSS list properties allow you to:
● Set different list item markers for ordered lists
● Set different list item markers for unordered lists
● Set an image as the list item marker
● Add background colors to lists and list items.
Example:-

<html>
<head>
<style> ul.a {
List-style-type: circle;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class=”a”>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul></body>
</html>
•To specify table borders in CSS, use the border property.
•The example below specifies a solid border for <table>, <th>, and <td> elements.
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

<!DOCTYPE html>
<html >
<head>
<title>Table Example</title>
<style>
Table {
Width: 50%;
Border-collapse: collapse;
}
Th, td {
Border: 1px solid #000;
Padding: 10px;
Text-align: left;
}
Th {
Background-color: #f3f3f3;
}
</style>
</head>
<body> <h2>Student Grades</h2>
<table>
<tr><th>Student Name</th>
<th>Grade</th>
</tr>
<tr>
<td>Alice</td>
<td>A</td> </tr>
<tr>
<td>Bob</td> <td>B+</td>
</tr>
<tr> <td>Charlie</td>
<td>A-</td>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

*Box Model(Introduction, Border properties, Padding


Properties, Margin properties)
*Box Model

● In CSS, the term "box model" is used when talking about design and layout.
● The CSS box model is essentially a box that wraps around every HTML
element. It consists of: content, padding, borders and margins. The image
below illustrates the box model:
●Explanation of the different parts:
●Content – The content of the box, where text and images appear
●Padding – Clears an area around the content. The padding is transparent
●Border – A border that goes around the padding and content
●Margin – Clears an area outside the border. The margin is transparent
Example:-
<style>
Div {
Background-color: light-grey; width: 300px;
Border: 15px solid green; padding: 50px;
Margin: 20px;
}
</style>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

*CSS Advanced(Grouping, Dimension, Display, Positioning,


Floating, Align, Pseudo class, Navigation Bar, Image Sprites,
Attribute sector)
1. Dimension :-
CSS Height, Width :-
● The CSS height and width properties are used to set the Height and
width of an element.
● The CSS max-width property is used to set the maximum Width of an
element.
Ex:-
<style>
Div {
Height: 200px;
Width: 50%;
Background-color: powderblue;
}
</style>
<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>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

2.Display :-
● The display property is used to specify how an element is Shown on a
web page.
● Every HTML element has a default display value, depending On
what type of element it is. The default display value for Most elements
is block or inline.
● The display property is used to change the default display
Behavior of HTML elements.
Display Property Values :-
1. Inline :- Displays an element as an inline element
Ex :
Li {Display: inline;}
2. Block :- Displays an element as a block element
Ex :-
Span {
Display: block;
}

3.Positioning :-
The position property specifies the type of positioning method used for
An element.There are five different position values
● static
● relative
● fixed
● absolute
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

● sticky

Example :-
Div{
Position: sticky, fixed……;
Padding: 5px;
Background-color: #cae8ca;
Border: 2px solid #4CAF50;
}
4.Floating :-
The float property is used for positioning and formatting content e.g.
Let an image float left to the text in a container.
The float property can have one of the following values:
● left – The element floats to the left of its container
● right – The element floats to the right of its container
● none – The element does not float (will be displayed just where it
Occurs in the text). This is default
● inherit – The element inherits the float value of its parent
Example :-
Img {
Float: right;
}
5.Align :-
Set an alignment of the text.
Example :
Text-align: center;
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

6.Pseudo class :-
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
● Style an element when a user moves the mouse over it
● Style visited and unvisited links differently
● Style an element when it gets focus
● Style valid/invalid/required/optional form elements
Example:
<html>
<head>
<style>
/* mouse over link */
A:hover {
Color: hotpink;
/* selected link */
A:focus {
Color: blue;
}</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href=”default.asp” target=”_blank”>This is a
link</a></b></p>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

</body>
</html>

7.Navigation bar:
Having easy-to-use navigation is important for any web site.
● With CSS you can transform boring HTML menus into good-
looking
navigation bars.
● A navigation bar needs standard HTML as a base.
● In our examples we will build the navigation bar from a standard
HTML list.
● A navigation bar is basically a list of links, so using the <ul> and
<li>
elements makes perfect sense:
Example :-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Simple Navbar</title>
</head>
<body>
<nav class="navbar">
<div class="logo">MyLogo</div>
<ul class="nav-links">
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>
8.Image sprites:
● An image sprite is a collection of images put into a single image.
● A web page with many images can take a long time to load and
Generates multiple server requests.
● Using image sprites will reduce the number of server requests and
Save bandwidth.
Image Sprites – Simple Example
Instead of using three separate images, we use this single image
(“img_navsprites.gif”):
With CSS, we can show just the part of the image we need.
In the following example the CSS specifies which part of the
“img_navsprites.gif” image to show:
#home {
Width: 46px;
Height: 44px;
Background: url(img_navsprites.gif) 0 0;
}
9.Attribute selector :-
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

It is possible to style HTML elements that have specific attributes or


Attribute values.
● The [attribute] selector is used to select elements with a specified
Attribute.

Example:-
<style>
A[target] {
Background-color: yellow;
}</style>

A[target=”_blank”] {

Background-color: yellow;

</style>
10.Grouping selector:
The grouping selector is used to apply the same styles to multiple
elements at once. You can Group multiple selectors (tags, classes, IDs)
together, separated by commas, and apply a Common set of styles to
them.
Example
<html>
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

<head>
<title>Grouping Selector Example</title>
<style>

H1, p{
Font-family: Arial, sans-serif; /* Apply the same font to all */
Color: darkgreen; /* Apply dark green text color */
Font-size: 16px; /* Apply the same font size */
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph with the same styling as the heading.</p>
</body>
</html>

}*CSS Color
● Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
● The color property specifies the color of text.
Example:

<!DOCTYPE html>
<head>
<title>CSS Color Example</title>
<style>
/* Using hexadecimal color */
H1 {
Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

Color: #FF5733; /* Bright orange */


}
/* Using RGB color */
P{
Color: rgb(0, 128, 0); /* Green text color */
}
/* Using RGBA color */
.box1 {
Background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
Padding: 10px;
Color: white;
}
</style>
</head>

<body>

<h1>CSS Color Example</h1>

<p>This paragraph uses RGB color for the text.</p>


<div class=”box1”>
<p>This box uses RGBA for a semi-transparent red background.</p>
</div>
</body>
</html>

*Creating page Layout and Site Designs

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element


Course Code: 4040233136
Course Name: Web designing
using HTML

SEMESTER: 1

You might also like