What is CSS?
CSS is a Style sheet language used to define visual appearance and formatting of HTML documents.CSS is simple to use and easy to learn. CSS files can help define font, size, Colour spacing border and location of HTML data on a web page, and can also be used to create a continuous look throughout multiple pages of a website.
What is CSS3?
CSS3 is a latest standard of CSS earlier versions (CSS2).It is  widely used Cascading Style Sheets coding language. It is essentially one of the sets of building blocks from which almost any website can be built today.
What is inline CSS?
The inline CSS is also a method to insert style sheets in HTML document. An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.
What is Internal CSS?
In internal CSS the style of CSS is specified in the <head> section. This is internal CSS, it affects all the elements in the body section. Internal CSS is used in the condition when we want a style to be used in the complete HTML body.
What is External CSS?
In External CSS we create a .css file and use it in our HTML page as per our requirements. Generally external Cascading Style Sheets are used whenever we have many of HTML attributes and we can use them as required; there is no need to rewrite the CSS style again and again in a complete body of HTML that inherits the property of the CSS file. There are two ways to create a CSS file. The first is to write the CSS code in Notepad and save it as a .css file, the second one is to directly add the style sheet in our Solution Explorer and direct Visual Studio to use it on our HTML page.
Read More : Advanced CSS Interview Questions and Answers
What is Selector in CSS?
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
Some different types of selectors in CSS
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
What are the CSS3 modules?
CSS3 is collaboration of CSS2 specifications and new specifications, we can called this collaboration is module. Some important modules are:
- Selectors
- Box Model
- Text Effects
- Backgrounds
- Image Values and Replaced Content
- 2D&3D Transformations
- Animations
- Multiple Column Layouts
- User Interface
What is Contextual Selector?
Contextual selector specifies a specific occurrence of an element. It is combination of many selectors that are separated by white spaces. In this only the element that matches the specified element will be used not all the elements.
What are CSS frame works?
It is a pre-planned library, which allows easier and more standards-compliant webpage styling, using CSS language.
What is Tweening?
Tweening is the process in which we create intermediate frames between two images to get the appearance of the first image which develops into the second image.It is mainly used for creating animation.
What is CSS specificity?
CSS specificity is a score or rank that decides which style declaration has to be used to an element.(*) this universal selector has low specificity while ID selectors have high specificity.
Can you explain Embedded Style Sheets?
Using embedded style sheets will allow you to begin unleashing the full power of CSS by enabling you to apply styles to all HTML elements of a particular type on an entire web page. Whereas an inline style will only allow you to address one HTML element at a time, an embedded style sheet will allow you to address multiple HTML elements at once. This is accomplished by using the style element and a list of CSS rule sets.
What is ID Selector?
ID selector is an individually identified (named) selector to which a specific style is declared. Using the ID attribute the declared style can then be associated with one and only one HTML element per document as to differentiate it from all other elements. ID selectors are created by a character # followed by the selector’s name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode characters a numeric code; however, they cannot start with a dash or a digit.
What is imported Style Sheet? How to link?
Imported Style Sheet is a sheet that can be imported to (combined with) another sheet. This allows creating one main sheet containing declarations that apply to the whole site and partial sheets containing declarations that apply to specific elements (or documents) that may require additional styling. By importing partial sheets to the main sheet a number of sources can be combined into one.
What is RWD?
RWD is the abbreviation for Responsive web design.In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device.
How block elements can be centered with CSS1?
Block level elements can be centered by:
The margin-left and margin-right properties can be set to some explicit value:
BODY {
width: 40em;
background: fluorescent;
}
P {
width: 30em;
margin-right: auto;
margin-left: auto
}
In this case, the left and right margins will be each, five ems wide since they split up the ten ems left over from (40em-30em). It was unnecessary for setting up an explicit width for the BODY element; it was done here for simplicity.
What is the syntax of opacity in CSS3?
style=”opacity:0.4;filter:alpha(opacity=40)”
Firefox uses the property opacity:x for transparency, while IE uses
Can you explain Alternate Style Sheet?
It allows the user to select the style in which the page is displayed using the view>page style menu. Through Alternate Style Sheet, user can see a multiple version of the page on their needs and preferences
What is At- rule?
At rule is rule that applies to the apply the whole style of sheet and not a specific selector only.
Can you explain CSS3 animation?
When the animation is created in the @keyframe, bind it to a selector, otherwise, the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation
What are the differences between CSS and CSS3?
CSS:
- CSS is the basic version so it doesn’t support responsive design, and cannot handle media queries.
- CSS cannot split into varied modules. The user cannot create 3D transformations and animations using CSS.
- CSS doesn’t have any box-sizing tool. The user has to follow the standard procedures to align the text.
- CSS or cascading style sheets is the key element for web designing. Both CSS and CSS3 is more or less the same thing i.e. both are web designing tools.
CSS3:
- CSS3 supports responsive design, and can also handle media queries. This feature adds entirely new responsive design capabilities to the CSS repertoire.
- Css3 can split into modules. The user can easily create 3D transformations, transitions, and animations using CSS3. For the very first time, elements can move on screen without the help of Flash code or JavaScriopt. Elements can also change their size and color.
- All the alignment problems are now fixed by the Box- Sizing tool. This tool allows its user to get the right size for their element without having to subtract dimensions for padding and borders.
- CSS3 is nothing but an upgraded version of CSS. Just like HTML5 is an upgraded version of the basic HTML. This version comes with the above-mentioned features and hence is a better tool for web designing.
What is CSS3 Flexbox?
Flexible boxes, or flex box, are a new layout mode in CSS3. Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex (rendered as a block) or inline-flex (rendered as inline).Inside a flex container, there are one or more flex items.
Can you explain CSS opacity?
It is the property which elaborates the transparency of an element.
By this property, we can transparent the image that can take the values from 0.0-1.0, if the value is lower than the image is more transparent. IE8 and earlier version of the browser can take the values from 0-100.
img {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */}
What is the word wrap/word wrapping in CSS3?
word wrap/word wrapping is used to allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class
.wrapWord{word-wrap:break-word;}
What is Pseudo-elements?
Pseudo-elements are used to add special effects to some selectors. CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document
What is Property?
Property is a stylistic parameter (attribute) that can be influenced through CSS, e.g. FONT or WIDTH. There must always be a corresponding value or values set to each property, e.g. font: bold or font: bold san-serif.
What is Author style sheets Section?
Author style sheets are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more style sheets, which define the look and feel of the website — its theme.
What is User stylesheetsSection?
The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user’s wishes.
What is graceful degradation?
In case the component fails, it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.
What is progressive enhancement?
It’s an alternative to graceful degradation, which concentrates on the matter of the web. The functionality is same, but it provides an extra edge to users having the latest bandwidth. It has been into prominent use recently with mobile internet connections expanding their base.
What is Outskirt Style?
Styling of fringes has been stretched out to pictures and adjusted outlines which incorporate making a picture of the fringes and after that naturally apply a picture to the outskirts through CSS. Outskirt span, picture source, picture cut, and the qualities for width beginning and extent have been included CSS3.
What is User-agent style sheets Section?
The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent style sheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.
What are the Pros of CSS3?
Although CSS3 is not the only web development solution, it does allow provide greater advantages for several reasons.
Customization: A web page can be customized and alterations created in the design by simply changing a modular file.
Bandwidth Requirements: It decreases server bandwidth requirements, giving rapid download time when a site is accessed with desktop or hand-held devices, providing an improved user experience.
Consistency: It delivers consistent and accurate positioning of navigational elements on the website.
Appealing: It makes the site more appealing with adding videos and graphics easier.
Viewing: It allows online videos to be viewed without the use of third-party plug-ins.
Visibility: It delivers the opportunity to improve brand visibility by designing effective online pages.
Cost Effective: It is cost-effective, time-saving, and supported by most browsers.
