[go: up one dir, main page]
Scribd
Upload
5 views36 pages

unit -2 web technology

The document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its purpose, how to create stylesheets, and key concepts such as properties, selectors, and the box model. It explains the differences between inline, internal, and external CSS, as well as the importance of the cascade and specificity in determining which styles are applied. Additionally, it covers block elements, their characteristics, and how to manipulate their behavior using the display property.

Uploaded by

dwiutkarsh2260
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
5 views36 pages

unit -2 web technology

The document provides a comprehensive overview of CSS (Cascading Style Sheets), detailing its purpose, how to create stylesheets, and key concepts such as properties, selectors, and the box model. It explains the differences between inline, internal, and external CSS, as well as the importance of the cascade and specificity in determining which styles are applied. Additionally, it covers block elements, their characteristics, and how to manipulate their behavior using the display property.

Uploaded by

dwiutkarsh2260
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/ 36

BUDDHA SERIES

(Unit Wise Solved Question & Answers)

Course – B. Tech (CSE & IT)


College – Buddha Institute of Technology
(AKTU CODE-525)

Department: CSE & IT


Subject: Web Technology (BCS-502)
Faculty Name: Mr.Rajkumar Bharti
Unit - 2
Web Technology (BCS-502) Unit-2

1. What is CSS and How to create style sheet? [AKTU 2022, 2020]

Ans. CSS stands for Cascading Style Sheets, and it is a stylesheet language used to describe the
presentation (visual appearance) of a document written in HTML or XML. While HTML
provides the structure and content of a web page (such as headings, paragraphs, and images),
CSS controls how the page looks. It allows web developers to specify things like:

 Colors (e.g., text color, background color)


 Fonts (e.g., font family, size, weight)
 Layout (e.g., grid, flexbox, positioning)
 Spacing (e.g., margins, padding)
 Borders and Shadows
 Transitions and animations

CSS helps in separating the content (HTML) from the presentation (CSS), making it easier to
manage and maintain the look and feel of a website.

How to Create a Style Sheet

There are three main ways to apply CSS to an HTML document:

1. Inline CSS (within an HTML tag)

Inline CSS is used to style a specific element directly within the HTML tag using the style
attribute.

Example:

html
Copy code
<p style="color: blue; font-size: 20px;">This is a blue colored paragraph
with larger text.</p>

2. Internal CSS (within a <style> tag in the <head> section)

Internal CSS is written within the <style> tag, which is placed inside the <head> section of the
HTML document. It applies styles to the entire page.

