Explore topic-wise InterviewSolutions in .

CSS can be written in three different ways for an HTML file. 

1. Inline: Writing CSS for an element along with the element definition using the style property.
2. Embedded: Writing the CSS in the head using the style tag.
3. External: Having CSS written in an external document and linking it via LINK tag.

The best way to write CSS by having an external document and linking it in the REQUIRED HTML documents. Whereas the reason why having an external document is best because having our CSS written inline it should be rewritten for ANOTHER element too lots of same code comes up. Whereas CSS is embedded in a style tag we cannot use the styles in a different HTML document again the code should be rewritten in different HTML document too. So, the best way is to use an external document to write CSS and link it in an HTML document.

Ex:

1. Inline: <h1 style=”color: RED;”>Hello, World!</h1>
2. Embedded: <style>h1{color: red;}</style>
3. External: <link rel=”stylesheet” type=”text/css” href=”main.css”>

The inline one is written along with the HTML element encapsulated in the body tag. And, the embedded style is written in the style tag encapsulated inside the head tag. And, the external style sheet named main.css is LINKED using link tag.

CSS3 position property allows us to position an element. The types of property values available for a position are STATIC, absolute, fixed, relative, sticky, INITIAL, and INHERIT.

• Static: It’s a default value of position to any element. Element is rendered one after the other in order. It’s the way as it is. There’s no change in the display of elements. Which will display in the window with default paddings and margins?
• Absolute: The absolute value is used to position the element relative to its PARENT element. Say if the parent element has ‘x’ margin in the left. The child element ‘y’ margin towards left. The TOTAL margin of the child element would be ‘x+y’.
• Fixed: The fixed value is used to position the element relative to the viewport (browser window) and the position of the element would be fixed.
• Relative: The relative value is used to position the element relative to its normal position. 
• Sticky: The stick value is used to position the element based on the user’s scroll. Its position is relative until a given offset position is met. Then it will stick in a place like it’s fixed.
• Initial: This property value allows us to use the default behavior of the element.
• Inherit: This property value allows us to inherit the property of its parent.

CSS3 is the latest evolution extending CSS2. It has a lot of NEW features like selectors, rounded corners, border-IMAGE, text-shadow, box-shadow, transitions, animations, gradients, and grid layouts. Let us discuss each of them below.

• Selectors: Selectors are used to selecting the content which you want to add styles too. There are five types of selectors in CSS.
  • Type Selector (Element Selector)
  • ID Selector
  • Class Selector
  • Universal Selector
  • Attribute Selector
• Rounded Corners: Using this feature, we can apply smooth corners to any element. The border-radius property is used to give the element smooth edges. Check out the example below for syntax and usage.

• Border Image: border-image property allows us to use an image as a border. Check the example below for syntax and usage.

• Shadow: It’s an effect which can be applied to text and box. text-shadow and box-shadow are the property names used to added shadow to text and box respectively.
• Transitions: CSS Transitions allows us to change the values of the transition property smoothly.
• Gradients: We can directly use gradients in for two or more COLORS using linear-gradient and radial-gradient properties.
• Grid Layouts: We have two new display properties which are grid and inline-grid which offers us a grid-based layout with similar rows and columns concept.

Pseudoclass :first-LETTER can refer to the first letter of the element, PARAGRAPH as below. It is clean approach WITHOUT enclosing the first letter in SPAN tag and applying the required rule based on the representation.

CSS

opacty is not a CSS PROPERTY.

Colors in CSS can be specified by the following six methods:

•          Hexadecimal colors color: #000000;
•          RGB colors color: rgb(100, 115, 220);
•          RGBA colors color: rgba(0, 0, 1, 0.6);
•          HSL colors color: hsl(34, 100%, 23%);
•          HSLA colors color: hsla(34, 100%, 53%, 0.5);
•          Predefined/Cross-browser color names color: burlywood;

The :first-line pseudo-element is USED to STYLE the first formatted line of a paragraph by using text-transform property with VALUE uppercase.

For e.g.

The aspect ratio is DEFINED as the ratio of WIDTH media feature to the ratio of height media features W:H. And the aspect ratio 16/9 is 42:32.

The below Media query allows to TARGET the media query BASED on device-aspect-ratio which is 16/9.

CONDITIONAL comments are developed by microsoft. And it only worked with IE BROWSER. The conditional comments help to target IE browser & comments can be written to target the different version of IE 5-IE 9. CSS RULES or code embedded inside of the comments will be used by Internet explorer BASED browser.  Whereas from IE10 & above the support for conditional comments has been dropped.