DEV Community 👩‍💻👨‍💻

Sumaiya Tasnim
Sumaiya Tasnim

Posted on

Some CSS Questions

1.How will you make font size responsive?
-If we specify text size with vw unit, it will be changed with respect to the screen size.
-We can also change font size with media queries.
-also declaring the value with rem can also make fonts responsive if the root value of the browser changes.
11.What are CSS Sprites?
-The mechanism of combining multiple images into one larger image is called CSS sprites. Gmail uses such technique. A sprite generator pack can be used to achieve the objective.

  1. What are Vendor-Prefixes? -Browser vendors add some experimental CSS and JavaScript APIs. It is done to inspire developers to try out new ideas. But in reality we see that sometimes these prefixes breaks code. Some common prefixes are -webkit-(chrome), -moz-(firefox), -o-(opera), -ms-(IE, ME)

3.What is tweening?
-Sometimes there is a frame that is produced between two images, this mechanism is called tweening. It is an illusion that makes an impression that the first image is naturally transitioned into the second image. Almost all forms of animation use this technology. This effect can be produced with CSS3 with Transform values such as matrix, convert, rotate and scale.

4.How is inheritance implemented in CSS?
-When a child class get holds off, the assets that the parent element posses is called inheritance. It easily defines the hierarchy in CSS from top to bottom. Usually, if the class-name in parent and child are the same, then child class will override the property.

5.What does the embedded stylesheet mean?
-A reserved space which specify the style sets for the HTML text in a singular location. It is put into effect when the styles are embedded inside HTML tags.

6.What is a declaration block?
-Declaration block in CSS is the space where one or more declaration takes place separated by semicolon. Each declaration contains a CSS property name and value assigned to it and then separated by a semicolon. Declaration blocks look like this

h1{color:white;}
p{text-align:center}

7.What is RWD?
-RWD stands for Responsive web design. This idea is implemented to make a webpage fit to any kind of screen available and make the page readable.

8.What is the difference between visibility: hidden and display: none?
-visibility hidden means the element is there but can not be seen. But it will consume no space.
-Display none means the element is hidden, but it will take up some space, hence the layout will be affected.

9.What is the ruleset?
-The phenomenon where two selectors are combined is called a ruleset.
1

0.How case-sensitive is CSS?
-CSS is not usually case-sensitive, except for the URLs and font families. But when XML is used, the declaration with XHTML DOCTYPE CSS is case-sensitive.

Top comments (3)

Collapse
sarveshprajapati profile image
Sarvesh Prajapati • Edited on

Here are some suggestion from my end:
From Knowledge standpoint

  • using VW might work with responsiveness, but can leads to some error like it won't stick to a certain point... keep increasing and keep decreasing.. We wouldn't have any control where to stop increasing and where to stop decreasing
  • media query would be better approach after all, as it supported widely... just changing the root size with media queries enough along with using REM units..

From editor standpoint

  • try to make heading as heading by using hashtag as it is markdown.... You headings and content kinda messed up together to create problem while reading
  • also try to put example of working code wherever possible, that would make more sense while visualize
  • try to add code in code literals, will look better..

Either way great content. Keep writing

Collapse
prakhart111 profile image
Prakhar Tandon

You can also have a look at my CSS basics series.
dev.to/prakhart111/part-2some-basi...

Cheers!

Collapse
sajidurshajib profile image
Sajidur Rahman Shajib

Check clamp() for the responsive issues.

🤔 Did you know?

 
🌚 Dark mode is available in Settings.