Example:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2
Web Technology (BCS-502) Unit-2
<title>Internal CSS Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
p {
color: darkgreen;
font-size: 18px;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>

3. External CSS (in a separate .css file)

External CSS is written in a separate .css file, which is linked to the HTML document using the
<link> tag. This method is preferred for larger projects because it separates the content from the
styling, making the code easier to manage and reuse.

Steps to create and link an external CSS file:

1. Create a .css file:


o Create a new file with the .css extension (e.g., styles.css).

Example of styles.css:

css
Copy code
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
p {
color: darkblue;
font-size: 16px;
}

2. Link the CSS file to your HTML:


o In the <head> section of your HTML document, add a <link> tag to connect the
external CSS file.

Example of HTML linking external CSS:

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>

3
Web Technology (BCS-502) Unit-2
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS
-->
</head>
<body>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>

Key CSS Concepts:

 Selectors: Used to target HTML elements (e.g., h1, .class, #id).


 Properties: Define what part of the element to style (e.g., color, font-size, background-
color).
 Values: Specify the value for the properties (e.g., red, 16px, #fff).

Example CSS Rule:

css
Copy code
h1 {
color: red;
font-size: 24px;
}

In this example:

 Selector: h1 (targets all <h1> elements)


 Property: color, font-size
 Value: red, 24px

CSS Cascade and Specificity

CSS follows a "cascade" to determine which styles to apply when multiple rules target the same
element. The specificity of the selector and the order of rules will influence which styles are
applied.

 Inline styles have the highest priority.


 Internal styles have lower priority than inline styles but higher than external styles.
 External styles are applied last unless overridden by more specific rules.

Conclusion:

CSS is essential for controlling the presentation of web pages, and you can create a stylesheet
using inline, internal, or external methods. External CSS is typically the best practice for

4
Web Technology (BCS-502) Unit-2

organizing styles, especially for large projects, as it keeps your code modular and easier to
maintain.

4o mini

2.Explain CSS property and CSS styling .[AKTU 2022-23]

Ans. CSS Property and CSS Styling Explained

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a
web page written in HTML or XML. It controls the layout, design, and appearance of elements
on a page, such as colors, fonts, spacing, positioning, and more.

1. CSS Property

A CSS property is an aspect or characteristic of an element's style that you can control or
modify. Each property has a value that defines how the property will be applied.

 Property: The name of the characteristic you want to modify.


 Value: Defines how that characteristic should be applied (e.g., a color, size, etc.).

For example:

css
Copy code
color: blue; /* 'color' is the property, 'blue' is the value */
font-size: 16px; /* 'font-size' is the property, '16px' is the value */

2. Common CSS Properties

Here are some common CSS properties that you might use:

 Color & Background:


o color: Sets the color of the text.
o background-color: Sets the background color of an element.
o background-image: Sets a background image for an element.

5
Web Technology (BCS-502) Unit-2

 Typography:
o font-family: Specifies the font of the text.
o font-size: Defines the size of the text.
o font-weight: Controls the thickness of the text.
o line-height: Sets the space between lines of text.
 Box Model (Spacing & Layout):
o margin: Controls the space outside an element (outside the border).
o padding: Controls the space inside an element (between the content and the border).
o border: Defines the border around an element (color, width, and style).
 Layout & Positioning:
o width / height: Specifies the size of an element.
o position: Defines how an element is positioned (e.g., relative, absolute, fixed).
o display: Controls how an element is displayed (e.g., block, inline, flex).
o float: Floats an element to the left or right.
 Text & Alignment:
o text-align: Aligns text (left, center, right).
o vertical-align: Aligns elements vertically within a line.
o text-transform: Controls the capitalization of text (uppercase, lowercase, etc.).

3. CSS Styling

CSS styling refers to the application of CSS rules to HTML elements. These rules define how
the properties of the elements should be displayed on the web page.

Structure of a CSS Rule:

A typical CSS rule consists of a selector and one or more declarations.

 Selector: The HTML element that you want to style.


 Declaration Block: One or more property-value pairs enclosed in curly braces {}.

Example:

css
Copy code
selector {
property: value;
}

For instance:

css
Copy code
p {
color: red;
font-size: 18px;
line-height: 1.6;
}

6
Web Technology (BCS-502) Unit-2

This rule targets all <p> elements on the page and applies the following styles:

 Text color is set to red.


 Font size is set to 18px.
 Line height is set to 1.6 (making the lines of text more spaced).

Types of Selectors:

 Element Selector: Targets HTML elements (e.g., p, div, h1).


 Class Selector: Targets elements with a specific class (e.g., .container, .header).
 ID Selector: Targets a specific element with a given ID (e.g., #main, #footer).
 Universal Selector: Targets all elements (*).
 Attribute Selector: Targets elements with a specific attribute (e.g., [type="text"]).

4. External, Internal, and Inline CSS

CSS can be applied to HTML in three main ways:

 External CSS: Linked from an external .css file. This is the most common and efficient
way to apply CSS to multiple pages.

html
Copy code
<link rel="stylesheet" href="styles.css">

 Internal CSS: Defined within the <style> tag in the <head> section of the HTML
document. This is useful for a single page.

html
Copy code
<style>
p { color: blue; }
</style>

 Inline CSS: Applied directly to an element using the style attribute. It affects only that
specific element.

html
Copy code
<p style="color: blue;">This text is blue.</p>

5. The Cascade and Specificity

CSS stands for "Cascading Style Sheets," and one of the important concepts in CSS is how styles
"cascade." If multiple rules target the same element, the cascade decides which rule to apply
based on the specificity of the selector and the order of the styles in the stylesheet.

7
Web Technology (BCS-502) Unit-2

 More specific selectors (e.g., IDs) take precedence over less specific ones (e.g., elements or
classes).
 If two rules have the same specificity, the rule defined last in the stylesheet will be applied.

6. CSS Box Model

All HTML elements are considered to be boxes. The CSS Box Model defines the rectangular
boxes that elements are rendered in. The model consists of:

 Content: The actual content of the box (e.g., text, images).


 Padding: Space around the content, inside the border.
 Border: The border surrounding the padding (if specified).
 Margin: The space outside the border, separating the element from other elements.

lua
Copy code
+-------------------------+
| Margin |
| +-------------------+ |
| | Border | |
| | +-------------+ | |
| | | Padding | | |
| | | +-------+ | | |
| | | | Content| | | |
| | +-------+ | | |
| +---------------+ | |
+-----------------------+

7. Responsive Design with CSS

CSS allows you to create responsive designs that adapt to different screen sizes. This is often
done using media queries. Media queries allow you to apply different styles depending on the
device's screen width, height, or other characteristics.

Example:

css
Copy code
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

This rule changes the background color of the body to light blue if the screen width is 600px or
less.

Conclusion

8
Web Technology (BCS-502) Unit-2

CSS properties and styling are essential tools for controlling the look and feel of a web page. By
understanding how CSS works, you can manipulate how HTML elements are displayed, their
layout, appearance, and even responsiveness across different devices.

4o mini

3. Explain Working with block elements and objects in CSS . [AKTU. 2021-22]

Ans. In CSS, understanding how block elements and objects work is key to controlling layout
and positioning. CSS provides a wide variety of styles and behaviors for elements, and block-
level elements are an essential part of that. Here's a breakdown of working with block elements
and objects in CSS:

1. Block Elements

Block-level elements are HTML elements that take up the full width of their parent container by
default and begin on a new line. They are used to structure the layout of a web page. Some
common block-level elements include:

 <div>
 <p>
 <h1>, <h2>, <h3>, etc.
 <section>
 <article>
 <header>, <footer>
 <ul>, <ol>, <li>

Characteristics of Block Elements:

 Width and Height: A block-level element typically occupies the full width of its parent
container unless you set a specific width. The height is determined by the content inside
the element or by any height you specify.
 New Line Behavior: Block elements always start on a new line and stretch to fill the
available width of their parent container.

9
Web Technology (BCS-502) Unit-2

 Vertical Margins: Block elements can have vertical margins (top and bottom). When
multiple block elements have margins, the margins between them might collapse (known
as margin collapsing).

Example:
html
Copy code
<div>
<p>This is a block-level paragraph inside a div.</p>
<p>Another paragraph inside the div.</p>
</div>
css
Copy code
div {
background-color: #f0f0f0;
padding: 20px;
}

p {
background-color: #e0e0e0;
margin-bottom: 10px;
}

2. Objects in CSS (Box Model and Display Property)

An object in CSS can refer to any element or item you style. In the context of block elements,
it’s often helpful to think about how elements are rendered in terms of the CSS box model. This
model represents the structure of an element's content, padding, border, and margin.

CSS Box Model:

Each element in CSS can be visualized as a box with the following parts:

 Content: The actual content inside the element (e.g., text or images).
 Padding: Space between the content and the element's border.
 Border: The line surrounding the padding (if applied).
 Margin: The space outside the border, separating the element from other elements.

The total width and height of an element can be affected by these properties, especially if you are
using the box-sizing property.

Box-Sizing Property:

 box-sizing: content-box (default): Width and height are applied to the content area only.
Padding and borders are added outside the specified width and height.
 box-sizing: border-box: Width and height include padding and borders. This is often more
predictable when working with layout since the total size of the element remains the same even
when padding or border is added.

10
Web Technology (BCS-502) Unit-2

Example with Box Model:


css
Copy code
div {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 15px;
box-sizing: border-box; /* Includes padding and border in the width/height
calculation */
}

In this example, the total width of the div will be 300px, and the total height will be 200px, even
including the padding and border due to the box-sizing: border-box property.

3. Display Property and Changing Block Behavior

In CSS, you can change how elements behave in terms of layout using the display property. By
default, most block elements have display: block, but you can modify this to control how an
element is displayed in relation to other elements.

Some common display values include:

 display: block: The element behaves as a block-level element (takes up full width,
starts on a new line).
 display: inline: The element behaves as an inline element (only takes up as much
width as its content, doesn't start on a new line).
 display: inline-block: The element behaves like an inline element, but you can set
its width and height (it behaves like both inline and block).
 display: none: The element is not displayed at all (it doesn't take up any space in the
layout).

Example:
html
Copy code
<div class="block-element">This is a block element.</div>
<span class="inline-element">This is an inline element.</span>
<div class="inline-block-element">This is an inline-block element.</div>
css
Copy code
.block-element {
display: block;
width: 200px;
background-color: lightblue;
}

.inline-element {
display: inline;
background-color: lightgreen;
}

11
Web Technology (BCS-502) Unit-2

.inline-block-element {
display: inline-block;
width: 200px;
background-color: lightcoral;
}

In this case:

 The block-element takes up the full width and starts on a new line.
 The inline-element only takes as much space as its content.
 The inline-block-element takes up only as much space as its content but allows for width
and height to be set.

4. Working with Nested Block Elements

Block elements can be nested inside one another. When this happens, the layout of the parent
element and its child elements will be affected by the default block behavior. Child elements will
inherit some of the styling from their parent, but you can adjust them individually.

Example of Nested Block Elements:


html
Copy code
<div class="parent">
<h2>Title</h2>
<p>Some text inside a paragraph.</p>
<div class="child">A nested div inside the parent div.</div>
</div>
css
Copy code
.parent {
background-color: #f8f8f8;
padding: 20px;
border: 1px solid #ccc;
}

h2 {
color: darkblue;
}

.child {
background-color: lightgray;
margin-top: 10px;
padding: 15px;
}

In this example, the parent div will contain a heading (h2), a paragraph (p), and another div as
its child. The child block element will be displayed below the content of the parent by default,
with some margin and padding added for styling.

12
Web Technology (BCS-502) Unit-2

Conclusion

 Block elements are foundational in CSS layout, taking up the full width of their parent by default
and starting on a new line.
 The box model helps control the spacing around elements, and the display property lets you
modify how an element behaves in the flow of the document (block, inline, inline-block, etc.).
 By understanding how block elements behave and how you can modify them with CSS, you gain
control over how your page is structured and styled.

Would you like to dive deeper into any specific part of working with block elements in CSS?

4. Define Working with Lists and Tables in CSS.[AKTU 2019-20]

Ans:- In CSS, working with lists and tables involves using styles to control the layout,
presentation, and formatting of list elements (like ordered and unordered lists) and table elements
(like tables, rows, columns, and cells). Let's break down the key concepts and techniques for
each:

1. Working with Lists in CSS

CSS allows you to style different types of lists, including unordered lists (<ul>), ordered lists
(<ol>), and definition lists (<dl>). Lists typically contain list items (<li>).

Common properties for styling lists:

 List-style: Controls the appearance of list markers (the bullet points or numbers).
o list-style-type: Defines the shape of the list marker (e.g., disc, circle, square,
decimal, lower-alpha).
o list-style-position: Controls whether the list marker appears inside or outside
the list item.
o list-style-image: Allows setting a custom image as the list marker.

Example:

css
Copy code
ul {
list-style-type: square; /* Changes bullet style to a square */
}

ol {
list-style-type: decimal; /* Uses numbers for ordered list */
}

13
Web Technology (BCS-502) Unit-2

Removing List Markers:

If you want to remove the default bullet or number from a list, you can set list-style-type:
none.

Example:

css
Copy code
ul {
list-style-type: none; /* No bullets for unordered lists */
}

Nesting Lists:

Lists can be nested within other lists. To control the appearance of nested lists, you can target the
nested ul or ol elements specifically.

Example:

css
Copy code
ul ul {
list-style-type: circle; /* Nested list uses a circle bullet */
}

2. Working with Tables in CSS

CSS can be used to control the layout and styling of HTML tables ( <table>, <tr>, <td>, <th>,
<thead>, <tbody>, and <tfoot>). Tables are commonly used to display tabular data.

Basic Table Layout:

 Table: The container element for a table.


 Table rows (<tr>): Each row within the table.
 Table cells (<td>): Each data cell in a row.
 Table header cells (<th>): Each header cell, usually bold and centered.

Table Styling:

 Border: Adding borders to tables, rows, columns, or individual cells.


 Padding and spacing: Adjusting the padding inside cells and spacing between them.
 Width and height: Control the dimensions of the table and its cells.

Example:

css
Copy code

14
Web Technology (BCS-502) Unit-2
table {
width: 100%; /* Table takes full width of its container */
border-collapse: collapse; /* Collapses borders between table cells */
}

th, td {
border: 1px solid black; /* Adds border to table headers and data cells
*/
padding: 8px; /* Adds padding inside cells */
text-align: left; /* Align text to the left */
}

th {
background-color: #f2f2f2; /* Light background color for table headers */
}

Table Borders:

 Border-collapse: collapse merges adjacent borders into a single border, while separate
keeps the borders of cells separated.
 Border-spacing: Used when border-collapse is set to separate to add space between table
cells.

Example:

css
Copy code
table {
border-collapse: separate;
border-spacing: 10px; /* Adds space between cells */
}

Table Header Styling:

Table headers (<th>) are often styled to distinguish them from data cells.

Example:

css
Copy code
th {
font-weight: bold;
background-color: #4CAF50; /* Green background */
color: white; /* White text */
}

3. Responsive Lists and Tables

In modern web design, it's important to make sure lists and tables are responsive to different
screen sizes. Here are some common techniques:

15
Web Technology (BCS-502) Unit-2

Responsive Lists:

 Use CSS media queries to change the list layout for different screen sizes.
 For example, turning a horizontal list into a vertical one on small screens:

css
Copy code
ul {
display: flex;
list-style-type: none;
padding: 0;
}

li {
margin-right: 15px; /* Space between items */
}

@media screen and (max-width: 600px) {


ul {
flex-direction: column; /* Stacks list items vertically on small screens
*/
}
li {
margin-right: 0;
margin-bottom: 10px; /* Adds space between vertically stacked items */
}
}

Responsive Tables:

For responsive tables, you can use overflow or scrolling to allow horizontal scrolling on small
screens.

css
Copy code
table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
}

@media screen and (max-width: 600px) {


table {
display: block;
overflow-x: auto; /* Allows horizontal scrolling */
white-space: nowrap;
}
}

Summary

 Lists: You can style the appearance of list markers (bullets or numbers), remove them, or change
the layout of nested lists using the list-style-* properties.

16
Web Technology (BCS-502) Unit-2

 Tables: Use CSS to control borders, padding, spacing, and layout of table elements. You can also
make tables responsive for different screen sizes by using properties like overflow, display,
and media queries.
 Responsive Design: Media queries are essential for adjusting the layout of lists and tables based
on screen width, making them adaptable to mobile devices.

By using CSS, you can create well-designed, functional lists and tables that fit your site's layout
and improve the user experience.

4o mini

5. Explain CSS Id and Class with example. [AKTU 2018-19]

Ans. In CSS, ID and Class are both used to select and style HTML elements, but they serve
different purposes and have distinct rules for how they are applied.

1. CSS ID Selector

 ID selectors are used to select one unique element on the page. An ID should be assigned to
only one element, making it unique.
 In CSS, the ID selector is defined using the # symbol followed by the ID name.

Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ID Example</title>
<style>
#header {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>

17
Web Technology (BCS-502) Unit-2
<h1 id="header">Welcome to My Website</h1>
<p>This is a paragraph on the page.</p>

</body>
</html>

In this example:

 The ID header is assigned to the <h1> element.


 The CSS rule #header targets this specific <h1> element and changes its text color to blue and
its font size to 24px.

2. CSS Class Selector

 Class selectors can be applied to multiple elements, meaning the same class can be assigned to
more than one element on the page.
 In CSS, the class selector is defined using a period ( .) followed by the class name.

Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Class Example</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>

<h1 class="highlight">This is a heading with a class</h1>


<p class="highlight">This paragraph also uses the highlight class.</p>
<p>This is a normal paragraph without any special styling.</p>

</body>
</html>

In this example:

 The highlight class is applied to both the <h1> and the first <p> element.
 The CSS rule .highlight makes the text red and bold for all elements with the class
highlight.

Key Differences:

18
Web Technology (BCS-502) Unit-2

1. Uniqueness:
o An ID should be unique and applied to a single element on a page.
o A Class can be reused on multiple elements.
2. Syntax:
o ID Selector: #id-name
o Class Selector: .class-name
3. Specificity:
o ID selectors have a higher specificity than class selectors. This means that styles applied
via an ID selector will override styles applied via class selectors if there are conflicts.

Combining ID and Class:

You can also combine both ID and class selectors to apply more specific styles.

Example:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ID and Class Combination</title>
<style>
#header {
color: green;
}

.highlight {
background-color: yellow;
}

/* ID + Class combination */
#header.highlight {
color: purple;
font-size: 30px;
}
</style>
</head>
<body>

<h1 id="header" class="highlight">This is a special heading</h1>


<p class="highlight">This paragraph has the highlight class.</p>

</body>
</html>

In this case:

 The #header selector will apply the color green to the <h1> element.
 The .highlight class will apply the yellow background color to both the <h1> and the
paragraph.

19
Web Technology (BCS-502) Unit-2

 The combination #header.highlight will apply a purple color and a larger font size to the
<h1> element with both the id="header" and class="highlight".

Summary:

 Use ID (#id-name) when you want to target a single unique element.


 Use Class (.class-name) when you want to apply styles to multiple elements or group
elements with similar styling.

I hope this clears up the differences and usage of ID and Class in CSS!

4o mini

6. Box Model (Introduction, Border properties, Padding Properties, Margin.[AKTU 2018-219]

Ans. The CSS Box Model is a fundamental concept in web design and layout. It defines how
elements on a webpage are rendered and how their dimensions are calculated. The box model
consists of several layers that surround the content of an element, including its padding, border,
and margin. Understanding how the box model works is essential for controlling layout, spacing,
and element alignment on the page.

1. Introduction to the Box Model

Every HTML element is represented as a box, and its layout is governed by the CSS Box Model.
The model is structured as follows:

 Content: The innermost part of the box, where text, images, or other media are
displayed.
 Padding: Space around the content inside the element's border. It creates spacing
between the content and the border.
 Border: A line that wraps around the padding (if any) and content. It can be styled with
width, color, and type (solid, dashed, etc.).
 Margin: The outermost space surrounding the border, which separates the element from
other elements.

2. Border Properties

20
Web Technology (BCS-502) Unit-2

The border is a crucial part of the box model, and it defines the edge of an element. You can
customize the border using the following properties:

 border-width: Specifies the thickness of the border.


o Example: border-width: 2px;
 border-style: Defines the style of the border. Possible values include solid, dashed,
dotted, double, none, etc.
o Example: border-style: solid;
 border-color: Sets the color of the border.
o Example: border-color: #ff0000; (red)

You can also set these properties for individual sides of the element:

 border-top, border-right, border-bottom, border-left


o Example: border-top: 3px dashed blue;

You can combine these properties using the shorthand border:

css
Copy code
/* Shorthand for setting all border properties */
border: 2px solid red;

3. Padding Properties

Padding is the space between the content and the border of an element. Padding can be used to
add space inside the element, pushing the content away from the edges.

You can control the padding on all four sides using the padding property:

 padding: Defines the space on all sides.


o Example: padding: 10px; (applies to all sides)

You can also set different values for each side of the element:

 padding-top, padding-right, padding-bottom, padding-left


o Example: padding-top: 20px; padding-left: 15px;

Using the shorthand for padding:

css
Copy code
/* Shorthand for padding */
padding: 10px 15px 20px 25px;
/* This applies: top = 10px, right = 15px, bottom = 20px, left = 25px */

4. Margin

21
Web Technology (BCS-502) Unit-2

Margin is the space outside the border, and it is used to create distance between the element and
other elements on the page. The margin does not affect the element’s background or border, and
it helps control the overall layout by pushing elements away from each other.

Similar to padding, margin can be set for all four sides:

 margin: Defines the space around the element on all sides.


o Example: margin: 20px; (applies to all sides)

You can also define margin values for each side:

 margin-top, margin-right, margin-bottom, margin-left


o Example: margin-top: 30px; margin-left: 10px;

Using the shorthand for margin:

css
Copy code
/* Shorthand for margin */
margin: 10px 15px 20px 25px;
/* This applies: top = 10px, right = 15px, bottom = 20px, left = 25px */

5. Box-Sizing Property

By default, when you set the width and height of an element, it only applies to the content area,
not including padding or border. This can sometimes lead to unexpected layouts.

To include padding and border in the total width and height, use the box-sizing property:

 box-sizing: content-box (default): Width and height only apply to the content area,
excluding padding and borders.
 box-sizing: border-box: Width and height include padding and border, making it easier
to control the total size of an element.

Example:

css
Copy code
/* Ensures the padding and border are included in the element's width/height
*/
* {
box-sizing: border-box;
}

Summary of the Box Model

 Content: The actual content of the box (text, image, etc.).


 Padding: Space between the content and the border.

22
Web Technology (BCS-502) Unit-2

 Border: The edge surrounding the padding (if present).


 Margin: Space around the outside of the border, separating the element from others.

With this understanding of the Box Model, you can more easily manage the layout of web
elements and fine-tune spacing and alignment using CSS.

7. Define CSS Advanced (Grouping, Dimension, Display, Positioning, Floating, Align, Pseudo class,
Navigation Bar, Image Sprites, Attribute sector).[AKTU 2022-23]

Ans. 1. Grouping in CSS

Grouping allows you to apply the same styles to multiple selectors, improving code efficiency
and readability.

Syntax:

css
Copy code
selector1, selector2, selector3 {
property: value;
}

Example:

css
Copy code
h1, h2, h3 {
font-family: Arial, sans-serif;
color: #333;
}

This applies the same font and color to h1, h2, and h3 elements.

2. Dimension (Width, Height, Max/Min-width, Max/Min-height)

These properties define the size of an element.

 Width & Height: Set the width and height of an element.

css
Copy code
div {
width: 300px;
height: 150px;
}

23
Web Technology (BCS-502) Unit-2

 Max-width & Max-height: Set the maximum width/height an element can have.

css
Copy code
img {
max-width: 100%;
max-height: 500px;
}

 Min-width & Min-height: Set the minimum width/height an element can have.

css
Copy code
div {
min-width: 200px;
min-height: 100px;
}

3. Display Property

The display property controls how elements are displayed in the layout.

 block: Element takes up full width, and starts on a new line.

css
Copy code
div {
display: block;
}

 inline: Element takes up only the space it needs and does not start a new line.

css
Copy code
span {
display: inline;
}

 inline-block: Element behaves like an inline element but can have width and height.

css
Copy code
button {
display: inline-block;
width: 100px;
height: 50px;
}

 none: Element will not be displayed at all.

css
Copy code

24
Web Technology (BCS-502) Unit-2
.hidden {
display: none;
}

4. Positioning (Static, Relative, Absolute, Fixed, Sticky)

The position property defines how an element is positioned within its parent or viewport.

 static: Default position; elements are positioned according to the normal document flow.

css
Copy code
div {
position: static;
}

 relative: Element is positioned relative to its normal position.

css
Copy code
div {
position: relative;
top: 20px;
left: 10px;
}

 absolute: Element is positioned relative to its nearest positioned ancestor (non-static).

css
Copy code
div {
position: absolute;
top: 20px;
left: 10px;
}

 fixed: Element is positioned relative to the viewport, so it stays fixed even when the page
scrolls.

css
Copy code
div {
position: fixed;
top: 10px;
right: 10px;
}

 sticky: Element toggles between relative and fixed positioning depending on the scroll
position.

css
Copy code

25
Web Technology (BCS-502) Unit-2
header {
position: sticky;
top: 0;
background-color: #333;
color: white;
}

5. Floating (Float, Clear)

The float property allows elements to float to the left or right, allowing text and inline elements
to wrap around them.

 float: Moves an element to the left or right.

css
Copy code
img {
float: left;
margin-right: 10px;
}

 clear: Used to stop elements from wrapping around floated elements.

css
Copy code
div {
clear: both;
}

6. Aligning Elements

Aligning elements often involves text-align, vertical-align, and Flexbox/Grid for complex
layouts.

 text-align: Aligns text or inline elements horizontally.

css
Copy code
p {
text-align: center;
}

 vertical-align: Aligns inline or inline-block elements vertically.

css
Copy code
img {
vertical-align: middle;
}

 Flexbox: A powerful layout tool for centering and aligning items.

26
Web Technology (BCS-502) Unit-2
css
Copy code
.container {
display: flex;
justify-content: center; /* Horizontally */
align-items: center; /* Vertically */
}

7. Pseudo-Classes

Pseudo-classes are used to define the special state of an element (e.g., when it’s hovered or
focused).

 : Applied when the mouse is over an element.

css
Copy code
a:hover {
color: red;
}

 : Applied when an element, like an input, gains focus.

css
Copy code
input:focus {
border-color: blue;
}

 (): Matches elements based on their position in a parent.

css
Copy code
li:nth-child(odd) {
background-color: #f0f0f0;
}

 and

: Targets the first or last child element.

css
Copy code
p:first-child {
font-weight: bold;
}

8. Navigation Bar (Nav Bar)

A navigation bar is usually created using a list of links, styled horizontally or vertically.

27
Web Technology (BCS-502) Unit-2

Example:

css
Copy code
nav {
background-color: #333;
overflow: hidden;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
float: left;
}

nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}

nav ul li a:hover {
background-color: #111;
}

9. Image Sprites

Image sprites are used to combine multiple images into a single image file to reduce HTTP
requests.

 Creating a sprite: Combine images into one file.


 CSS usage: Use background-image and background-position to display the right
portion of the sprite.

Example:

css
Copy code
.icon {
background-image: url('sprite.png');
width: 50px;
height: 50px;
}

.icon-home {
background-position: 0 0;
}

28
Web Technology (BCS-502) Unit-2

.icon-search {
background-position: -50px 0;
}

10. Attribute Selectors

Attribute selectors allow you to target elements based on their attributes.

 [attribute]: Select elements that have the specified attribute.

css
Copy code
a[href] {
color: blue;
}

 [attribute="value"]: Select elements with a specific attribute value.

css
Copy code
input[type="text"] {
border: 1px solid #ccc;
}

 [attribute~="value"]: Select elements whose attribute contains a specific word.

css
Copy code
div[class~="active"] {
background-color: yellow;
}

 [attribute^="value"]: Select elements whose attribute value starts with a given string.

css
Copy code
a[href^="https"] {
color: green;
}

 [attribute$="value"]: Select elements whose attribute value ends with a given string.

css
Copy code
img[src$=".png"] {
border: 2px solid red;
}

Summary

29
Web Technology (BCS-502) Unit-2

 Grouping helps with writing efficient CSS by applying the same rules to multiple
selectors.
 Dimensions control the size of elements.
 Display defines how elements are displayed (block, inline, etc.).
 Positioning manages the location of elements in the layout.
 Floating allows text and elements to wrap around floated content.
 Align includes various properties for aligning content like text-align and Flexbox.
 Pseudo-classes enable styling elements based on user interaction or document structure.
 Navigation bars are typically created using lists and styled with Flexbox or float.
 Image sprites combine multiple images into one to reduce loading time.
 Attribute selectors are powerful tools to style elements based on their attributes.

These concepts are key for building more complex, responsive, and maintainable layouts. Let me
know if you'd like to dive deeper into any specific topic!

4o mini

8.Define and explain CSS Color, Creating page Layout and Site Designs with example. [2017-
18]

Ans-: CSS Color

CSS (Cascading Style Sheets) color property allows you to set the color of elements on a web
page. Colors can be defined using various methods in CSS:

Ways to Define CSS Colors:

1. Named Colors: CSS supports a wide range of color names, like red, blue, green,
yellow, etc.

css
Copy code
p {
color: red;
}

2. Hexadecimal Color Codes: Colors can be defined with a 6-character hex code, where
each pair represents the red, green, and blue (RGB) components of the color.

css
Copy code

30
Web Technology (BCS-502) Unit-2
body {
background-color: #ff6347; /* Tomato color */
}

3. RGB (Red, Green, Blue): This defines colors by specifying the intensity of red, green,
and blue channels (each between 0 to 255).

css
Copy code
div {
background-color: rgb(255, 99, 71); /* Tomato color */
}

4. RGBA (Red, Green, Blue, Alpha): Similar to RGB but with an additional alpha channel
to set the transparency (opacity). The alpha value ranges from 0 (fully transparent) to 1
(fully opaque).

css
Copy code
h1 {
color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato */
}

5. HSL (Hue, Saturation, Lightness): Colors can also be defined in terms of hue (0-360
degrees), saturation (0%-100%), and lightness (0%-100%).

css
Copy code
section {
background-color: hsl(9, 100%, 64%); /* Tomato color */
}

6. HSLA (Hue, Saturation, Lightness, Alpha): Similar to HSL but with an added alpha
(transparency) value.

css
Copy code
footer {
background-color: hsla(9, 100%, 64%, 0.8);
}

Creating Page Layouts with CSS

CSS is commonly used for creating layouts for web pages. You can control the positioning of
elements, their dimensions, and how they respond to different screen sizes (using responsive
design). Some popular techniques for layout design include:

31
Web Technology (BCS-502) Unit-2

1. CSS Grid:

CSS Grid Layout allows you to create complex layouts with rows and columns. It’s a 2D system
that controls both horizontal and vertical positioning.

Example of a simple grid layout:

css
Copy code
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */
grid-gap: 20px; /* space between grid items */
}

.item {
background-color: lightblue;
padding: 20px;
border: 1px solid #ddd;
}
html
Copy code
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>

2. CSS Flexbox:

Flexbox is a 1D layout model that helps with arranging items in a row or a column, making it
easier to align and distribute space.

Example of a flexbox layout:

css
Copy code
.container {
display: flex;
justify-content: space-between; /* Distribute items evenly */
align-items: center; /* Vertically align items */
}

.item {
background-color: lightcoral;
padding: 20px;
border: 1px solid #ddd;
}
html
Copy code

32
Web Technology (BCS-502) Unit-2
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

3. Float Layout (Deprecated, but still used in legacy projects):

In older CSS layouts, you would use float to arrange elements. However, float is no longer
recommended for modern layouts, as Flexbox and Grid are more efficient.

Example of using float for layout:

css
Copy code
.container {
width: 100%;
}

.item {
float: left; /* Float the items to the left */
width: 30%;
margin-right: 2%;
background-color: lightgreen;
padding: 20px;
border: 1px solid #ddd;
}
html
Copy code
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>

Site Design Example: Simple Landing Page

Let’s create a basic landing page with a header, a main section, and a footer. We'll use CSS Grid
for the layout and a combination of CSS Colors for the design.

HTML:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

33
Web Technology (BCS-502) Unit-2
<header>
<h1>Welcome to My Site</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section class="hero">
<h2>Your Amazing Journey Starts Here</h2>
<p>Explore our site to find more about what we do.</p>
<a href="#">Get Started</a>
</section>
<section class="content">
<h2>Our Services</h2>
<div class="service-item">Service 1</div>
<div class="service-item">Service 2</div>
<div class="service-item">Service 3</div>
</section>
</main>

<footer>
<p>&copy; 2024 My Site. All rights reserved.</p>
</footer>
</body>
</html>

CSS (styles.css):
css
Copy code
/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}

a {
text-decoration: none;
color: #ffffff;
background-color: #007bff;
padding: 10px 20px;
border-radius: 5px;
}

a:hover {

34
Web Technology (BCS-502) Unit-2
background-color: #0056b3;
}

/* Layout */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}

nav ul {
list-style-type: none;
}

nav ul li {
display: inline;
margin: 0 10px;
}

main {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px;
}

.hero {
background-color: #ff6347; /* Tomato color */
padding: 30px;
text-align: center;
border-radius: 8px;
color: white;
}

.content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}

.service-item {
background-color: #4CAF50; /* Green */
padding: 20px;
text-align: center;
border-radius: 5px;
color: white;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

35
Web Technology (BCS-502) Unit-2

Explanation:

 The header section contains the title of the site and a navigation menu.
 The main section has two parts: a hero section (with a call-to-action) and a content section that
showcases services.
 CSS Grid is used for the layout of the main content, where the hero section takes full width, and
the services are arranged in three columns.
 The footer section provides copyright information.
 CSS Colors are applied for background and text colors to make the page visually appealing.

This example demonstrates how CSS can be used to control color, layout, and responsiveness of
a webpage. The combination of CSS Grid, CSS Flexbox, and different color techniques creates
a visually attractive and functional layout.

4o mini

36

You might also like