Scribd
Upload
41 views23 pages

CMA Unit-2 Solved

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling HTML and XML documents, and explaining key concepts such as selectors, properties, and values. It discusses various HTML tags, the importance of separating content from presentation, and the advantages of using CSS for web design, including consistency, performance, and responsive design. Additionally, it covers different methods for applying styles, types of selectors, and properties for text and layout control.

Uploaded by

akashkkotari
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
41 views23 pages

CMA Unit-2 Solved

The document provides an overview of CSS (Cascading Style Sheets), detailing its purpose in styling HTML and XML documents, and explaining key concepts such as selectors, properties, and values. It discusses various HTML tags, the importance of separating content from presentation, and the advantages of using CSS for web design, including consistency, performance, and responsive design. Additionally, it covers different methods for applying styles, types of selectors, and properties for text and layout control.

Uploaded by

akashkkotari
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/ 23

UNIT –II

2 Mark questions:

1.

CSS stands for Cascading Style Sheets. It is a styling language used to describe the
presentation and appearance of a document written in HTML or XML. CSS is used to define
the layout, colors, fonts, and other visual aspects of web pages. It provides a way to
separate the content of a web page from its presentation, making it easier to maintain and
update the design of a website.

2.

<div> and <span> are both HTML tags that are commonly used in conjunction with CSS for
styling purposes.

<div>: The <div> tag is a block-level element that is used to group and create divisions or
sections in an HTML document. It does not have any semantic meaning on its own but
provides a container that can be styled using CSS. It is often used to structure the layout of a
web page and apply styles to a group of elements.

<span>: The <span> tag is an inline element that is used to apply styles to a specific section
of text or a small part of an HTML document. It does not affect the document's structure
and is commonly used to apply CSS styles or add hooks for JavaScript interactions to a
specific portion of text.

3.Some tags to avoid from HTML are:

<center>: The <center> tag was used in older versions of HTML to horizontally center-align
content. However, it is deprecated in HTML5, and its functionality can be achieved using CSS
instead.

<font>: The <font> tag was used to define font-related attributes, such as size, color, and
face, directly within the HTML document. It is also deprecated in HTML5, and its
functionality should be handled using CSS styles.

<b>, <i>, <u>: These tags were used for bold, italic, and underline formatting, respectively.
However, it is considered better practice to use CSS styles (font-weight, font-style, text-
decoration) to achieve these effects.

4.The main parts of a CSS style include:

Selectors: Selectors target specific HTML elements or groups of elements to which the style
rules will be applied.

VIDYASHREE B LECTURER IN BCA@SHARADA


Properties: Properties define the visual characteristics of the selected elements, such as
color, font size, margin, padding, etc.

Values: Values are assigned to properties and determine the specific appearance or
behavior of the selected elements. They can be predefined keywords or custom values.

Declaration Block: The declaration block is enclosed in curly braces {} and contains one or
more property-value pairs. It represents a set of style rules that will be applied to the
selected elements.

5.There are three ways to use style sheets in an HTML document:

Inline Styles: Inline styles are applied directly to individual HTML elements using the style
attribute. The CSS rules are defined within the attribute's value. Example: <p style="color:
blue;">This is a blue paragraph.</p>

Internal Stylesheets: Internal stylesheets are defined within the <style> tags in the <head>
section of an HTML document. CSS rules are written between the <style> tags and apply to
the entire document. Example:

<head>

<style>

