Scribd
Upload
3 views

Experiment-2_CSS

The document outlines an experiment for designing a web page using CSS3 and HTML5. It covers CSS properties, styling images, classes, and IDs, as well as adjusting content, padding, border, and margins using the CSS box model. The aim is to apply these concepts to create a styled webpage for the academic year 2024-25, semester V, in the Department of Computer Science and Engineering.

Uploaded by

siddhanth.arlekar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Experiment-2_CSS

The document outlines an experiment for designing a web page using CSS3 and HTML5. It covers CSS properties, styling images, classes, and IDs, as well as adjusting content, padding, border, and margins using the CSS box model. The aim is to apply these concepts to create a styled webpage for the academic year 2024-25, semester V, in the Department of Computer Science and Engineering.

Uploaded by

siddhanth.arlekar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Department of computer science and Engineering

Data Science

Academic Year: 2024-25 Semester: V


Class / Branch: TEDS
Subject: WC AND
NW

Experiment No. 02

1. Aim: To design a web page using CSS3 with properties and styles.

2. Software used: HTML5.0 and CSS

3. Theory :-

CSS Properties

CSS rules also known as rulesets and are a combination of one or more CSS properties that you can apply
to one or more HTML elements.

It consists of a CSS selector and CSS properties. It determines what to style to a targeted HTML element.

Declaring Values for Multiple Properties In a CSS Rule

div {

border-color: brown;

font-size: 2rem;

font-family: 'Times New Roman';

}
Style Images With CSS
Style images with CSS such as adding a border to an image, adjusting its dimensions, and further specific
CSS to our images in the webpage. First, add an image element in the HTML file.

Styling Classes With CSS


Apply CSS rules only to the HTML elements that have specific classes. First, let’s create an HTML
element that has some class, and then we shall apply CSS to the entire class. Applying CSS to the entire
class will allow us to style all the elements that have the particular class.

To use the class as a selector while creating a CSS rule, we use the ‘.’ symbol before writing the class
name in the CSS file.
Styling IDs with CSS
Using IDs as selectors while creating CSS rules is similar to using classes as selectors, however, IDs are
unique in the HTML document and no two elements can carry the same IDs. IDs are generally applied to
the elements which are present only one time in the HTML document such as the navbar, logo, and more.

How To Adjust the Content, Padding, Border, and Margins of an HTML


Element With CSS
Before understanding how to adjust the content, padding, border, and margins of an HTML element, let’s
understand the CSS box model. It is a box that wraps around every HTML element in the DOM.

● Content box: It is the space where the content of the HTML element appears, such as images, text, and
more.
● Padding: It is the transparent area around the content of the element.

● Border: It is the box surrounding the padding box. By default, the value of the border for every HTML
element is zero; however, increasing the border value increases the space between the padding and the
margin box.

● Margin: It is the transparent area outside the border box.

Result:

Thus, we have studied to design webpage using HTML 5.0 and CSS3.

You might also like