TQL

logo

Welcome To Ask Me

1. What is CSS?

Cascading Style Sheets fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.
CSS is easy to learn and understood, but it provides powerful control over the presentation of an HTML document.

2. How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

  1. External: These are written in separate files.
  2. Internal: These are cited at the top of the web page code document.
  3. Inline: These are written right next to the text.

3. What are the advantages of CSS?

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

4. Why do we use CSS?

We use CSS because of the following reasons:

  • CSS saves time: You can write CSS once and reuse the same sheet on multiple HTML pages.
  • Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically.
  • Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content.
  • Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
  • Offline Browsing: CSS can store web applications locally with the help of an offline cache. Using of this we can view offline websites.

5. What is the current version of CSS?

CSS3 is the latest version of CSS.

6. List the CSS Frameworks.

The best CSS frameworks are:

  • Bootstrap
  • Foundation
  • Bulma
  • UIKit
  • Semantic UI
  • Materialize
  • Pure
  • Tailwind CSS

7. What is the syntax for CSS?

A CSS style rule consists of a selector, property, and its value. The selector points to the HTML element where CSS style is to be applied. The CSS property is separated by semicolons.

Syntax:

selector { 
    Property: value; 
}

8. What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire stylesheet in an HTML document by using the STYLE element. 

  1.  <style>    
  2. body {    
  3.     background-color: linen;    
  4. }    
  5. h1 {    
  6.     color: red;    
  7.     margin-left: 80px;    
  8. }     
  9. </style> 

9. What is a CSS selector?

CSS Selectors: CSS Selectors are used to selecting HTML elements based on their element name, id, attributes, etc. It can select one or more elements simultaneously.

element selector: The element selector in CSS is used to select HTML elements which are required to be styled. In a selector declaration, there is the name of the HTML element, and the CSS properties which are to be applied to that element is written inside the brackets {}.

Syntax:

element_name {
    // CSS Property
}

id selector: The #id selector is used to set the style of the given id. The id attribute is the unique identifier in an HTML document. The id selector is used with a # character.

Syntax:

#id_name { 
    // CSS Property
}

class selector: The .class selector is used to select all elements which belong to a particular class attribute. To select the elements with a particular class, use the (.) character with specifying the class name. The class name is mostly used to set the CSS property to the given class.

Syntax:

.class_name {
    // CSS Property
}

10. Name some CSS style components

Some CSS Style components are:

  • Selector
  • Property
  • Value

11. How can we add comments in CSS?

Comments are the statements in your code that are ignored by the compiler and are not executed. Comments are used to explain the code. They make the program more readable and understandable.

Syntax:

/* content */

Comments can be single-line or multi-line.

12. Explain the term Responsive web design.

  • Main focus is to develop a website in multiple fixed layout sizes.
  • Offers good control over the design to develop variation in screens.
  • It is very time-consuming and takes a lot of effort to build the best possible adaptive design as examining it will need to go for many options with respect to the realities of the end user.
  • There are six standard screen sizes for the appropriate layouts; they are 320px, 480px, 760px, 960px, 1200px, 1600px to design.
  • Responsive Design

  • Main focus is to show content with respect to browser space.
  • Offers less control over the design.
  • It takes less time to build the design and there is no screen size issue irrespective of content.
  • It uses CSS media queries to design the screen layouts with respect to specific devices and property changes in the screen.

13. What is the use of CSS Opacity?

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object. For example:

 
  1. <style>    
  2. img.trans {    
  3.     opacity: 0.4;    
  4.     filter: alpha(opacity=40); /* For IE8 and earlier */    
  5. }    
  6. </style>

14. What is the difference between margin and padding?

n CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.

In CSS, we have margin property as follows:

  • margin-top
  • margin-right
  • margin-bottom
  • Margin-left

Margin property has some defined values as shown below.

  • Auto – Using this property browser calculates the margin.
  • Length – It sets the margin values in px,pt,cm etc.
  • % – It sets the width % of the element.
  • Inherit – By this property we can inherit the margin property from the parent element.

In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.

CSS padding also has properties like,

  1. Padding-top
  2. Padding-right
  3. Padding-bottom
  4. Padding-left

Negative values are not allowed in padding.

15. What is the use of the Box Model in CSS?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

  • Margin – It removes the area around the border. It is transparent.
  • Border – It represents the area around the padding
  • Padding – It removes the area around the content. It is transparent.
  • Content – It represents the content like text, images, etc.

 

16. What are the different CSS border properties?

CSS border properties allow us to set the style, color, and width of the border.

  • Border Style: The border-style property specifies the type of border. None of the other border properties will work without setting the border style.
  • Border Width: Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium and thick.
  • Border Color: This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.

17. What is CSS flexbox?