p{

color: blue;

</style>

</head>

<body>

<p>This is a blue paragraph.</p>

</body>

External Stylesheets: External stylesheets are separate CSS files that are linked to the HTML
document using the <link> tag. The CSS rules are defined within the external stylesheet file
and can be applied to multiple HTML pages. Example:

<head>

<link rel="stylesheet" href="styles.css">

VIDYASHREE B LECTURER IN BCA@SHARADA


</head>

<body>

<p>This is a paragraph with styles applied from the external stylesheet.</p>

</body>

6.

The <link> tag in HTML is used to link an external resource, such as a CSS file, to the HTML
document. It is primarily used to connect external style sheets to HTML. The <link> tag has
the following attributes:

rel: Specifies the relationship between the HTML document and the linked resource. For CSS
stylesheets, the rel attribute should be set to "stylesheet".

href: Specifies the path or URL to the external resource, such as the CSS file.

type: Specifies the MIME type of the linked resource. For CSS stylesheets, the type attribute
should be set to "text/css".

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

7.Inline styles are CSS styles that are directly applied to individual HTML elements using the
style attribute. The style attribute is used to define one or more CSS property-value
pairsinline with the HTML element. Here's an example:

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

In this example, the style attribute is added to the <p> element, and the CSS styles are
defined within the attribute's value. The color property is set to "blue" and the font-size
property is set to "16px".

8.Different types of selectors in CSS include:

Element Selector: Selects elements based on their HTML tag name. Example: p { color: blue;
} targets all <p> elements.

Class Selector: Selects elements based on the value of their class attribute. Example:
.highlight { background-color: yellow; } targets elements with class="highlight".

ID Selector: Selects a single element based on its id attribute. Example: #header { font-size:
24px; } targets the element with id="header".

VIDYASHREE B LECTURER IN BCA@SHARADA


Attribute Selector: Selects elements based on their attribute values. Example:
input[type="text"] { border: 1px solid black; } targets <input> elements with type="text".

Pseudo-class Selector: Selects elements based on a specific state or condition. Example:


a:hover { color: red; } targets <a> elements when hovered over.

9.The universal selector (*) in CSS selects all elements in an HTML document. It can be used
to apply styles globally or as a wildcard when combined with other selectors. Its use
includes:

Applying a common style to all elements: * { margin: 0; padding: 0; } sets the margin and
padding of all elements to zero.

Resetting default styles: * { font-family: Arial, sans-serif; } applies the Arial font to all
elements.

10.The :not selector in CSS is used to select elements that do not match a specific selector. It
allows excluding elements from a selection. Example: p:not(.highlight) { color: red; } selects
all <p> elements except those with the class "highlight" and applies a red color to them.

11.To use web fonts in CSS, two CSS commands are required:

@font-face: This CSS rule is used to specify a custom font and its source. It allows the
browser to download and use the font for rendering text. Example:

@font-face {

font-family: 'CustomFont';

src: url('font.woff2') format('woff2'),

url('font.woff') format('woff');

font-family: This CSS property is used to specify the font-family for an element. Example:
body { font-family: 'CustomFont', Arial, sans-serif; } sets the font-family of the <body>
element to 'CustomFont', and if it's not available, it falls back to Arial and sans-serif.

12.To make a font bold, the font-weight property can be used and set to bold. Example:
font-weight: bold;

To make a font italic, the font-style property can be used and set to italic. Example: font-
style: italic;

13.There are different ways to specify colors in CSS:

VIDYASHREE B LECTURER IN BCA@SHARADA


Keywords: CSS provides predefined color keywords such as red, blue, green, etc. Example:
color: red;

Hexadecimal: Colors can be represented using a six-digit hexadecimal value. Example: color:
#FF0000;

RGB: Colors can be defined using the RGB color model. Example: color: rgb(255, 0, 0);

RGBA: RGBA allows specifying an additional alpha value for transparency. Example: color:
rgba(255, 0, 0, 0.5);

HSL: Colors can be defined using the HSL color model, specifying the hue, saturation, and
lightness. Example: color: hsl(0, 100%, 50%);

HSLA: HSLA allows specifying an additional alpha value for transparency. Example: color:
hsla(0, 100%, 50%, 0.5);

14.To capitalize text in CSS, the text-transform property can be used with the value
capitalize. Example: text-transform: capitalize; This transforms the first character of each
word to uppercase and the rest to lowercase.

16.The text-decoration property in CSS is used to add visual effects to text. It can be used to
underline, overline, strike through, or style text with a line. Example: text-decoration:
underline; This underlines the text.

17.The text-shadow property in CSS is used to add shadow effects to text. The values of the
text-shadow property specify the color, horizontal offset, vertical offset, and optional blur
radius of the shadow. Example: text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); This adds a black
shadow with a 2-pixel horizontal offset, 2-pixel vertical offset, and 4-pixel blur radius.

