Terna Engineering College
AI/DS Engineering
Department Subject – Web
Computing
Class and Branch: TE AI&DS
Student Roll No.: 35
Student Name: Aryan Shetty
Experiment No. 2
Aim: CSS3-Cascading Style Sheet- Syntax, Inclusion, Color, Background,Fonts, Tables, lists, CSS3
selectors, Pseudo classes, Pseudo elements.
A. Theory:
CSS (Cascading Style Sheets) is a styling language used to control the look and layout of HTML
elements. CSS3 is the latest version and adds new features like animations, gradients, and
enhanced selectors.
1. CSS Syntax
CSS rules consist of a selector and a declaration block. The selector points to the HTML element,
and the declaration block contains styling rules inside curly braces.
Example:
p { color: red; font-size: 16px; }
2. CSS Inclusion Methods
There are three main ways to include CSS in a webpage:
•Inline CSS – inside the HTML element using the style attribute.
•Internal CSS – inside a <style> tag in the HTML <head>.
•External CSS – in a separate .css file linked via <link>.
3. Color
Colors in CSS can be defined using color names, HEX codes, RGB, RGBA, or HSL
values. Example:
color: #ff0000; or color: rgb(255, 0, 0);
4. Background
The background property controls the background color, image, position, and
more. Example:
background-color: lightblue;
background-image: url("[Link]");
5. Fonts
CSS lets you style fonts using properties like font-family, font-size, font-style,
and font-weight. Example:
font-family: Arial, sans-serif;
font-size: 18px;
6. Tables
CSS can be used to style tables by changing border styles, cell spacing, text alignment, and
background color.
Example:
table { border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #333; }
7. Lists
CSS allows customization of ordered and unordered lists using list-style-type, list-style-position,
and list-style-image.
Example:
ul { list-style-type: square; }
ol { list-style-position: inside; }
8. CSS3 Selectors
Selectors are used to target HTML elements for styling.
Types include:
•Universal (*) – targets all elements
•Element (p, h1)
•Class (.classname)
•ID (#idname)
•Group (h1, p)
Example:
.box { border: 1px solid black; }
9. Pseudo-Classes
Pseudo-classes define a special state of an element, like when it’s hovered or
visited. Example:
a:hover { color: red; }
input:focus { background-color: yellow; }
10. Pseudo-Elements
Pseudo-elements let you style specific parts of an element.
Example:
p::first-letter { font-size: 200%; } p::before
{ content: "Note: "; color: blue; }
11. Box Model
In CSS, every element is treated as a rectangular box. The box model consists
of: • Content – The actual element content
•Padding – Space between content and border
•Border – Edge around padding and content
•Margin – Space outside the border
Example: A div with margin, padding, and border creates space around the content and
between other elements.
12. Positioning
The position property is used to control the placement of elements.
Types of positioning:
•static – Default, normal flow
•relative – Moved relative to its normal position
•absolute – Positioned relative to nearest positioned ancestor
•fixed – Stays in place even when scrolling
•sticky
– Switches between relative and fixed
Example: A header with position: sticky stays at the top when scrolling.
13. Display Property
The display property controls how an element is displayed on the page.
Common values:
•block – Fills the whole width
•inline – Stays with surrounding text
•inline-block – Like inline, but allows width and height
•none– Hides the element from the layout
Example: A <span> can behave like a block using display: inline-block.
14. Flexbox
Flexbox is a layout model used to align and distribute space among items in a
container. It helps to easily center, wrap, and space elements.
Example: A container with display: flex and justify-content: space-between distributes items evenly.
15. Media Queries
Media queries are used to make web pages responsive to different screen sizes.
They apply specific styles when certain conditions are met (e.g., screen width).
Example: A layout changes for mobile view using @media (max-width:
600px).
16. Transitions
Transitions allow CSS properties to change smoothly over a specified duration. Example:
A button changing color when hovered using transition: background-color 0.5s.
17. Gradients
Gradients provide a smooth transition between two or more colors.
Types include linear and radial gradients.
Example: A background changing from blue to green using linear-gradient(to right, blue, green).
18. Shadows
CSS3 adds support for shadows on elements.
•box-shadow applies a shadow to boxes
•text-shadow adds shadow to text
Example: A card with box-shadow: 5px 5px 10px gray gives a lifted appearance.
19. Border Radius
The border-radius property creates rounded corners for elements.
Example: A profile picture inside a div with border-radius: 50% appears circular.
20. Opacity and RGBA
•opacity controls the transparency of an element (0 to 1)
•rgbaadds transparency to color
Example: A box with opacity: 0.5 or background rgba(0, 0, 255, 0.5) is semi-transparent.
B. Program:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f4;
header {
background: #007bff;
color: white;
padding: 20px;
text-align: center;
section {
background:
white; margin:
20px auto;
padding: 20px;
border-radius:
8px; width: 90%;
max-width: 800px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h2 {
color: #333;
table {
border-collapse: collapse;
width: 100%;
table,
th,
td {
border: 1px solid #aaa;
th,
td {
padding: 8px;
text-align: left;
form label {
display: block;
margin-top: 10px;
font-weight:
bold;
form input,
form select,
form textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
button:hover {
background-color: #0056b3;
footer {
text-align: center;
padding: 10px;
color: white;
background: #333;
C. Output and findings:
D. Conclusion:
Hence, we can conclude that CSS is an essential part of web development as it allows us to style and design
HTML pages easily. It helps control the look of elements by changing colors, fonts, spacing, layout, and
much more. In this experiment, we learned how to include CSS in a webpage and explored many useful
properties such as background, borders, margins, and text formatting. We also understood how CSS3
introduces new features like gradients, transitions, and media queries, which make websites more
interactive and responsive. Overall, CSS helps in creating clean, attractive, and user-friendly web pages,
which greatly improves the user experience.
