WT 2

Web Technology IU2141220103
Assignment-2
1. Define CSS and Explain CSS types with example.
CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation and
formatting of HTML (Hypertext Markup Language) documents. It allows web developers to control
how web pages look and how they are displayed on various devices and screen sizes. CSS separates
the structure and content of a webpage (defined by HTML) from its visual appearance, making it
easier to maintain and update the design of a website.
There are three main types of CSS:
1. Inline CSS:
 Inline CSS is applied directly to individual HTML elements using the style attribute.
 It is useful for making specific, one-off style changes to a single element.
 Example:
<p style="color: blue; font-size: 16px;">This is a blue-colored text with a 16px font
size.</p>
2. Internal CSS (Embedded CSS):
 Internal CSS is defined within the HTML document itself, typically in the <style> tag
within the <head> section of the HTML document.
 It affects the styling of multiple elements within the same document.
 Example:
<!DOCTYPE html>
<html> <head>
<style> p { color: green; font-size: 18px; } </style>
</head> <body>
<p>This is a green-colored text with an 18px font size.</p>
</body> </html>
3. External CSS:
 External CSS is defined in a separate CSS file with a .css extension. This file is linked
to an HTML document using the <link> element in the <head> section.
 It allows for the separation of style from content and can be reused across multiple
HTML pages.
 Example (CSS file named styles.css):
p { color: red; font-size: 20px; }
<!DOCTYPE html>
1
<html> <head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head> <body>
<p>This is a red-colored text with a 20px font size.</p>
</body> </html>
In the examples above:
 Inline CSS is used to style a single <p> element.
 Internal CSS is applied to all <p> elements within the HTML document.
 External CSS is defined in a separate file and linked to the HTML document, also affecting all
<p> elements.
Each type of CSS has its use case, but external CSS is the most common choice for larger projects
because it promotes maintainability and reusability by keeping the styling separate from the HTML
content.
2. Explain CSS-3 Properties with example.

CSS3 (Cascading Style Sheets Level 3) introduced a wide range of new properties and features that
enhance the styling capabilities of web developers. Here, I'll explain some CSS3 properties with
examples:
1. Border Radius:
 The border-radius property allows you to create rounded corners for elements, such
as divs and buttons.
 Example:
.rounded-box { border-radius: 10px; }
<div class="rounded-box">This is a rounded box.</div>
2. Box Shadow:
 The box-shadow property adds a shadow effect to elements.
 Example:
.shadow-box { box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.5); }
<div class="shadow-box">This is a box with a shadow.</div>
3. Text Shadow:
 The text-shadow property adds a shadow effect to text within elements.
 Example:
.text-with-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }
<p class="text-with-shadow">This is text with a shadow.</p>
2
4. Gradients:
 CSS3 allows you to create gradient backgrounds using the linear-gradient and radial-
gradient functions.
 Example (linear gradient):