18.CSS provides several properties for aligning text:

text-align: Specifies the horizontal alignment of text within its container. Example: text-
align: center; centers the text.

vertical-align: Specifies the vertical alignment of inline elements within a line. Example:
vertical-align: middle; vertically aligns the inline elements to the middle.

line-height: Specifies the height of a line of text. Example: line-height: 1.5; sets the line
height to 1.5 times the font size.

19.Margin and padding can be specified using shorthand notation:

Margin shorthand: margin property allows specifying margin values for all four sides in one
declaration. Example: margin: 10px 20px 10px 20px; sets the top margin to 10px, right
margin to 20px, bottom margin to 10px, and left margin to 20px.

VIDYASHREE B LECTURER IN BCA@SHARADA


Padding shorthand: padding property allows specifying padding values for all four sides in
one declaration. Example: padding: 10px 20px 10px 20px; sets the top padding to 10px,
right padding to 20px, bottom padding to 10px, and left padding to 20px.

20.Inline boxes and block boxes are two types of boxes in CSS:

Inline Boxes: Inline boxes are used to contain inline-level elements, such as text or inline
elements like <span>. They do not create line breaks and are stacked horizontally. Their
dimensions are determined by the content inside them.

Block Boxes: Block boxes are used to contain block-level elements, such as <div> or <p>.
They create line breaks and occupy the entire width available by default. Their dimensions
can be controlled using CSS properties like width and height.

21.The border property in CSS can be specified using shorthand notation:

border: Sets the width, style, and color of all four borders in one declaration. Example:
border: 1px solid black; sets a 1px solid black border on all sides.

Background color can be provided in CSS using the background-color property. Example:
background-color: red; sets the background color to red.

22.The box-shadow property in CSS is used to add a shadow effect to an element's box. It
specifies the color, horizontal offset, vertical offset, blur radius, and spread radius of the
shadow. Example: box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); This adds a black shadow with
a 2-pixel horizontal offset, 2-pixel vertical offset, 4-pixel blur radius, and default spread
radius.

23.The float property in CSS is used to specify whether an element should float to the left or
right of its container. It is often used for creating layouts with multiple columns or to wrap
text around images. The options for the float property are:

left: The element floats to the left side.

right: The element floats to the right side.

none: The element does not float and appears in the normal flow of the document.

inherit: The element inherits the float behavior from its parent.

Example: float: left; makes the element float to the left side.

24.Animation in CSS allows elements to gradually change their style over time. The start and
end states define the initial and final appearance of the animated element.

Start State: The start state defines the initial appearance of the element before the
animation starts. It includes the styles that will be animated.

VIDYASHREE B LECTURER IN BCA@SHARADA


End State: The end state defines the final appearance of the element after the animation
completes. It includes the styles that the element will have at the end of the animation.

25.

Keyframes in CSS are used to define the intermediate states of an animation. They specify
the style properties and their values at specific points in time during the animation.
Keyframes are defined using the @keyframes rule and can be assigned a name. The
animation properties refer to these keyframes to create a smooth transition between the
specified states.

26.The animation-direction property in CSS specifies whether an animation should play in


reverse or alternate directions. It has the following values:

normal: The animation plays in the default forward direction.

reverse: The animation plays in the reverse direction.

alternate: The animation plays forward, then reverses, creating an alternating effect.

alternate-reverse: The animation plays in reverse, then forwards, creating an alternating


effect.

27.The shorthand syntax of the animation property in CSS is as follows:

animation: name duration timing-function delay iteration-count direction;

name: Specifies the name of the keyframes rule to be applied.

duration: Specifies the time it takes to complete one cycle of the animation.

timing-function: Specifies the acceleration curve for the animation.

delay: Specifies the delay before the animation starts.

