HTML and CSS Interview Questions
- Author Full Stack Tutorials |
- Last Updated - December 03, 2019
HTML stands for Hypertext Markup Language is the standard markup language for creating web pages and web applications etc.
HTML5 is the latest version of Hypertext Markup Language (HTML)
- HTML DOCTYPE declaration should be written at the top of an HTML document.
- HTML DOCTYPE declaration tells the Browser about the version of the markup language(HTML) in the which the page is written.
In HTML5 DOCTYPE declaration is written as
<!DOCTYPE html>
In HTML 4.01 Strict DOCTYPE declaration is written as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
In HTML 4.01 Transitional DOCTYPE declaration is written as
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- CSS short form of Cascading Style Sheet
- CSS is basically used to describe the style of an HTML document.
- Inline:Inline, used to style only a small piece of code
- Internal:Internal css are Embedded in HTML Pages.
- External:it is used from external sources
HTML and CSS Interview Questions
Key differences between inline and inline-block:
An inline element has no line break before or after it, so elements sits next to others.
An inline-block element is placed as an inline element but it behaves as a block element because a line break happens after the element. (elements displayed side by side)
- Static - this is the default value, all elements are in order as they appear in the document.
- Relative - the element is positioned relative to its normal position.
- Absolute - the element is positioned absolutely to its first positioned parent.
- Fixed - the element is positioned related to the browser window.
- Sticky - the element is positioned based on the user's scroll position.
Center Aligned Div!
Defining Colors in CSS: There are many ways to to so, few of them is given below:
- HEX: #rrggbb In HTML/CSS, a color can be define using a hexadecimal value in the form: #rrggbb. Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff.
- RGB: rgb(red, green, blue)
- RGB colors have three values that represent: red, green, and blue
- Each value can be a number between
0and255or a percentage from0to100% - A value of
0means none of that color is being used
- By Name: A color can also be define by color name too. like red, green, blue, yellow, black etc
In CSS, a color can be specified in two ways:
- Hexadecimal color code:A color is represented by 6 characters is hexadecimal color coding. It is a combination of numbers and letters and is preceded by #.
- RGB color code:A mixture of red, green and blue represents a RGB color. The value of a color can also be specified.
.my-breadcrumb a {
color: #f44a56;
font-weight: bold;
}
rgb(r,g,b):
The opacity property sets the opacity level of an element.
In other words, opacity property in CSS specifies how transparent an element is
.my-class { opacity: 0.5; }
In CSS, z-index property is used to displace elements on the z-axis i.e In or Out of the screen. It is used to define the order of elements if they overlap on each other.
z-index: auto|number|initial|inherit;
A CSS preprocessor is basically a scripting language that use it's own unique syntax and then compiles it into regular CSS.
CSS is primitive and incomplete. so building a function, reusing a definition or inheritance are hard to achieve. for very big projects, or complex systems, maintenance is a very big problem.
Preprocessor, with their advanced features, helped to achieve writing reusable, maintainable and extensible codes in CSS.
To use a CSS preprocessor, you must install a CSS compiler.
Following are the types of CSS preprocessors:
- Sass (Syntactically Awesome Style Sheet) - Sass is the most mature, stable, and powerful CSS preprocessor, compatible with all versions of CSS.
- LESS (Leaner Style Sheets ) - LESS is a preprocessor language that is compiled into CSS. It's design is influenced by Sass
- Stylus - Stylus is a preprocessor language that is compiled into CSS. It's design is influenced by Sass and LESS
If you use Node.js, you can also install Sass using npm by running
- Install Anywhere (npm) Install by using command.
npm install -g sass - Command to compile to CSS.
sass styles.sass:styles.css
Ruby Sass has reached end of life (EOL) and is now totally unmaintained. So you can switch to Dart Sass or LibSass.
LESS is written in JavaScript so you will need Node.js to run it.
- Linux and Mac: Install by using command.
npm install -g less - Windows: Open Cmd and Run
npm install less - Command to compile to CSS.
lessc styles.less styles.css
- Easy to Setup
- Easy to Maintain
- Code Reusability
- Reduced development time
Mixins provides the facilities to use properties of one rule set into another rule set in CSS.
Mixins - "mix-in" properties from existing styles
Let's understand by following example:
.div_color {
background-color: #000;
color: #fff;
}
.container{
width: 100%;
.div_color();
}
.footer{
width: 100%;
.div_color();
}
In above example we are mixin property div_color
