Cslab-01 Kru

HVPM COET SUB: CSLAB-III
PRACTICAL NO. 01
Aim:- Understanding the use of HTML and CSS programming.
Description of HTML:-
HTML, which stands for HyperText Markup Language, is the standard markup language
used to create web pages and structure their content on the World Wide Web. HTML is an
essential part of web development, and it serves as the backbone for displaying text, images,
multimedia, links, and other elements on a web page.
HTML TAGS:-
SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19



Basic structure of HTML :-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>

</body>
</html>
Code of HTML:--
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a basic HTML example.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="https://www.example.com">Visit Example.com</a>
</body>
</html>
Output of above HTML :-

Description of CSS :-
CSS,which stands for Cascading Style Sheets, is a stylesheet language used in web
development to control the visual presentation and layout of HTML elements on a web page.
CSS is a fundamental technology for creating attractive and responsive web designs.
1. Inline CSS: Inline CSS involves adding CSS styles directly within HTML elements using
the style attribute. This method applies styles to individual elements.
<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>
2. External CSS: External CSS involves creating a separate .css file that contains all the
styles for a website. You then link this external CSS file to your HTML documents using the
<link> element within the <head> section.
<link rel="stylesheet" type="text/css" href="styles.css">

/* CSS rules for styling various elements */
h1 {
color: blue;
font-size: 24px;
}
p{
color: green;
font-size: 16px;
}
3. Internal (Embedded) CSS: Internal CSS, also known as embedded CSS, involves placing
CSS styles within the <style> element in the <head> section of an HTML document. The
styles apply only to that specific HTML document.
<head>
<style>
/* CSS rules for styling various elements */
h1 {
color: blue;
font-size: 24px;
}
p{
color: green;
font-size: 16px;
}
</style>
</head>

● Styling and Presentation: CSS is primarily used to define the styling and
presentation of web content. It allows you to control aspects like text color, font size,
background color, margins, padding, borders, and more for HTML elements. With
CSS, you can make web pages visually appealing and consistent.
● Separation of Concerns: CSS promotes the separation of content (HTML) and
presentation (CSS). This separation enhances the maintainability and scalability of
web projects. Developers can make changes to the styling without altering the
underlying HTML structure.
● Selectors: CSS uses selectors to target HTML elements that you want to style.
Selectors can be based on element types (e.g., p for paragraphs), class names
(e.g., .highlight), IDs (e.g., #header), and various other criteria. This allows fine-
grained control over styling.
● Properties and Values: For selected elements, CSS defines properties and values
that determine their appearance. For example, you can set the color property to
change text color, font-size to adjust text size, background-color to set a background
color, and border to add borders around elements. CSS provides a wide range of
properties and values to style elements.
● Selectors Hierarchy: CSS supports the concept of a hierarchy or cascading order of
styles. This means that multiple styles can apply to an element, and the most specific
style takes precedence. This hierarchy helps resolve conflicts and maintain
consistency.
● External Stylesheets: CSS can be written directly within an HTML document using
the <style> element, but it is often placed in external CSS files with a .css extension.
This allows the same stylesheet to be used across multiple web pages, promoting
consistency and ease of maintenance.
Basic structure of CSS :-
/* This is a CSS comment */

/* You can add comments to provide explanations */
/* CSS rules are defined using selectors, properties, and values */

selector {
property1: value1;
property2: value2;
/* More properties and values can be added */
}
/* Selectors target HTML elements to apply the defined styles */

Code of CSS :-
<!DOCTYPE html>
<html>
<head>
<title>Basic CSS Example</title>
<style>
/* CSS rule to style the <h1> element */
h1 {
color: blue;
font-family:
}
/* CSS rule to style <p> elements */
p{
color: green;
font-size: 18px;
}
/* CSS rule to style <ul> elements */
ul {
list-style-type: square;
}
/* CSS rule to style <li> elements within <ul> */
ul li {
margin-left: 20px;
font-weight: bold;
</style>
</head>
<body>
<h1>Welcome to My CSS Example</h1>
<p>This is a simple demonstration of CSS styling.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>

Output of CSS :-
Result :- I have completed my first practical based on HTML and CSS with code and
output.

Cslab-01 Kru

Uploaded by

Copyright:

Available Formats

Cslab-01 Kru

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

Cslab-01 Kru

Uploaded by

Copyright:

Available Formats

HVPM COET SUB: CSLAB-III

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

Basic structure of HTML :-

Output of above HTML :-

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

<p style="color: blue; font-size: 16px;">This is a paragraph with inline CSS.</p>

<link rel="stylesheet" type="text/css" href="styles.css">

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

Basic structure of CSS :-

/* This is a CSS comment */

/* CSS rules are defined using selectors, properties, and values */

/* Selectors target HTML elements to apply the defined styles */

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

SUBMITTED BY: KRUTIKA WANKHADE ROLL NO.: 19

You might also like