iteration-count: Specifies the number of times the animation should repeat.

direction: Specifies the direction of the animation.

Example: animation: myAnimation 2s ease-in-out 1s infinite alternate;

28.

CSS transitions define the properties that will change smoothly over a specified duration
when a state change occurs. The properties defined by CSS transitions include:

VIDYASHREE B LECTURER IN BCA@SHARADA


transition-property: Specifies the CSS properties to which the transition effect should be
applied.

transition-duration: Specifies the duration of the transition effect.

transition-timing-function: Specifies the acceleration curve for the transition.

transition-delay: Specifies the delay before the transition effect starts.

28.The values for the transition-timing-function property in CSS define the acceleration
curve for the transition. Some common values include:

ease: The transition starts slowly, accelerates in the middle, and slows down at the end
(default).

linear: The transition progresses linearly at a constant speed.

ease-in: The transition starts slowly and accelerates.

ease-out: The transition slows down and ends gradually.

ease-in-out: The transition starts slowly, accelerates, and then slows down.

4/6 Mark Questions:

1. Advantages of CSS:

Separation of Presentation and Content: CSS allows separating the presentation of a web
page from its content. This separation makes it easier to maintain and update the styling of
a website without modifying the HTML structure.

Consistency: CSS enables consistent styling across multiple web pages by applying the same
stylesheets to all pages. Changes made in one place can be automatically reflected on all
pages.

Improved Page Loading and Performance: CSS files can be cached by the browser, reducing
the amount of data that needs to be downloaded for subsequent page visits. This improves
page loading speed and overall performance.

Flexibility and Control: CSS provides precise control over the layout, positioning, and styling
of HTML elements. It offers a wide range of selectors and properties to target specific
elements and apply custom styles.

Responsive Design: CSS facilitates creating responsive web designs that adapt to different
screen sizes and devices. Media queries can be used to apply different styles based on the
viewport size, enabling a consistent user experience across devices.

VIDYASHREE B LECTURER IN BCA@SHARADA


Accessibility: CSS allows developers to improve the accessibility of web content by
separating the structure from the visual presentation. This makes it easier to apply
appropriate accessibility features and ensure compliance with accessibility standards.

2.Style elements of CSS refer to the properties and values that define the visual appearance
and layout of HTML elements. Some common style elements in CSS include:

color: Sets the color of the text.

background-color: Sets the background color of an element.

font-family: Specifies the font family or typeface to be used for text.

font-size: Sets the size of the font.

font-weight: Specifies the thickness or boldness of the font.

text-align: Aligns the text horizontally within its container.

text-decoration: Adds decorations to the text, such as underline or strikethrough.

padding: Sets the space between the content and the border of an element.

margin: Sets the space outside the border of an element.

border: Defines the style, width, and color of the border around an element.

display: Specifies how an element is displayed (e.g., block, inline, or none).

position: Controls the positioning of an element on the page (e.g., relative, absolute, or
fixed).

These are just a few examples of the style elements in CSS. CSS offers a wide range of
properties and values to control various aspects of the visual presentation and layout of
web pages.

3.Different ways to link style sheets in HTML5:

External Style Sheet: Linking an external CSS file using the <link> element in the HTML
<head> section. Example: <link rel="stylesheet" href="styles.css">

Internal Style Sheet: Including the CSS code directly within the HTML file using the <style>
element in the HTML <head> section. Example: <style> /* CSS code here */ </style>

Inline Styles: Applying styles directly to individual HTML elements using the style attribute.
Example: <p style="color: blue;">This is a blue paragraph.</p>

VIDYASHREE B LECTURER IN BCA@SHARADA


4. Steps for creating an internal style sheet:

Open an HTML file in a text editor or an HTML editor.

Locate the <head> section of the HTML file.

Within the <head> section, add the <style> element to define the internal style sheet.

Inside the <style> element, write the CSS code to specify the desired styles.

Save the HTML file.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Internal Style Sheet</title>

<style>

