Css interview Question & Answer
#### What is CSS?
* CSS stands for Cascading Style Sheet.
* Styles define how to display HTML elements
* Styles were added to HTML 4.0 to solve a problem
* External Style Sheets can save a lot of work
* External Style Sheets are stored in CSS files
#### Where to define styles? How can you integrate/import CSS on a web page?
* Inline, used to style only a small piece of code
```
<p style="color:blue">
Hello CSS
</p>
```
* Internal/Embedded, style sheets are put between the <head>...</head>
```
<style>
p{color:blue}
</style>
```
* External
```
<link rel="stylesheet" type="text/css" href="style.css"
```
#### What is Property?
* The style that you are applying to a selector, e.g. border.
#### What is Selector?
The way you declare which elements the styles should apply to. There are different kinds of selectors:
* ```Class```: The most commonly used selector. E.g. “.cloudy” to select an element with classname cloudy. There can be more than 1 element with the same classname.
* ```ID```: Use this sparingly. You cannot reuse an ID within the same page and used only to identify an element uniquely. E.g. ```<div id=lovelyweather></div>```
* ```Attribute Selector```: If you use any attribute other than class or id to identify an element in a stylesheet, you would be using Attribute Selectors. You can also do basic pattern matching within an attribute selector (so if you would like to do basic pattern matching for selectors using class or ID attributes, you would want to use attribute selectors).
* ```Pseudo-Classes```: Classes that are applied to elements based on information that is not present in the markup, e.g. :first-child or :last-child. Do note that the selectors are parsed from right to left (see the demo). You cannot use section ```article:first-child``` to select the first occurrence of article, if the first child of section is h1 and not article. Likewise with the :nth-child, and :last-child pseudo-classes.
* ```Pseudo-Elements```: Pseudo-elements differ from Pseudo-Classes in that they actually create an element in the document tree. This is almost the first instance of CSS modifying the HTML document tree. You should ideally use pseudo-elements with “::” instead of “:” (but most browsers accept “:” notation for CSS 2.1 pseudo-elements). Pseudo-elements are: ```::first-line```, ```::first-letter```, ```::before```, ```::after``` (See the demo for how pseudo-elements work).
#### What are Combinators?
The selection of an element based on its occurrence in relation to another element (chosen by the choice of combinator: whitespace, >, +, or ~). You can have:
* Descendant Combinator
* This is the most common usage, e.g. #lovelyweather h1.
* Child Combinator
* Select an element if it is a direct child of another element (and not a grandchild of that element).
* Adjacent Sibling Combinator
* The element that is immediately adjacent to another element.
* General Sibling Combinator
* The element that is adjacent, but not immediately to another element.
Comments
Post a Comment
please do not enter any spam link in the comment box