1. What are different ways to apply styles to a Web page?
There are four ways to apply style to a Web page.
- Inline CSS: HTML elements may have CSS applied to them via the STYLE attribute.For Example: If You have <p> element into webpage, you can apply inline style likeshows in example. <p style=”font-size: 12px; color: #000000;”>Test </p>
- Embedded CSS: CSS may be embedded in a Web page by placing the code in a STYLE element within the HEAD element.For Example: If You have <h2> element into webpage, you can apply embedded style like shows in example.
<head><style type=”text/css”>h2 {font-size: 16px;color: #2d2d2d;font-weight: 900;}</style></head>
- Linked CSS: CSS can be placed in an external file (a simple text file containing CSS) and linked via the link element.You can apply style to webpage using external file as shown in example.
<link rel=”stylesheet” href=”custom/custom.css” type=”text/css” media=”screen, projection” /> - Imported CSS: Another way to utilize external CSS files via @import.<style>
@import url(‘/css/styles.css’);
</style>
Put then your “styles.css” document can contain calls to any number of additional
style sheets:
@import url(‘/css/typography.css’);
@import url(‘/css/layout.css’);
@import url(‘/css/color.css’);
2. How do CSS precedence/cascading rules work? How does the !important directive affect the rules?
CSS style rules “cascade” in the sense that they follow an order of precedence. Global style rules apply first to HTML elements, and local style rules override them. For example, a style defined in a style element in a webpage overrides a style defined in an external style sheet. Similarly, an inline style that is defined in an HTML element in the page overrides any styles that are defined for that same element elsewhere.
The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:
p { color: #ff0000 !important; }
p { color: #000000; }
3. What is a class? What is an ID?
A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. This means it can apply to instances of the same element or instances of different elements to which the same style can be attached. Classes are defined in CSS using a period followed by the class name. It is applied to an HTML element via the class attribute and the class name.
The following snippet shows a class defined, and then it being applied to an HTML DIV element.
.test {font-family: Helvetica; font-size: 20; background: black;}
<div class =”test”><p>test</p></div>
Also, you could define a style for all elements with a defined class. This is demonstrated with the following code that selects all P elements with the column class specified.
p.column {font-color: black;}
An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID. Within CSS, ID selectors are defined with the # character followed by the selector name.
The following snippet shows the CSS example1 defined followed by the use of an HTML element’s ID attribute, which pairs it with the CSS selector.
#example1: {background: blue;}
<div id=”example1″></div>
4. What is the difference between an ID selector and CLASS?
An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.
5. What is Contextual Selector?
Contextual selector addresses specific occurrence of an element. It is a string of individual selectors separated by white space (search pattern), where only the last element in the pattern is addressed providing it matches the specified contex
6. What is Grouping?
When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.
h1, h2, h3 {background: red;}
7. What are Child Selectors?
A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.
p > ul {font-weight: bold;}
8. What are Pseudo Classes?
Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element’s first child element.
The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.
k {font-color: red;}
a:visited {font-coa:linlor: green;}
a:hover {font-color: yellow;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}
9. What is grouping ?
Grouping is gathering (1) into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector (2).
1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
1. The selectors LI, P with class name .first and class .footnote share the same style, e.g.:
LI {font-style: italic}
P.first {font-style: italic}
.footnote {font-style: italic}
To reduce the size of style sheets and also save some typing time they can all be grouped in one list.
LI, P.first, .footnote {font-style: italic}
2. The declarations {font-style: italic} and {color: red} can be attached to one selector, e.g.:
H2 {font-style: italic}
H2 {color: red}
and can also be grouped into one list:
H2 {font-style: italic; color: red}
10. What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.
<HEAD> <LINK REL=STYLESHEET HREF="style.css" TYPE="text/css"> </HEAD>
CSS Interview Questions
ReplyDeleteCorephp interview questions and answers for freshers and 1 to 5 years experience candidate.Learn tips and tricks for cracking php interview questions .Coding tag will guide you the best e-learning website that cover all technical and learn technical tutorial based on different languages.
ReplyDeleteGreat beat ! I would like to apprentice while you amend your website, how can i subscribe for a blog site? It is truly a great and useful piece of information.
ReplyDeletecss interview questions