body {

background-color: lightblue;

font-family: Arial, sans-serif;

h1 {

color: red;

text-align: center;

</style>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is some sample text.</p>

</body>

VIDYASHREE B LECTURER IN BCA@SHARADA


</html>

In the above example, the <style> element is used to define an internal style sheet within
the <head> section of the HTML document. The CSS code inside the <style> element applies
specific styles to the <body> and <h1> elements.

5.Steps for creating an external style sheet:

Create a new CSS file with a .css extension. For example, styles.css.

Open the CSS file in a text editor or a CSS editor.

Write the desired CSS rules and styles in the CSS file.

Save the CSS file.

In the HTML file, link the external style sheet using the <link> element in the <head> section.
Use the rel attribute with the value "stylesheet" and the href attribute with the value
pointing to the CSS file.

Example:

styles.css:

body {

background-color: lightblue;

font-family: Arial, sans-serif;

h1 {

color: red;

text-align: center;

index.html:

<!DOCTYPE html>

<html>

VIDYASHREE B LECTURER IN BCA@SHARADA


<head>

<title>External Style Sheet</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is some sample text.</p>

</body>

</html>

In the above example, the CSS styles are written in an external CSS file named styles.css. The
HTML file (index.html) includes the external style sheet by linking it using the <link> element
in the <head> section. The href attribute specifies the path to the CSS file.

This approach allows for the separation of the CSS code from the HTML file, making it easier
to maintain and update the styles independently.

The <link> tag in HTML is used to link an external resource, such as a style sheet, to an HTML
document. It is commonly used to link CSS files. The <link> tag has the following attributes:

rel: Specifies the relationship between the current document and the linked resource. In the
case of a style sheet, the value should be set to "stylesheet".

href: Specifies the URL or path to the external resource (e.g., the CSS file).

type: Specifies the MIME type of the linked resource. For CSS, the value should be set to
"text/css".

media: Specifies the media type or media query for which the linked resource should be
applied. It allows for conditional styling based on the device or screen size. Common values
include "all" (default), "screen", "print", "handheld", etc.

Example:

<!DOCTYPE html>

<html>

VIDYASHREE B LECTURER IN BCA@SHARADA


<head>

<title>Linking CSS File</title>

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

</head>

<body>

<h1>Welcome to My Website</h1>

<p>This is some sample text.</p>

</body>

</html>

In the above example, the <link> element is used to link an external CSS file named
styles.css. The href attribute specifies the path to the CSS file, and the type attribute
indicates that it is a CSS file. The media attribute is set to "screen", indicating that the styles
should be applied when viewing the web page on a screen.

Inline style refers to applying CSS styles directly within an HTML element using the style
attribute. It allows you to define specific styles for individual elements without the need for
a separate CSS file. Here's an example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Inline Style Example</title>

</head>

<body>

<h1 style="color: blue; font-family: Arial, sans-serif;">Welcome to My Website</h1>

<p style="color: red;">This is some sample text.</p>

</body>

</html>

VIDYASHREE B LECTURER IN BCA@SHARADA


In the above example, the style attribute is used within the <h1> and <p> elements to apply
inline styles. The styles defined within the style attribute override any external or internal
styles.

Different types of selectors in CSS:

Element Selector: Selects elements based on their tag name. For example, h1 selects all
<h1> elements.

Class Selector: Selects elements based on their class attribute. It is denoted by a dot (.)
followed by the class name. For example, .highlight selects all elements with
class="highlight".

ID Selector: Selects elements based on their ID attribute. It is denoted by a hash (#) followed
by the ID name. For example, #logo selects the element with id="logo".

Attribute Selector: Selects elements based on their attribute values. It can be used to select
elements with specific attributes or attribute values. For example, [type="submit"] selects
all elements with type="submit".

Pseudo-class Selector: Selects elements based on their state or position in the document.
Pseudo-classes are denoted by a colon (:) followed by the pseudo-class name. For example,
:hover selects an element when it is being hovered over.

The universal selector (*) in CSS selects all elements in the document. It is useful when you
want to apply a style to every element on the page. It is denoted by an asterisk (*). For
example, * { margin: 0; padding: 0; } sets the margin and padding of all elements to zero.

The universal selector can be useful for resetting or normalizing styles across different
browsers and elements.

The :not selector in CSS is used to select elements that do not match a specific selector. It is
denoted by :not(selector). For example, p:not(.special) selects all <p> elements that do not
have the class "special".

The :not selector allows you to apply styles to elements that meet certain criteria while
excluding others. It can be useful for targeting specific elements and applying different
styles to them.

12.Two CSS commands required to use web fonts are @font-face and font-family:

VIDYASHREE B LECTURER IN BCA@SHARADA


@font-face: This CSS at-rule is used to define custom fonts that can be used in a web page.
It specifies the font file's location and assigns a name to the font face.

Example:

@font-face {

font-family: MyCustomFont;

src: url('path/to/font.woff2') format('woff2'),

url('path/to/font.woff') format('woff');

font-family: This CSS property is used to specify the font family or font stack to be used for
an element. The value should match the name given in the @font-face rule.

Example:

h1 {

font-family: MyCustomFont, Arial, sans-serif;

In the above example, @font-face defines a custom font named "MyCustomFont" and
specifies the font file paths. The font-family property is then used to apply the custom font
to the <h1> element, falling back to Arial and sans-serif if the custom font is not available.

To use the @font-face directive in CSS, follow these steps:

Define the @font-face rule with the font-family and src properties.

Specify the font file's location using the src property. Multiple formats can be provided for
better browser compatibility.

Assign a name to the font face using the font-family property.

Use the defined font family name in the font-family property of any element to apply the
custom font.

Example:

@font-face {

font-family: MyCustomFont;

VIDYASHREE B LECTURER IN BCA@SHARADA


src: url('path/to/font.woff2') format('woff2'),

url('path/to/font.woff') format('woff');

h1 {

font-family: MyCustomFont, Arial, sans-serif;

In the above example, the @font-face rule defines a custom font named "MyCustomFont"
and specifies the font file paths. The h1 element then uses the font-family property to apply
the custom font, falling back to Arial and sans-serif if the custom font is not available.

The @font-face directive allows you to use custom fonts in your web pages, expanding the
range of available typography options.

13.Filters are used in searching Google Web Fonts to refine and narrow down the results
based on specific criteria. Here are some commonly used filters in Google Web Fonts:

Category: Allows you to filter fonts based on their category, such as serif, sans-serif, display,
handwriting, etc.

Language: Filters fonts based on the supported language(s). You can select one or multiple
languages to find fonts that support specific language characters.

Thickness: Lets you filter fonts based on their thickness or stroke width, ranging from thin to
ultra-bold.

Slant: Allows you to filter fonts based on their slant or italic style, ranging from normal to
italic.

Width: Filters fonts based on their width, ranging from condensed to expanded.

Script: Lets you filter fonts based on their script type, such as Latin, Cyrillic, Greek, etc.

Sort: Allows you to sort the search results based on popularity, date added, trending, or
alphabetical order.

By using these filters, you can narrow down your search and find the most suitable fonts for
your design needs, based on specific categories, languages, styles, and more.

VIDYASHREE B LECTURER IN BCA@SHARADA


14.There are different ways to set the color property value in CSS:

Color Name: You can use predefined color names to specify the color, such as "red", "blue",
"green", etc. For example: color: red;

Hexadecimal Notation: Hexadecimal values represent colors using a combination of six


characters, consisting of numbers (0-9) and letters (A-F). Each pair of characters represents
the intensity of red, green, and blue (RGB) color channels. For example: color: #FF0000;
(represents red color).

RGB Notation: RGB values allow you to define the intensity of red, green, and blue color
channels using decimal numbers (0-255). For example: color: rgb(255, 0, 0); (represents red
color).

RGBA Notation: RGBA values are similar to RGB values, but with an additional alpha channel
that specifies the opacity (transparency) of the color. The alpha value ranges from 0 (fully
transparent) to 1 (fully opaque). For example: color: rgba(255, 0, 0, 0.5); (represents semi-
transparent red color).

HSL Notation: HSL (Hue, Saturation, Lightness) values allow you to define the color based on
its hue, saturation, and lightness. The hue value ranges from 0 to 360, saturation and
lightness values range from 0% to 100%. For example: color: hsl(0, 100%, 50%); (represents
red color).

HSLA Notation: HSLA values are similar to HSL values, but with an additional alpha channel
for transparency. For example: color: hsla(0, 100%, 50%, 0.5); (represents semi-transparent
red color).

These different ways of setting the color property give you flexibility in defining colors for
your elements in CSS.

15.The font-size property in CSS is used to specify the size of the font for an element. There
are different ways to set the font-size property value:

Absolute Sizes: You can set the font size using absolute units like pixels (px), points (pt),
inches (in), centimeters (cm), etc. For example: font-size: 16px;

Relative Sizes: Relative sizes are specified using relative units that are relative to the parent
element or the default browser font size. Common relative units include percentages (%),
em, and rem. For example: font-size: 120%;

VIDYASHREE B LECTURER IN BCA@SHARADA


Keyword Values: CSS also provides keyword values for font-size, such as small, medium,
large, x-small, x-large, etc. These keyword values have predefined sizes associated with
them. For example: font-size: large;

Viewport Units: Viewport units (vw, vh, vmin, vmax) allow you to set font sizes relative to
the size of the viewport. For example: font-size: 5vw; (represents 5% of the viewport width).

16.The styling of lists using CSS allows you to customize the appearance of HTML lists, such
as unordered lists (<ul>) and ordered lists (<ol>). Here are some common CSS properties
used to style lists:

list-style-type: This property specifies the type of marker or numbering style for the list
items. It can take values like disc, circle, square for unordered lists, and decimal, lower-
roman, upper-alpha for ordered lists.

list-style-image: This property allows you to use a custom image as the marker for list items.
You can specify the URL of the image to be used as the marker.

list-style-position: This property controls the position of the marker relative to the list item's
content. It can be set to inside (marker inside the content area) or outside (marker outside
the content area).

list-style: This is a shorthand property that combines the list-style-type, list-style-image, and
list-style-position properties into a single declaration.

By using these properties, you can customize the marker style, position, and appearance of
lists to match your design preferences.

17.The properties that make up the box model in CSS define the spacing and dimensions of
an element. The main properties that make up the box model are:

Content: The actual content of the element, such as text, images, or other elements.

Padding: The space between the content and the element's border. It can be set using the
padding property and can have different values for each side (top, right, bottom, left).

Border: The border around the element's content and padding. It can be set using the
border property and can have properties like border-width, border-style, and border-color.

VIDYASHREE B LECTURER IN BCA@SHARADA


Margin: The space outside the element's border, creating the gap between neighboring
elements. It can be set using the margin property and can have different values for each
side (top, right, bottom, left).

These properties work together to define the size and spacing of an element within the
layout of a web page.

18.When formatting individual borders in CSS, you can use the border property along with
specific properties to control each side of the border. Here's an example:

/* Formatting the left border */

border-left-width: 2px;

border-left-style: dashed;

border-left-color: red;

In this example, we are formatting the left border of an element with a width of 2 pixels, a
dashed style, and a red color. Similarly, you can use border-top, border-right, and border-
bottom properties to format the other sides of the border.

19.There are multiple ways to create rounded corners in CSS. Here are two common
methods:

Using the border-radius property: This property allows you to round the corners of an
element by specifying the radius of the curve. For example:

/* Rounded corners with equal radius */

border-radius: 10px;

/* Rounded corners with different horizontal and vertical radii */

border-radius: 10px 20px;

In the first example, all corners of the element will have a rounded radius of 10 pixels. In the
second example, the top-left and bottom-right corners will have a radius of 10 pixels, while
the top-right and bottom-left corners will have a radius of 20 pixels.

VIDYASHREE B LECTURER IN BCA@SHARADA


Using individual border-*-radius properties: This method allows you to set different border
radii for each corner of the element. For example:

/* Rounded corners with individual radii */

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-right-radius: 30px;

border-bottom-left-radius: 40px;

In this example, each corner of the element will have a different radius, allowing you to
create custom rounded corner shapes.

20.The box-sizing property in CSS3 controls how the total width and height of an element is
calculated, including the content, padding, and border. It has the following options:

content-box: This is the default value and calculates the width and height of an element
excluding padding and border. The total width of the element is content width + padding +
border.

border-box: With this value, the width and height of an element includes padding and
border. The total width of the element is content width, and the padding and border are
included within it.

By using the box-sizing property, you can control the sizing behavior of elements and easily
manage the space taken by content, padding, and border.

21.The overflow property in CSS3 controls how content that overflows the boundaries of an
element is displayed. It has the following options:

visible: This is the default value, where the content is not clipped and may extend beyond
the boundaries of the element.

hidden: With this value, the overflowing content is hidden and not visible outside the
element's boundaries.

scroll: This value adds a scrollbar to the element, allowing the user to scroll and view the
overflowing content.

VIDYASHREE B LECTURER IN BCA@SHARADA


auto: This value automatically adds a scrollbar to the element if necessary, based on the
content overflow.

By using the overflow property, you can control how overflowing content is handled within
an element.

22.The clear property in CSS3 is used to control the behavior of floated elements. It has the
following options:

none: This is the default value, where elements are allowed to float on both the left and
right sides.

left: With this value, the element will not allow floating elements on the left side.

right: With this value, the element will not allow floating elements on the right side.

both: This value clears floats on both the left and right sides.

By using the clear property, you can control the positioning and clearing of floated elements
within the layout.

23.CSS animation allows you to animate elements and create interactive and dynamic
effects. Here's a brief explanation of CSS animation with an example:

CSS animation involves defining keyframes that specify the intermediate steps of an
animation and then applying those keyframes to an element. For example, let's create a
simple animation that moves a <div> element from left to right:

@keyframes slide-in {

from {

transform: translateX(-100%);

to {

transform: translateX(0);

VIDYASHREE B LECTURER IN BCA@SHARADA


/* Applying the animation to the element */

.my-element {

animation: slide-in 2s ease-in-out;

In this example, we define a keyframe animation called slide-in that specifies the initial
position of the element (from) and the final position (to). We then apply the animation to
the .my-element class, specifying a duration of 2 seconds and an ease-in-out timing
function.

When the animation is triggered, the element will smoothly move from left to right over the
specified duration.

25.CSS provides several properties related to animation. Here are some of the important
animation properties:

animation-name: Specifies the name of the keyframe animation to be applied to the


element.

animation-duration: Sets the duration of the animation, specifying how long it takes to
complete one cycle.

animation-timing-function: Defines the timing function that determines the acceleration


and deceleration of the animation.

animation-delay: Specifies a delay before the animation starts.

animation-iteration-count: Sets the number of times the animation should repeat.

animation-direction: Determines whether the animation plays in the normal direction, in


reverse, or alternating between the two.

animation-fill-mode: Controls how the element's styles are applied before and after the
animation.

26.The animation-fill-mode property in CSS specifies how the styles of an element are
applied before and after the animation. It has the following possible values:

none: This is the default value, where the styles are not affected by the animation.

VIDYASHREE B LECTURER IN BCA@SHARADA


forwards: With this value, the element retains the computed values set by the last keyframe
of the animation.

backwards: This value applies the styles defined in the first keyframe of the animation to the
element before the animation starts.

both: This value combines the effects of both forwards and backwards, retaining the styles
from the last keyframe before the animation and applying the styles from the first keyframe
before the animation starts.

By using different values for animation-fill-mode, you can control how the element's styles
are affected before and after the animation.

***************************************************************************

VIDYASHREE B LECTURER IN BCA@SHARADA

You might also like