It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to arrange items within a container. Flexbox is different from the block model which is vertically biased and the inline which is horizontally biased. Flexbox was created for small-scale layouts and there’s another standard called grids which are geared more towards larger-scale layouts, It works similar to the way to Twitter bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with flexbox firstly create a flex container. To create a flex container set the display property to flex.

Syntax:

.main-container {
    display: flex;
}

Flex Properties:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

18. Write all the position states used in CSS.

In CSS, there are four position states as stated below:

  • Static(default)
  • Relative
  • Fixed
  • Absolute

19. What are the differences between relative and absolute in CSS?

The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.

It means, if we write left:10px then the result will be 10px far from the left edge of the parent element.

20. Define ‘important’ declarations used in CSS.

Important declarations are defined as that declaration which is having more importance than the normal declaration.

While executing, these declarations override the declaration which is having less importance.

For example, if there are two users having an important declaration then one of the declarations will override the declaration of another user.

For Example:
Body {background: #FF00FF !important; color: blue}

21.Differentiate between inline and block element.

Inline element does not have an element to set width and height and also it does not have the line break.

Example: em, strong, etc.

Block element specification:

  • They do have the line break.
  • They define the width by setting a container and also allow setting height.
  • It can also contain an element that occurs in the inline element.

Example:

width and height
max-width and max-height
min-width and min-height
hi (i=1-6)- heading element
p- Paragraph element.

22. What does the CSS float property do?

Float is a CSS property written in a CSS file or directly in the style of an element. The float property defines the flow of content. Below are the types of floating properties:

Float typeUsage
float: leftElement floats on the left side of the container
float: rightElement floats on the right side of the container
float: inheritThe element inherits the floating property of its parent (div, table, etc…)
float: noneElement is displayed as it is (Default).

23. What is the purpose of the z-index and how is it used?

The z-index helps to specify the stack order of positioned elements that may overlap one another. The z-index default value is zero and can take on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower index.

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

24. What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.

25.What is the difference between flexbox and grid?

1. Dimensionality and Flexibility:

  • Flexbox offers greater control over alignment and space distribution between items. Being one-dimensional, Flexbox only deals with either columns or rows.
  • The grid has two-dimension layout capabilities which allow flexible widths as a unit of length. This compensates for the limitations in Flex.

2. Alignment:

  • Flex Direction allows developers to align elements vertically or horizontally, which is used when developers create and reverse rows or columns.
  • CSS Grid deploys fractional measure units for grid fluidity and auto-keyword functionality to automatically adjust columns or rows.

3. Item Management

  • Flex Container is the parent element while Flex Item represents the children. The Flex Container can ensure balanced representation by adjusting item dimensions. This allows developers to design for fluctuating screen sizes.
  • Grid supports both implicit and explicit content placement. Its inbuilt automation allows it to automatically extend line items and copy values into the new creation from the preceding item.

Property

Grid

Flexbox

Dimension

Two – Dimensional

One – Dimensional

Features

Can flex combination of items through space-occupying Features

Can push content element to extreme alignment

Support Type

Layout First

Content First

26. Differentiate between CSS3 and CSS2.

The main difference between CSS3 and CSS2 is that CSS divides different sections into modules and supports many browsers. It also contains new General Sibling Combinators responsible for matching similar elements. 

27. What are the different ways to hide the element using CSS?

display: none, visibility: hidden, position: absolute

28. What is viewport height/viewport width in CSS?

It is a CSS unit that is used for measuring the height and width in percentage w.r.t. the viewport. It is mainly used in responsive design techniques. The measure VH is 1/100 of the height of the viewport. If the height of browser is equal to 1000px, 1vh is  10px. and if the width is 1000px, 1 vw is 10px.

29. What are text properties in CSS .

It is possible to assign various CSS text properties in your HTML element using the CSS text properties listed below:

CSS Text PropertyDescription
colorThe color property can be applied to set the color in your text.
directionThe direction property can be applied to set the direction of your text.
letter-spacingThe letter-spacing property can be applied to add or subtract space between letters, which will form a word.
text-decorationThe text-decoration property can be applied for underlining, overlining, and strikethrough text.
text-shadowThe text-shadow property can be applied for setting the text-shadow on your text.
text-transformThe text-transform property can be applied to capitalize text or convert text to uppercase or lowercase letters.
word-spacingThe word-spacing property can be applied to add or subtract space between different words in your sentence.
text-indentThe text-indent property can be applied to indent the text of your paragraph.
text-alignThe text-align property can be applied to align text in your document.
white-spaceThe white-space property can be applied to control flow, as well as to the formatting of your text.

30.What are pseudo elements and pseudo classes?

Pseudo elements help to create items that do not normally exist in the document tree. The examples of pseudo elements are:

  • ::before
  • ::after
  • ::selection
  • ::first-letter
  • ::first-line

Pseudo classes select regular elements under specific conditions such as when a user is hovering over a link. The examples of pseudo classes are:

  • :hover
  • :active
  • :link
  • :visited
  • :focus