Scribd
Upload
12 views33 pages

CMA Unit2 Solved

The document provides an overview of CSS, its uses, and various properties related to styling HTML elements. It explains the functionality of tags like <div> and <span>, the importance of semantic HTML, and the different methods to apply styles through inline, internal, and external stylesheets. Additionally, it covers CSS selectors, text formatting, background colors, box shadows, animations, and keyframes, emphasizing best practices in web design.

Uploaded by

pujarinidhi3
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
12 views33 pages

CMA Unit2 Solved

The document provides an overview of CSS, its uses, and various properties related to styling HTML elements. It explains the functionality of tags like <div> and <span>, the importance of semantic HTML, and the different methods to apply styles through inline, internal, and external stylesheets. Additionally, it covers CSS selectors, text formatting, background colors, box shadows, animations, and keyframes, emphasizing best practices in web design.

Uploaded by

pujarinidhi3
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/ 33

2m:

1. Expand CSS. What is the use of CSS?

o CSS stands for Cascading Style Sheet.

o CSS is used to design HTML tags.

o CSS is a widely used language on the web.

o HTML, CSS and JavaScript are used for web designing. It helps the web designers to apply
style on HTML tags. CSS saves a lot of work. It can control the layout of multiple web pages
all at once.External stylesheets are stored in CSS files

2. What are the uses of <div> and <span> tags when used with CSS.

<div> is a block-level element, which means that it starts a new line on the page and takes up the full
width of its container.

<span> is an inline element, which means that it does not start a new line and only takes up as much
space as its content

When used with CSS, <div> tags can be used to control the layout of a web page by creating
sections, columns, and other containers. For example, you could use a <div> tag to create a sidebar
on your website, or to group related content together in a single column.

<span> tags can be used to style specific parts of text or other elements on a web page. For
example, you could use a <span> tag to make a certain word or phrase bold, or to change its color.

3. List some of the tags to avoid from HTML with reason.

<b> and <i> - These tags are used to bold and italicize text, respectively. However, they are not
semantically correct, meaning that they do not provide any information about the meaning of the
text. Instead, you should use the <strong> and <em> tags, which are semantically correct and provide
more information about the text, such as whether it is important or emphasized.

<font> tag:The <font> tag is used to specify the font face, size, and color of text within HTML
documents. However, it is considered outdated and not recommended for use. It is better to apply
styles using CSS, which provides more flexibility and separation of concerns between content and
presentation.

<marquee> tag:The <marquee> tag was used to create scrolling text or images. However, it is not
part of the official HTML specification and is not recommended for use. Animated or scrolling effects
are better achieved using CSS animations or JavaScript.

<frame>, <frameset>, and <noframes> tags:These tags were used in the past to create frames and
frame-based layouts. However, frames are now deprecated and are not recommended for use due to
accessibility issues, poor search engine optimization, and difficulty in maintaining and navigating
websites.

4. With a neat diagram specify the main parts of a CSS style.


+------------------------+

| CSS Selector |

+------------------------+

| Style |

+------------------------+

| Property-Value |

| Declarations |

| (CSS Properties) |

+------------------------+
5. What are the ways we can use style sheets in an HTML document? Mention the tags used to
work with them.

Style Sheet Type Location Tags

Inline style Within the HTML element that it is styling style attribute

Internal style Within the <style> element in the <head> section <style> element

External style In a separate CSS file <link> element

6. What is the use of <link> tage? Mention its attributes with their purpose.

The <link> tag is used to link an HTML document to an external resource, such as a style sheet, a
favicon, or a script. The <link> tag is typically placed in the <head> section of an HTML document.

Here is the syntax of the <link> tag:

<link href="url" rel="relationship">

Eg: <link href="style.css" rel="stylesheet">

 href attribute: Specifies the URL of the external resource.

 rel attribute: Specifies the relationship between the current document and the external
resource.

7. What is inline style? Give a code example

Refer 4m 3nd question


8. List the different types of selectors in CSS.

CSS element Selector

Id selector

Class selector

Universal selector

Grouping selector

Pseudo selector

9. What is universal selector? What is its use?

The universal selector (*) selects all HTML elements on the page. The universal selector is used as a
wildcard character. The universal selector in CSS is represented by an asterisk (*)

The universal selector can be used to set styles for all elements on a web page, or to combine with
other selectors to create more specific selectors. For example, the following CSS selector would
select all h1 elements and set their color to red:

Eg: h1 * {

color: red;}