.gradient-box { background: linear-gradient(to bottom, #ffcccc, #ff6666); }
<div class="gradient-box">This is a gradient background.</div>
5. Transform:
 The transform property enables you to apply 2D and 3D transformations to

elements, such as scaling, rotating, and translating.
 Example (rotate):
.rotate-element { transform: rotate(45deg); }
<div class="rotate-element">This element is rotated.</div>
6. Transition:
 The transition property lets you create smooth transitions between CSS property
changes, adding interactivity to your web pages.
 Example:
.transition-element { transition: background-color 0.3s ease-in-out; }
.transition-element:hover { background-color: #00ff00; }
<div class="transition-element">Hover to change background color.</div>
7. @keyframes Animation:
 CSS3 introduced the @keyframes rule, which allows you to create animations with
keyframe sequences.
 Example:
@keyframes slide-in { from { transform: translateX(-100%); } to { transform:

translateX(0); } }
.slide-element { animation: slide-in 1s ease-in-out; }
<div class="slide-element">This element slides in when loaded.</div>
These are just a few examples of the many CSS3 properties and features that enhance the design and
interactivity of web pages. CSS3 has greatly expanded the possibilities for web designers and
developers to create visually appealing and dynamic websites.
3. Explain Transformation with example.

Transformations in CSS allow you to modify the appearance and position of HTML elements. They
can be used to scale, rotate, skew, and translate (move) elements on a webpage. Transformations are
3
achieved using the transform property in CSS. Here, I'll explain some common transformations with
examples:
1. Translate (Move):
 Translating an element means changing its position on the screen without altering its
size or shape.
 Example:
.translated-box { transform: translate(50px, 30px); }
<div class="translated-box">This box has been moved 50px to the right and 30px
down.</div>
2. Scale:
 Scaling an element enlarges or reduces its size.
 Example:
.scaled-box { transform: scale(1.5); /* 150% of the original size */ }
<div class="scaled-box">This box has been scaled up by 1.5 times its original
size.</div>
3. Rotate:
 Rotating an element changes its orientation by a specified angle.
 Example:
.rotated-box { transform: rotate(45deg); /* 45 degrees clockwise rotation */ }
<div class="rotated-box">This box has been rotated 45 degrees clockwise.</div>
4. Skew:
 Skewing an element tilts it along the horizontal and/or vertical axis.
 Example (skewing horizontally):
.skewed-box { transform: skewX(20deg); /* Tilted 20 degrees horizontally */ }
<div class="skewed-box">This box is skewed 20 degrees horizontally.</div>
5. Combining Transformations:
 You can combine multiple transformations to achieve complex effects.
 Example (scaling and rotating):
.complex-transform { transform: scale(1.5) rotate(45deg); }
<div class="complex-transform">This box has been scaled and rotated.</div>
6. Transform Origin:
 You can also specify a transformation origin, which determines the point around
which the transformation is applied.
4
 Example:
.transform-origin-box { transform-origin: top left; transform: scale(2); }
<div class="transform-origin-box">This box is scaled with its top-left corner as the

transformation origin.</div>
Transformations are a powerful tool for creating interactive and visually appealing web content. They
can be combined with transitions and animations to create even more dynamic effects on your web
pages.
4. Explain Id , class, and Universal with example.

In CSS, selectors are used to target HTML elements and apply styles to them. Three common types of
selectors are ID selectors, class selectors, and the universal selector. Let's explain each of them with
examples:
1. ID Selector (#):
 An ID selector targets a specific HTML element with a unique ID attribute.
 To select an element by its ID, you use a # followed by the ID value.
 Example:
<p id="my-paragraph">This is a paragraph.</p>
#my-paragraph { color: blue; }
 In this example, the CSS rule #my-paragraph targets the <p> element with the ID
"my-paragraph" and changes its text color to blue.
2. Class Selector (.):
 A class selector targets one or more HTML elements that share the same class
attribute.
 To select elements by their class, you use a . followed by the class name.
 Example:
<p class="highlight">This is a highlighted paragraph.</p> <p class="highlight">This is

another highlighted paragraph.</p>
.highlight { background-color: yellow; }
 The CSS rule .highlight targets both <p> elements with the class "highlight" and gives
them a yellow background color.
3. Universal Selector (*):
 The universal selector selects all HTML elements on a page.
 It is represented by an asterisk *.
 Example:
* { margin: 0; padding: 0; }
5
 In this example, the universal selector is used to remove default margin and padding
from all HTML elements on the page.
These selectors help you apply styles to specific elements or groups of elements in your HTML
documents. ID selectors are typically used for unique elements, class selectors for multiple elements
with a shared class, and the universal selector for global styling or resetting default browser styles.
5. Explain Animation with example.

In CSS, animations allow you to create dynamic and visually engaging effects on web elements. CSS
animations can change an element's properties smoothly over a specified duration. To create an
animation, you define a set of keyframes that describe the style changes at different points during
the animation. Here's an explanation of CSS animations with an example:
Basic CSS Animation Example:
Suppose you want to create a simple animation that makes a div element move from left to right
continuously. Here's how you can do it:
1. HTML:
<div class="animated-div"></div>
2. CSS:
.animated-div { width: 100px; height: 100px; background-color: blue; position: relative;

animation: moveRight 3s linear infinite; }
@keyframes moveRight { 0% { left: 0; } 100% { left: 300px} }
In this example:
 We have an empty div with the class animated-div.
 We define a CSS animation named moveRight using the @keyframes rule. This animation
changes the left property of the element from 0 to 300px over a duration of 3 seconds (3s)
with a linear timing function.
 The infinite value for animation-iteration-count makes the animation repeat indefinitely.
Now, when you load the HTML page, the div with the class animated-div will smoothly move from
left to right and then restart, creating a continuous animation.
CSS animations offer a wide range of possibilities beyond simple movements. You can animate
properties like opacity, transform, colors, and more to create various visual effects. Additionally, you
can control the animation's timing, direction, and duration to achieve the desired effect for your web
application.
6. Explain Multiple columns attribute.

The "multiple columns" attribute, or more accurately, the "multi-column layout" property in CSS, is
used to create a newspaper or magazine-style column layout for text content. It allows you to divide
a block of text into multiple columns, making it easier to read and enhancing the overall design of a
webpage. This feature is especially useful for creating responsive and aesthetically pleasing layouts
for articles, blog posts, and other textual content.
6
The primary property for creating multi-column layouts in CSS is column-count, although there are
related properties like column-gap, column-rule, and column-width that can be used to further
customize the appearance of the columns. Here's an explanation of the key properties:
1. column-count:
 The column-count property specifies the number of columns you want to divide
your content into.
 Example:
.multi-column-text { column-count: 3; }
 In this example, the text within elements with the class .multi-column-text will be
divided into three columns.
2. column-gap:
 The column-gap property sets the space (in pixels or other units) between columns.
 Example:
.multi-column-text { column-count: 2; column-gap: 20px; }
 This will create a two-column layout with a 20-pixel gap between the columns.
3. column-rule:
 The column-rule property allows you to add a line, or "rule," between columns,
specifying its width, style, and color.
 Example:
.multi-column-text { column-count: 2; column-rule: 2px solid #ccc; }
 This adds a solid 2-pixel-wide gray line between the columns.
4. column-width:
 The column-width property sets a fixed width for the columns. You can use it instead
of column-count to create columns of a specific width.
 Example:
.multi-column-text { column-width: 200px; }
 This will create columns with a fixed width of 200 pixels, and the number of columns
will adjust based on the available space.
The multi-column layout is particularly useful for displaying long articles or text content in a more
readable and visually appealing way, especially on larger screens. However, it's important to consider
the responsiveness of your design and adapt the number of columns and column width for different
screen sizes using media queries if necessary.
7. Explain User Interface with example.

A user interface (UI) is a point of interaction between a user and a computer program or system. It
encompasses all the elements and components that enable users to interact with digital devices,
7
software applications, websites, or other systems. A well-designed user interface is crucial for
providing a positive user experience and ensuring that users can efficiently and effectively
accomplish their tasks. Here's an explanation of user interfaces with an example:
Components of a User Interface:
A user interface typically consists of the following key components:
1. Input Elements: These components allow users to input data or interact with the system.
Examples include text fields, buttons, checkboxes, radio buttons, dropdown menus, and
touch gestures on a mobile device.
2. Output Elements: These components display information to users. Examples include text,
images, videos, charts, and notifications.
3. Navigation Elements: These components enable users to move within the system or
between different sections of an application. Examples include menus, tabs, breadcrumbs,
and links.
4. Feedback Elements: These components provide feedback to users about their interactions
with the system, such as success messages, error messages, progress indicators, and tooltips.
5. Layout and Design: The arrangement and visual design of elements are critical for usability
and aesthetics. Layout includes the positioning of elements on the screen, and design
involves aspects like color, typography, and visual hierarchy.
6. Interactivity: User interfaces often include interactive elements that respond to user actions.
For instance, buttons change appearance when clicked, or elements can be dragged and
dropped.
Example of a User Interface:
Let's consider a simple example of a user interface for a weather application. In this case, the user
interface could consist of the following elements:
 Input Elements: A text field where users can enter a location (e.g., a city name), a button to
initiate the search, and checkboxes to specify weather parameters (e.g., temperature,
humidity).
 Output Elements: A section to display the weather information for the selected location,
including current temperature, forecast, and any weather alerts. This section may include
icons, charts, and textual descriptions.
 Navigation Elements: A menu or tabs that allow users to switch between different locations
or weather-related features (e.g., current weather, 7-day forecast, radar view).
 Feedback Elements: Messages that inform users about the success of their search, any
errors encountered (e.g., invalid location), and notifications for weather updates (e.g., "Rain
expected in 30 minutes").
 Layout and Design: The design of the interface includes choosing an appropriate color
scheme (e.g., blue for a weather app), using readable fonts, and arranging elements in a
logical and aesthetically pleasing manner.
8
 Interactivity: Users can click the search button to initiate a search, toggle checkboxes to
customize the weather information, and perhaps drag a map to explore different locations.
A well-designed weather app user interface will make it easy for users to input their preferences,
understand the weather information presented, and navigate between features, ultimately providing
a positive user experience. Good design considerations, responsiveness to user actions, and clear
feedback are key factors in the success of a user interface.
8. Explain Bootstrap with CSS.

Bootstrap is a popular open-source front-end framework that simplifies the process of designing and
building responsive and visually appealing websites and web applications. While Bootstrap includes
its own CSS framework, it is still fundamentally based on CSS (Cascading Style Sheets). Here's an
explanation of Bootstrap with a focus on its CSS components:
1. CSS Grid System:
 Bootstrap provides a responsive, 12-column grid system that allows you to create
flexible and responsive layouts for your web pages. You can use classes like
.container, .row, and .col-* (where * represents the column width) to structure your
content within a grid.
 Example:
<div class="container"> <div class="row"> <div class="col-md-6">Column 1</div>

<div class="col-md-6">Column 2</div> </div> </div>
 In this example, two columns are created within a container, and the layout will
automatically adjust based on the screen size.
2. Responsive Typography:
 Bootstrap offers styles for typography to ensure consistent and readable text across
different devices. You can use classes like .h1, .h2, .lead, and .text-* to style headings
and text.
 Example:
<h1 class="display-4">This is a Bootstrap heading</h1> <p class="lead">This is a lead

paragraph.</p> <p class="text-muted">This text is in muted color.</p>
3. Pre-designed Components:
 Bootstrap includes a wide range of pre-designed CSS components, such as buttons,

navigation bars, forms, modals, alerts, and more. These components come with
predefined styles and classes, making it easy to implement common UI elements.
 Example:
<button class="btn btn-primary">Primary Button</button>
<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>
<form>  </form>
4. Responsive Utilities:
9
 Bootstrap provides utility classes for hiding, showing, and adjusting the visibility of
elements based on screen size. Classes like .d-none, .d-md-block, and .mx-auto help
create responsive designs.
 Example:
<div class="d-none d-md-block">This is visible on screens medium and larger.</div>

<img src="image.jpg" class="mx-auto" alt="Centered Image">
5. Customization:
 Bootstrap allows you to customize its appearance by modifying variables in a Sass or

Less file. This makes it possible to create a unique look and feel for your project
while still benefiting from Bootstrap's responsive layout and components.
Bootstrap simplifies front-end development by providing a consistent and well-documented set of

CSS styles and components. It's a powerful tool for developers and designers to create responsive
and visually appealing websites and web applications while saving time and effort in the design
process.
10

WT 2

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

WT 2

Uploaded by

Copyright:

Available Formats

Web Technology IU2141220103

There are three main types of CSS:

 It is useful for making specific, one-off style changes to a single element.

2. Internal CSS (Embedded CSS):

 It affects the styling of multiple elements within the same document.

<style> p { color: green; font-size: 18px; } </style>

<p>This is a green-colored text with an 18px font size.</p>

 Example (CSS file named styles.css):

p { color: red; font-size: 20px; }

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

<p>This is a red-colored text with a 20px font size.</p>

In the examples above:

 Inline CSS is used to style a single <p> element.

2. Explain CSS-3 Properties with example.

.rounded-box { border-radius: 10px; }

<div class="rounded-box">This is a rounded box.</div>

 The box-shadow property adds a shadow effect to elements.

.shadow-box { box-shadow: 3px 3px 5px 2px rgba(0, 0, 0, 0.5); }

<div class="shadow-box">This is a box with a shadow.</div>

 The text-shadow property adds a shadow effect to text within elements.

.text-with-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); }

<p class="text-with-shadow">This is text with a shadow.</p>

 Example (linear gradient):

.gradient-box { background: linear-gradient(to bottom, #ffcccc, #ff6666); }

<div class="gradient-box">This is a gradient background.</div>

 The transform property enables you to apply 2D and 3D transformations to

.rotate-element { transform: rotate(45deg); }

<div class="rotate-element">This element is rotated.</div>

.transition-element { transition: background-color 0.3s ease-in-out; }

.transition-element:hover { background-color: #00ff00; }

<div class="transition-element">Hover to change background color.</div>

@keyframes slide-in { from { transform: translateX(-100%); } to { transform:

.slide-element { animation: slide-in 1s ease-in-out; }

<div class="slide-element">This element slides in when loaded.</div>

3. Explain Transformation with example.

.translated-box { transform: translate(50px, 30px); }

 Scaling an element enlarges or reduces its size.

.scaled-box { transform: scale(1.5); /* 150% of the original size */ }

 Rotating an element changes its orientation by a specified angle.

.rotated-box { transform: rotate(45deg); /* 45 degrees clockwise rotation */ }

<div class="rotated-box">This box has been rotated 45 degrees clockwise.</div>

 Skewing an element tilts it along the horizontal and/or vertical axis.

 Example (skewing horizontally):

.skewed-box { transform: skewX(20deg); /* Tilted 20 degrees horizontally */ }

<div class="skewed-box">This box is skewed 20 degrees horizontally.</div>

 You can combine multiple transformations to achieve complex effects.

 Example (scaling and rotating):

.complex-transform { transform: scale(1.5) rotate(45deg); }

<div class="complex-transform">This box has been scaled and rotated.</div>

.transform-origin-box { transform-origin: top left; transform: scale(2); }

<div class="transform-origin-box">This box is scaled with its top-left corner as the

4. Explain Id , class, and Universal with example.

 An ID selector targets a specific HTML element with a unique ID attribute.

 To select an element by its ID, you use a # followed by the ID value.

<p id="my-paragraph">This is a paragraph.</p>

#my-paragraph { color: blue; }

2. Class Selector (.):

<p class="highlight">This is a highlighted paragraph.</p> <p class="highlight">This is

.highlight { background-color: yellow; }

3. Universal Selector (*):

 The universal selector selects all HTML elements on a page.

5. Explain Animation with example.

Basic CSS Animation Example: