Cascading
Style
Sheets is a style sheet language used for formatting of a html pages in websites. While most often used to style web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web, and almost all web pages use CSS style sheets to describe their presentation.
In all website, we used css to design the website. It always help a lot to look better our website. There are lot of tutorials online to learn the CSS in easy steps. To learn CSS you need not install anythings, just need a Browser (mozilla, firefox etc ) to display the page and Editor (Net beans, Notepad++) to edit the css file.
What is class in CSS and why we use?
Class is basically used for grouping the attributes for applying same css.
To apply the same type of styles on multiple tags, we add the class on the tags.
then we add the styles on same class in css file.
What is grouping?
Grouping is gathering 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.
Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive.
What is CLASS selector?
Class selector is a "stand alone" class to which a specific style is declared. Using the CLASS attribute the declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class'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 character as a numeric code, however, they cannot start with a dash or a digit
What is cascade?
Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.
What are different ways to integrate a CSS into a Website?
Following are 3 simple ways
Inline: Use STYLE attribute in the tags.
Embedded: By placing the code in a STYLE element within the HEAD element.
Linked/ Imported: Place the CSS in an external file and link it via a link element.
Explain external Style Sheet? How would you link to it to web page?
Create a CSS file and place all the CSS in that file and include the same file in one OR more web pages called External Style Sheet?
<link rel="stylesheet" href="/css" />
What are the advantages and disadvantages of External Style Sheets?
Advantages of External Style Sheets are:
- Using them, the styles of multiple documents can be controlled from one file.
- Classes can be created for use on multiple HTML element types.
- In complex situations, selector and grouping methods can be used to apply styles.
- If you need to update the css file in live site, then need not to upload all files. You can just upload the css file.
- It is easy to manage Files
Disadvantages of External Style Sheets:
- In order to import style information for each document, an extra download is needed.
- Until the external style sheet is loaded, it may not be possible to render the document.
- For small number of style definitions, it is not viable.
Recommendation: Always use External Style sheet
What are the advantages and disadvantages of Embedded Style Sheets
Advantages of Inline Styles
- It is especially useful for small number of style definitions.
- It has the ability to override other style specification methods at the local level(in one place).
Disadvantages of Inline Styles
- It does not separate out the style information from content.
- The styles for many documents can not be controlled from one source.
- Selector grouping methods can not be used to handle complex situations.
- Control classes can not be created to control multiple element types within the document.
- Good Companines never allowed to use Inline css in website
Recommendation: Never use In-line Style sheet
What is CSS selector?
A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let's look at all the different kinds of selectors available.
Universal Selector: Apply CSS on all elements
* {
color: red;
}
Element Type Selector: Apply CSS on particular attribute
ul {
color: red;
}
ID Selector: Apply css which have same ID
#attributeId {
color: red;
}
Class Selector: Apply CSS which have same Class
.box {
color: red;
}
Descendant Combinator: Apply Css where we have Combine two or more selectors so you can be more specific in your selection method.
#container .box {
color: red;
}
Child Combinator: Apply CSS to the child
#container > .box {
color: red;
}
General Sibling Combinator: Apply CSS based on Sibling
h2 ~ p {
color: red;
}
Adjacent Sibling Combinator: Apply CSS based on adjacent sibling
p + p {
color: red;
}
Attribute Selector: Apply CSS on particular tag with having same attribute.
input[type="text"] {
color: red;
}
Pseudo-class: Apply CSS on the class which does not exist in real.
a:hover {
color: red;
}
What is Tweening?
Tweening is used in animations, it is the process of generating intermediate frames between two images.
It gives the impression that the first image has smoothly evolved into the second one.
Explain 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
What is the use of CSS sprites?
A web page with large number of images takes a longer time to load in the website, because image separately sends out a http request.
The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request.
How to import CSS?
import url('/css/typography.css');
What is Contextual Selector?
It is a string of individual selectors separated by white space, where only last element in the pattern is addressed.
What are Pseudo Classes?
Pseudo classes allow you to identify HTML elements on characteristics. These are specified using a colon to separate the element name and pseudo class.
Following are Pseudo Class example:
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
What are some ways you might target IE (or IE6) only, without affecting other browsers?
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
What does z-index do?
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
It is added in CSS3. A Media Query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.
