Full form of the CSS if Cascading Style Sheets
1) Types of CSS
a. Inline
b. Internal or Embedded
c. External
a. Inline
This style is specified within the HTML tag using the style attribute.
Example
<p style="color:red">Hello</p>
b. Internal or Embedded
The CSS placed inside the HTML page.
Example
<p>Hello</p>
<style>
p{
color:red
}
</style>c. External
External CSS contains a separate CSS file having a .css extension. This file contains only styling properties with the help of tag attributes. It should be linked to the HTML file using the ‘link’ tag. This CSS file can be used on multiple web pages.
Example
<link rel="stylesheet" type="text/css" media="all" href="/css/my.css" /> // my.css is css file.
2) Difference between ‘Class’ and ‘ID’
ID is unquie and its indicated in CSS using “#” tag.
Example
<p id="myid">hello</p>
<style>
#myid { color:red; }
</style>Class is attribute tag of the element,indicated in CSS using “.”(dots), Class may be one or more than one.
Example
<p class="myclass">hello</p>
<style>
.myclass { color:red; }
</style>3) What is Bootstrap
Bootstrap is CSS framework, Its the most popular CSS framework responsive websites.
Other frameworks like Foundation, Gumby, Ukit, Semantic UI, etc.
4) 3D transformations in css
- rotateX()
- rotateY()
- rotateZ()
5) Is CSS case-sensitive ?
Yes
6) What does margin: 4px 10px 12px 8px signify?
Its add margin below on the element.
Top = 4px
Right = 10px
Bottom = 12px
Left = 8px
7) What is the Z-index ?
The Z-index specifies the stack order of elements that overlap each other. It has a default value of zero and can take negative or positive values.
8) How many position used in CSS
Four position state in CSS
- Static(default)
- Relative
- Fixed
- Absolute.
9) What are Pseudo-Elements?
Pseudo-element is used to style specified parts of an element in CSS.
Pseudo element like first-letter, first-line, before ,after, marker etc.
Example :
p::first-letter {
color: #ff0000;
}
10) What is the difference between ‘display: inline-block’ and ‘display: block’?
display: inline-block : Create side by side boxes.
display: block : It break the boxes after the element, so a block element doesn’t sit next to other elements
Related Post – Top 5 Image Optimizer Tools