10. Write a note on the :not selector.

The :not() selector is a CSS pseudo-class that selects all elements that do not match a specified
selector. It is often used to negate the selection of a particular selector. For example, the following
CSS selector would select all elements that are not h1 elements:

:not(h1) {

color: red;}

The :not() selector can also be used to select elements that do not have a particular attribute

11. Write a note on the two CSS commands required to use web fonts.
@font-face: This command defines a new font face. It takes a number of arguments, including the
font family name, the font file location, and the font weight and style.

font-family: This command specifies the font family for an HTML element. It can be used to specify a
single font family or a list of font families.

Eg: @font-face {

font-family: 'CustomFont';

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

body {

font-family: 'CustomFont', sans-serif;

}
12. Specify the properties required to make a font bold and italic.

font-weight:

 The font-weight property is used to control the thickness or boldness of the text.

 The value bold is used to make the font appear bold.

 Example: h1 { font-weight: bold; }

font-style:

 The font-style property is used to specify the style of the font, such as italic or
normal.

 The value italic is used to make the font appear italicized.

 Example: h1{font-style: italic; }

13. How to specify the color to font? Mention different ways.


To specify the color of text in CSS, you can use various methods. Here are different ways to set the
color of a font:

1. Keyword:

 CSS provides a set of predefined color keywords that can be used to specify the color
of text.

 Example: color: red; sets the text color to red.

2. Hexadecimal Notation:

 Colors can be defined using a six-digit hexadecimal code.

 The code represents the levels of red, green, and blue (RGB) in the color.

 Example: color: #00ff00; sets the text color to green.

3. RGB and RGBA Notation:

 Colors can be specified using the RGB color model by specifying the intensity of red,
green, and blue.

 RGB values range from 0 to 255, representing the intensity of each color channel.

 Example: color: rgb(255, 0, 0); sets the text color to red.

4. HSL and HSLA Notation:

 Colors can also be defined using the HSL (Hue, Saturation, Lightness) color model.

 Hue represents the color itself, saturation represents the intensity of the color, and
lightness represents how light or dark the color appears.

 Example: color: hsl(120, 100%, 50%); sets the text color to a fully saturated green.

14. Write a note on how to capitalize the text in CSS

The text-transform property controls the capitalization of text.


Setting its value to capitalize will capitalize the first character of each word.

Capitalize: Transforms the first character of each word to uppercase

Syntax: text-transform:capitalize;

Example: p{text-transform: capitalize;}


15. Write a note on text-decoration property.
The text-decoration property in CSS is used to add visual effects to text. It allows you to style and
modify the appearance of text decorations such as underlines, overlines, line-throughs, and more.

The text-decoration-line property specifies the type of line to be added to the text. The possible
values for the text-decoration-line property are:

 none: No line is added.

 underline: A line is added below the text.

 overline: A line is added above the text.

 line-through: A line is added through the text.

 blink: The text blinks

 eg: h1 {text-decoration: overline;}

16. Write the purpose of each values of text-shadow property.

The text-shadow property in CSS is used to add shadows to text. It takes a comma-separated list of
shadows to be applied to the text. Each shadow is described by some combination of X and Y offsets
from the element, blur radius, and color.

h-shadow Required. The position of the horizontal shadow. Negative values are allowed Demo ❯

v-shadow Required. The position of the vertical shadow. Negative values are allowed Demo ❯

blur-radius Optional. The blur radius. Default value is 0 Demo ❯

color Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values

Eg: h1 { text-shadow: 2px 2px 8px red;}

17. Write a note on aligning text using CSS.

The text-align property specifies the horizontal alignment of text in an element.

left Aligns the text to the left


right Aligns the text to the right

center Centers the text

justify Stretches the lines so that each line has equal width (like in newspapers and magazines)

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element.

Eg: h1 {
text-align: center;
}
18. Write a note on margin and padding shorthand

An element's padding is the space between its content and its border.(padding)

The padding property is a shorthand property for:

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

 eg: padding:10px 5px 15px 20px;


o top padding is 10px
o right padding is 5px
o bottom padding is 15px
o left padding is 20px

The margin property sets the margins for an element, and is a shorthand
property for the following properties:

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

If the margin property has four values:

 margin: 10px 5px 15px 20px;


o top margin is 10px
o right margin is 5px
o bottom margin is 15px
o left margin is 20px
19. Differentiate inline and block boxes

Property Inline box Block box

Display inline block

Line
Inline boxes do not break lines. Block boxes break lines.
break

Width Inline boxes do not have a fixed width. Block boxes have a fixed width.

Inline boxes are not affected by Block boxes are affected by


Margin
the margin property. the margin property.

Inline boxes are not affected by Block boxes are affected by


Padding
the padding property. the padding property.

20. Write a note on border property shorthand.

The CSS border is a shorthand property used to set the border on an


element.The CSS border properties are use to specify the style, color and size of the
border of an element. The CSS border properties are given below

o border-style
o border-color
o border-width: Specifies the width of the border, border-width: 1px;
o eg: h2 { border: 4px dotted blue;}

21. Write a note on providing background color in CSS with appropriate property.

In CSS, the background-color property is used to set the background color of an element. The
background color is the color that appears behind the element's content and border.

The background-color property can be set to a color name, a hexadecimal color code, or an RGB
color code.

Syntax: selector {

background-color: color;

}
1.Named Colors:

 You can use named colors such as red, blue, green, or yellow to set the background
color.

 Example: background-color: red;

2. Hexadecimal Colors:

 Hexadecimal color codes are specified using a pound sign (#) followed by six
alphanumeric characters representing the red, green, and blue (RGB) values.

 Example: background-color: #00ff00;

3. RGB Colors:

 RGB colors allow you to define the intensity of red, green, and blue as integer values
between 0 and 255.

 Example: background-color: rgb(255, 0, 0);

4. RGBA Colors:
 RGBA colors are similar to RGB colors but include an additional alpha channel that
represents the color's transparency.

 The alpha value ranges from 0 (completely transparent) to 1 (completely opaque).

 Example: background-color: rgba(0, 0, 255, 0.5);

5. HSL and HSLA Colors:

 HSL (Hue, Saturation, Lightness) and HSLA (HSL with alpha) colors provide an
alternative way to specify colors based on hue, saturation, and lightness values.

 Hue ranges from 0 to 360 degrees, saturation and lightness range from 0% to 100%,
and alpha ranges from 0 to 1.

 Example: background-color: hsl(120, 100%, 50%);

22. Write a note on box-shadow property of CSS.

It is used to add shadow-like effects around the frame of an element.

Syntax: box-shadow: h-offset v-offset blur spread color |inset|inherit|initial|none;

inset: Normally, the shadow generates outside of the box, but by using inset, the shadow can be
created within the box.

initial: It is used to set the property of the box-shadow to its default value.

inherit: it is inherited from its parent.

none: It is the default value that does not include any shadow property.

#col {

/* box-shadow: h-offset v-offset blur spread color */


box-shadow: 5px 10px 10px 10px orange;

23. Write a note on float property with its options

he CSS float property is a positioning property. It is used to push an element to the left or right,
allowing other element to wrap around it. It is generally used with images and layouts.

none It specifies that the element is not floated, and will be displayed just where it occurs in the text. this is a
default value.

left It is used to float the element to the left.

right It is used to float the element to the right.

initial It sets the property to its initial value.

inherit It is used to inherit this property from its parent element.

Eg: img { float: left;}


24. What is animation? What are start and end states?
an animation is nothing more than a visualization of change. animation is a property that allows
you to change the style of an element over time. This can be used to create a variety of effects, such
as:

 Making an element fade in or out

 Moving an element from one place to another

 Changing the size of an element

 Changing the color of an element

The start state defines the initial state of the element before the animation begins. It specifies the
element's properties, such as position, size, opacity, color, or any other CSS property, as they are
before any animation effects are applied.

The end state, on the other hand, represents the desired appearance or behavior of the element at
the end of the animation. It defines the final configuration of the element, often different from the
start state, that will be achieved after the animation completes.

25. What do you mean by keyframes.


The @keyframes rule specifies the animation code.The animation is created by gradually changing
from one set of CSS styles to another.During the animation, you can change the set of CSS styles
many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is
the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is
complete.

Syntax: @keyframes animationname {keyframes-selector {css-styles;}}


Eg: @keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
26. Write the purpose of animation-direction property with its possible values.

The animation-direction property defines whether an animation should be played forwards,


backwards or in alternate cycles.

animation-direction: normal|reverse|alternate|alternate-
reverse|initial|inherit;

Value Description

normal Default value. The animation is played as normal (forwards)

reverse The animation is played in reverse direction (backwards)

alternate The animation is played forwards first, then backwards

alternate-reverse The animation is played backwards first, then forwards

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

Eg: div {
animation-direction: alternate;
}
27. Write the syntax of animation property shorthand form

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

28. What are the properties a CSS transition defines?


The CSS transitions are effects that are added to change the element gradually from one style to
another

Value Description
transition-property Specifies the name of the CSS property the transition effect is for

transition-duration Specifies how many seconds or milliseconds the transition effect takes to complete

transition-timing-function Specifies the speed curve of the transition effect

transition-delay Defines when the transition effect will start

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

29. List the values for transition timing function.

the transition-timing-function property specifies the speed curve of the


transition effect.

This property allows a transition effect to change speed over its duration.

ease-in Specifies a transition effect with a slow start

ease-out Specifies a transition effect with a slow end

step-start Equivalent to steps(1, start)

step-end Equivalent to steps(1, end)

initial Sets this property to its default value. Read about initial

inherit Inherits this property from its parent element. Read about inherit

4m:

1. List and explain the advantages of CSS.


 CSS saves time − You can write CSS once and then reuse the same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
 Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it's a good idea to start using CSS in all the HTML pages
to make them compatible with future browsers.
 Platform Independence − The Script offer consistent platform independence and can
support latest browsers as well.
 Cascading sheet not only simplifies website development, but also simplifies
the maintenance as a change of one line of code affects the whole web site
and maintenance time.
 It is less complex therefore the effort are significantly reduced.
 It helps to form spontaneous and consistent changes.
 CSS changes are device friendly.

2. Explain all style elements of CSS.

Selectors: Selectors determine which elements in an HTML document will be affected by a


particular CSS rule. They can be HTML tags, classes, IDs, or other attributes.

Properties: CSS properties define the visual characteristics of the selected elements. They
specify attributes like color, size, position, and more. Properties are assigned values that
control the appearance of the elements.

Values: Values are assigned to CSS properties and determine the specific behavior or
appearance of the selected elements. For example, a color property can have values like
"red," "#FF0000," or "rgb(255, 0, 0)."

Declarations: Declarations consist of a property and its corresponding value, enclosed within
curly braces. Multiple declarations can be combined to form a CSS rule.

• Declaration Block. The code following the selector includes all the formatting options you want to
apply to the selector. The block begins with an opening brace ({) and ends with a closing brace (}).

Comments: Comments in CSS are used to add explanatory notes within the style sheet. They are
ignored by the browser and are intended for developers to provide information or disable certain
styles temporarily. CSS comments are denoted by /* comment text */.

Eg: h1 {

color: red;

3. Explain different ways linking style sheet in HTML5

an external style sheet, you can change the look of an entire website by
changing just one file!. Each HTML page must include a reference to the
external style sheet file inside the <link> element, inside the head section

eg: <!DOCTYPE html>


<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

mystyle.css
body {
background-color: blue;
}
h1 {
color: red;
margin-left: 20px;
}

internal style sheet may be used if one single HTML page has a unique
style. The internal style is defined inside the <style> element, inside the
head section.

Eg: <!DOCTYPE html>


<html>
<head>
<style>
body {
background-color: red;
}
h1 {
color: pink;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

An inline style may be used to apply a unique style for a single element.To
use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

Eg: <!DOCTYPE html>


<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

4. Explain the steps of creating an internal style sheet

1. Open your HTML file in a text editor.


2. In the <head> section of your HTML file, add a <style> tag.
3. Inside the <style> tag, add your CSS rules.
4. Save your HTML file.
5. Open the HTML document in a browser: Open the saved HTML file in a web
browser to view the styling applied by the internal style sheet.

Eg:refer 3rd question 4mark

5. Explain the steps of creating an external style sheet.

1. Create a new file with the .css extension.


2. In the new file, add your CSS rules.
3. Save the file in the same directory as your HTML file.
4. In your HTML file, add a <link> tag in the <head> section.
5. In the <link> tag, specify the href attribute to the path of your external style
sheet file.
6. Save your HTML file.
7. Open the HTML document in a browser: Open the saved HTML file in a web
browser to view the styling applied by the external style sheet.
Eg:refer 3rd question 4mark

6. Explain the relationships between HTML tags with the help of a representative
diagram.
In HTML, elements are represented by tags, and their relationships
can be categorized into two main types: parent-child relationships
and sibling relationships.
1. Parent-child relationships:
- Parent element: A parent element is an HTML element that
contains one or more child elements. The parent element acts as a
container or wrapper for its child elements.
- Child element: A child element is an HTML element that is
nested inside a parent element. The child element inherits certain
properties and behaviors from its parent.
Example:
```html
<div> <!-- parent element -->
<h1>Heading</h1> <!-- child element -->
<p>Paragraph</p> <!-- child element -->
</div>
In this example, the `<div>` element is the parent element, and
both the `<h1>` and `<p>` elements are child elements of the `<div>`
element.
2. Sibling relationships:- Sibling elements: Sibling elements are
HTML elements that share the same parent. They are at the same
hierarchical level and appear next to each other.
Example:
<ul> <!-- parent element -->
<li>Item 1</li> <!-- sibling element -->
<li>Item 2</li> <!-- sibling element -->
<li>Item 3</li> <!-- sibling element -->
</ul>
```
In this example, the `<li>` elements are sibling elements because
they share the same parent `<ul>` element.
7. Explain the pseudo-classes used to style link

A pseudo-class is used to define a special state of an element.For example, it


can be used to:

 Style an element when a user mouses over it


 Style visited and unvisited links differently
 Style an element when it gets focus

 :link: This pseudo-class is used to style links that have not yet been visited.
 :visited: This pseudo-class is used to style links that have been visited.
 :hover: This pseudo-class is used to style links when the mouse pointer is
hovering over them.
 :active: This pseudo-class is used to style links when they are being clicked.
 :focus: This pseudo-class is used to style links when they have focus.
Syntax: selector:pseudo-class {
property: value;
}

Eg:
a:link {

color: blue;
}
a:visited {
color: purple;
}

a:hover {
color: red;
text-decoration: underline;
}
a:active {

color: green;
text-decoration: none;
}
8. Explain :focus, :before, :after ::selection pseudo-classes?

 :focus: This pseudo-class is used to style elements when they have focus.
Focus is when an element has the input focus, such as when a user is typing
in a text field or clicking on a button.
 :before: This pseudo-class is used to insert content before an element. The
content can be anything, such as text, images, or even other elements.
 :after: This pseudo-class is used to insert content after an element. The
content can be anything, such as text, images, or even other elements.
 ::selection: This pseudo-element is used to style the selected text in an
element. The selected text is the text that is highlighted when a user selects it
with the mouse or keyboard.
Eg:

input:focus {
background-color: yellow;
outline: none;
}
p::before {

content: "This is some content before the paragraph.";


}
p::after {
content: "This is some content after the paragraph.";
}
::selection {
background-color: blue;

color: white;
}
9. Explain attribute selectors with example code.

 [attribute]: This selector selects all elements that have the specified attribute.
 [attribute=value]: This selector selects all elements that have the specified
attribute with the specified value.
 [attribute~=value]: This selector selects all elements that have the specified
attribute with a value that contains the specified value.
 [attribute^=value]: This selector selects all elements that have the specified
attribute with a value that starts with the specified value.
 [attribute*=value]: This selector selects all elements that have the specified
attribute with a value that contains the specified value, even if the value is not
at the beginning or end of the attribute value.
Eg:
a[target] {
background-color: yellow;
}
a[target="_blank"] {
background-color: yellow;
}
[title~="flower"] {
border: 5px solid yellow;
}
[class^="top"] {
background: yellow;
}
[class*="te"] {
background: yellow;
}
10. Explain child selectors with code example.

child selectors are used to select elements that are children of other elements. They are very
useful for styling elements that are related to each other in the DOM tree.
Eg: p > span {
color: red;
}

11. Explain child type selectors with code.


CSS3 includes a selector that works much like the child selectors in the previous
section but applies to children with a specific type of HTML tag.

:first-of-type
Works just like :first-child but applies to a child that has a particular tag. For
example, say you have a sidebar element with the class sidebar. To style the first
paragraph in that sidebar, use this selector eg:
.sidebar p:first-of-type

Notice the p in p:first-of-type. It indicates the tag you’re going to format.


:last-of-type
Works like :last-child but applies to the last instance of a particular type of tag. For
example, if you want to format the last paragraph in the sidebar div in a particular
way, but you’re not sure whether there are other tags coming after the paragraph

(like a bulleted list, headline, or image). Here’s the style: eg:


.sidebar p:last-of-type
:nth-of-type
Works like :nth-child() but it applies to alternating children that have a specific tag.
You may find this selector handy if you have something like a big paragraph of text

that’s peppered with photos. The <img> tag is an inline tag, so you can have a <p>
tag with a bunch of <image> tags inside it. And say you want to alternately float the
images left and right, You can do so with these two styles:
img:nth-of-type(odd) { float: left; }
img:nth-of-type(even) { float: right; }

12. Explain how to use @font-face directive.

1
The @font-face directive is a CSS at-rule that specifies a custom font with
which to display text. The font can be loaded from either a remote server or
a locally-installed font on the user's own computer.

The @font-face directive has the following syntax:

@font-face {
font-family: font-name;
src: url(font-file);
font-weight: font-weight;
font-style: font-style;
}

The font-family property specifies the name of the font. The src property
specifies the URL of the font file. The font-weight property specifies the
weight of the font. The font-style property specifies the style of the font.

Here is an example of how to use the @font-face directive:

Code snippet
@font-face {
font-family: "MyFont";
src: url("myfont.ttf");
font-weight: bold;
font-style: italic;
}

h1 {
font-family: "MyFont";
}
13. Explain filters used in searching google web fonts
 Font family: This filter allows you to search for fonts by their family name. For
example, you could search for "Roboto" or "Open Sans".
 Font weight: This filter allows you to search for fonts by their weight. For example,
you could search for "bold" or "italic".
 Font style: This filter allows you to search for fonts by their style. For example, you
could search for "sans-serif" or "serif".
 Language: This filter allows you to search for fonts that support a specific language.
For example, you could search for fonts that support "English" or "Spanish".
 License: This filter allows you to search for fonts that are available under a specific
license. For example, you could search for fonts that are available under the "SIL
Open Font License" or the "Apache License".
 Popularity: This filter allows you to sort the results by popularity. The most popular
fonts will be displayed at the top of the results.
 Newest: This filter allows you to sort the results by the date they were added to
Google Web Fonts. The newest fonts will be displayed at the top of the results.

14. Explain the different possible ways to set color property value with proper examples
When setting the color property in CSS, there are several ways to specify the color value.
Here are the different possible ways with examples:
1. Named Colors:- You can use predefined color names to set the color.
- Example:
p{
color: red; }

2. Hexadecimal Values: - Hexadecimal values represent colors using a combination of six


hexadecimal digits (0-9 and A-F) preceded by a hash (#) symbol.
- Example:
h1 {
color: #FFA500; /* Orange */ }
3. RGB Values: - RGB (Red, Green, Blue) values specify the intensity of each color component
using decimal values from 0 to 255.
- Example:

span {
color: rgb(0, 128, 0); /* Dark green */ }
4. RGBA Values:- RGBA (Red, Green, Blue, Alpha) values are similar to RGB, but with an
additional alpha channel specifying the transparency level (0.0 to 1.0).
- Example:
div {
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */ }

5. HSL Values: - HSL (Hue, Saturation, Lightness) values represent colors using the hue angle
(0 to 360), saturation (0% to 100%), and lightness (0% to 100%).
- Example:
a{
color: hsl(240, 100%, 50%); /* Blue */}
6. HSLA Values: - HSLA (Hue, Saturation, Lightness, Alpha) values are similar to HSL but
include an alpha channel for transparency.
- Example:

button {
color: hsla(60, 100%, 50%, 0.8); /* Semi-transparent yellow */ }
15. Explain different ways to set font-size property value.
When setting the `font-size` property in CSS, there are several ways to specify the font size
value. Here are the different possible ways with examples:
1. Absolute Units:- You can use absolute units to set an exact font size. Commonly used
absolute units are:
- `px` (pixels): The font size is specified in pixels.

- `pt` (points): The font size is specified in points.


- Example:
h1 {
font-size: 24px;//pt }
2. Relative Units: - Relative units allow you to set font sizes relative to the parent element or
the default browser font size. Commonly used relative units are:
- `em`: The font size is relative to the parent element's font size. A value of 1em is
equivalent to the parent's font size.
- `rem`: The font size is relative to the root (document) element's font size. A value of
1rem is equivalent to the root font size.
- `vw` and `vh`: The font size is relative to the viewport width or height. For example, 1vw
is 1% of the viewport width.
- Example:
p{
font-size: 1.2em;}

3. Percentage Values: - Font sizes can be specified as a percentage relative to the parent
element's font size. A value of 100% is equivalent to the parent's font size.
- Example:
span {
font-size: 150%;
}

4. Keywords: - CSS also provides keywords to set common font sizes, such as `small`,
`medium`, `large`, `x-large`, `xx-large`, and more.

- Example:
h2 {
font-size: large;
}
5. Viewport-Percentage Lengths: - CSS3 introduced viewport-percentage lengths that allow
you to set font sizes relative to the viewport size. These units are similar to relative units but
are based on the viewport dimensions rather than the parent element.
- Example:

h3 {
font-size: 3vw; }
16. Explain the styling of lists using CSS.
CSS can be used to style lists in a variety of ways. Here are some of the most common
properties used to style lists:
 list-style-type: This property specifies the type of list marker that will be used. The
possible values for this property are:
o disc (the default)
o circle
o square
o decimal
o decimal-leading-zero
o lower-roman
o upper-roman

o lower-alpha
o upper-alpha
o none
 list-style-position: This property specifies the position of the list marker. The possible
values for this property are:
o outside (the default)
o inside

 list-style-image: This property specifies an image to be used as the list marker.


 list-style-padding: This property specifies the amount of padding that should be
applied to the list marker.
 list-style-margin: This property specifies the amount of margin that should be
applied to the list marker.
Here is an example of how to style a list using CSS:
ul {
list-style-type: disc;

list-style-position: outside;
list-style-image: url("my-image.png");
list-style-padding: 5px;
list-style-margin: 0;
}

17. Explain the properties which make up a Box model.

In CSS, the term "box model" is used when talking about design and
layout.The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
The image below illustrates the box model:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is
transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent
The CSS box model is used to control the size and layout of HTML elements.
The properties that make up the box model are:

 width: This property specifies the width of the content area.

 height: This property specifies the height of the content area.

 padding: This property specifies the amount of padding around the


content area.

 border: This property specifies the style, color, and width of the
border.

 margin: This property specifies the amount of margin around the


border.

Here is an example of how to use the box model to style an HTML element:

div {

width: 200px;

height: 100px;

padding: 10px;

border: 1px solid black;

margin: 10px;}

18. Explain about formatting individual borders with proper code


examples.

The CSS border properties allow you to specify the style, width, and color
of an element's border.
1. `border-width`: - Use the `border-width` property to set the width of
each border side.

- Example:

div {

border-width: 2px 1px 3px 4px; }

2. `border-style`: - Use the `border-style` property to set the style of


each border side.

- Example:

div {

border-style: solid dashed dotted double;}

3. `border-color`:- Use the `border-color` property to set the color of


each border side.

- Example:

div {

border-color: red green blue #000;}

4. Shorthand `border` property: - You can also use the shorthand


`border` property to set all the border properties in one declaration.

- Example:

div {

border: 2px dashed red; }

You can also use the border-top, border-right, border-bottom, and border-
left properties to format individual borders.

Eg:div {

border-top: 1px solid red;

border-bottom: 1px solid red;

border-left: 2px solid blue;

border-right: 2px solid blue;}


19. Explain different ways of creating rounded corners in CSS with

proper code examples

In CSS, there are several ways to create rounded corners for elements. Here
are different approaches with corresponding code examples:

1.border-radius property:The border-radius property allows you to create


rounded corners by specifying a single value for all four corners or individual
values for each corner.

Example:

div {

border-radius: 10px;}

This example sets a border radius of 10 pixels for all four corners.

You can also specify different values for each corner:

Eg:div {

border-radius: 10px 20px 15px 5px;}

This example sets a border radius of 10 pixels for the top-left corner, 20
pixels for the top-right corner, 15 pixels for the bottom-right corner, and 5
pixels for the bottom-left corner.

2.border-top-left-radius, border-top-right-radius, border-bottom-


right-radius, and border-bottom-left-radius properties:

Instead of using the shorthand border-radius property, you can specify


different border radius values for each corner individually using these
separate properties.

Example:

div {

border-top-left-radius: 10px;

border-top-right-radius: 20px;

border-bottom-right-radius: 15px;

border-bottom-left-radius: 5px;

}
20. Explain different options for box-sizing property in CSS3.
the box-sizing property allows us to include the padding and border in an
element's total width and height.

 content-box: This is the default value. The width and height of the element will only
include the content, and the padding and border will be added to the final rendered
width and height.

 border-box: The width and height of the element will include the content, padding,
and border. This is the most common value for the box-sizing property.
 padding-box: The width and height of the element will include the content and
padding. This is less common than the border-box value, but it can be useful for
some layouts.

Eg: div {
box-sizing: content-box;//borderbox//paddingbox
}
21. Explain overflow property of CSS3 with all of its options.

The overflow property specifies whether to clip the content or to add


scrollbars when the content of an element is too big to fit in the specified
area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. The content renders


outside the element's box
 hidden - The overflow is clipped, and the rest of the content will be
invisible
 scroll - The overflow is clipped, and a scrollbar is added to see the rest
of the content
 auto - Similar to scroll, but it adds scrollbars only when necessary

 The overflow-x and overflow-y properties specifies whether to change


the overflow of content just horizontally or vertically (or both):

overflow-x specifies what to do with the left/right edges of the content.


overflow-y specifies what to do with the top/bottom edges of the
content.

eg: div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
div {
overflow: hidden;//scroll//auto
}
div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

22. Explain clear property of CSS3 with all its options.

The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is
next to a floating element.

clear: none|left|right|both|initial|inherit;

Value Description

none Default. The element is not pushed below left or right floated elements

left The element is pushed below left floated elements

right The element is pushed below right floated elements

both The element is pushed below both left and right floated elements

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Eg: div {

clear: both;//left,right,none

23. Briefly explain the CSS animation with an example.

CSS animations allow you to create simple animations on web pages using
CSS. They are a powerful tool that can be used to create a variety of effects,
such as sliding images, rotating text, and bouncing buttons.
When the animation is created in the @keyframe rule, it must be bound with selector;
otherwise the animation will have no effect.

The animation could be bound to the selector by specifying at least these two
properties:

o The name of the animation


o The duration of the animation

To create a CSS animation, you need to define the following:

 The element that you want to animate.

 The properties that you want to animate.

 The values that you want the properties to change to.

 The timing of the animation.

Eg: <div class="animated-div"></div>

.animated-div {

width: 200px;

height: 200px;

background-color: red;

animation-name: color-change;

animation-duration: 3s;

animation-timing-function: linear;

animation-iteration-count: infinite;

@keyframes color-change {

0% {

background-color: red;

}
100% {

background-color: red;

24. Explain all the animation related properties.

CSS provides several animation-related properties that allow


you to control and customize animations. Here are the main
animation-related properties:
1. animation-name:
 Specifies the name of the animation, defined using
@keyframes.
 Example: animation-name: slide-in;
2. animation-duration:
 Sets the duration of the animation in seconds (s) or
milliseconds (ms).
 Example: animation-duration: 2s;
3. animation-timing-function:
 Defines the speed curve or timing function of the
animation.
 Common values include linear, ease, ease-in, ease-
out, and ease-in-out.
 Example: animation-timing-function: ease-in-out;
4. animation-delay:
 Specifies a delay before the animation starts.
 Example: animation-delay: 1s;
5. animation-iteration-count:
 Sets the number of times the animation should repeat.
 Use a specific number (2, 3, etc.) or infinite for
indefinite repetition.
 Example: animation-iteration-count: 3;
6. animation-direction:
 Determines whether the animation plays forward
(normal), backward (reverse), alternates between
forward and backward (alternate), or alternates
between forward and backward with the initial state
applied (alternate-reverse).
 Example: animation-direction: alternate;
7. animation-fill-mode:
 Specifies how the element should be styled before and
after the animation.
 Values include none (default), forwards, backwards,
and both.
 Example: animation-fill-mode: forwards;
8. animation-play-state:
 Controls whether the animation is running or paused.
 Values include running (default) and paused.
 Example: animation-play-state: paused;

25. Explain all the possible values for animation-fill-mode


property.
The animation-fill-mode property in CSS defines how an element should be styled before and after
the animation. It determines whether the animation styles should be applied before the animation
starts or after it ends. The animation-fill-mode property accepts the following values:

1. none:

 This is the default value.

 The element's styles are not affected by the animation before or after it is executed.

2. forwards:

 The element retains the styles applied to it by the last keyframe of the animation
after the animation ends.

 The styles are not reverted to their original values.

 Example: animation-fill-mode: forwards;

3. backwards:

 The element applies the styles defined in the first keyframe of the animation before
the animation starts, even if it hasn't started yet.

 This allows the element to have the initial state of the animation applied to it.

 Example: animation-fill-mode: backwards;

4. both:
 The element applies both the styles defined in the first keyframe (backwards) and
the styles defined in the last keyframe (forwards).
 The element retains the styles applied by the last keyframe of the animation after
the animation ends.

 Example: animation-fill-mode: both;

The animation-fill-mode property is particularly useful when dealing with animations that have a
delay or iteration count. It allows you to control how the element is styled before the animation
starts and after it ends, ensuring smooth transitions and desired effects.

You might also like