20Fingers2Brains

Home » Posts filed under CSS3

Showing posts with label CSS3. Show all posts

Types of CSS Styles

Posted by 20Fingers2Brains on Tags: CSS , CSS3

In this article we will see how to insert CSS in an HTML Document.

We can use a CSS style sheet with an HTML document by learning how to link the CSS code with the HTML document.
A CSS style sheet can be linked to an HTML document in a variety of ways, where each way has its own advantages and disadvantages.
The following are the three ways to aplly CSS style to your HTML document:

1. The internal style sheet
2. The external style sheet
3. The in-line style

DEMO

The Internal Style Sheet:
The internal style sheet is written within the HEAD element of the HTML document. This style is applied only to the document in which it is defined. The syntax of internal style sheet is written as follows:

    <style type="text/css">
        selector {property : value;}
    </style>

The preceding syntax contains the starting and ending tags of the STYLE element. The STYLE element contains a type attribute with value text/css. The opening and the closing tags of the STYLE element embeds the style declaration. The declaration consists of selector followed by curly braces. The curly braces hold a property followed by a colon, which is further followed by a value, and finally that value is followed by a semicolon.

    <head>
    <style type="text/css">
        p{font-family:Comic Sans MS;color:Blue;}
        #target{font-family:Comic Sans MS;color:Red;}
    </style>
    </head>

In the preceding code snippet, the STYLE element is placed inside HEAD element. The CSS statements are written within the STYLE element.

Advantages:

Affects only the page in which they are placed. You can use this style if the CSS is page specific.
Allows you to change the style of the same HTML file in which you are working.

DisAdvantages:

Affects only the page to which they are applied. If you want to use the same styles in other documents, you need to repeat them for every page.
Increases the page load time because the entire CSS file needs to be implemented first to apply CSS.

The External Style Sheet:

The syntax to create an external style sheet is same as that of creating an internal style sheet. In case if internal style sheet the style is placed in the HTML document; whereas, in case of external style sheet, the CSS file is written outside the HTML document and the reference of the CSS file is placed in the HTML document. In an external style sheet, the style sheet rules are saved into a text file with the .css extension. Once you have created your CSS file, you can link with web pages. The CSS file can be linked with HTML document in two ways explained below:

Linking - This way refers to the HTML LINL element, which is used to link a style sheet. This LINK element has three attributes - rel, type and href. The rel attribute specifies what you are linking (stylesheet as value in our case). The type specifies the MIME type for the browser, and the href attribute specifies the path of the .css file.
```
    <link rel="Stylesheet" type="text/css" href="test.css" />
```
In the preceding code snippet, the value of the rel attribute is set to stylesheet, value of the type attribute is set to text/css, and that of the href attribute is set to test.css.
Importing - This way helps you in accessing the style rules from other CSS style sheets. The @import keyword is used followed by the Uniform Resource Identifier(URI) of the stylesheet to which you want to import the style rules.
```
    <style type="text/css">
        @import url("targetStyle.css")
        p{color:Red;}
    </style>
```
In the preceding code snippet, we have used the @import keyword followed by the URL of the stylesheet. In addition to the import rule, the @media rule of CSS helps you in applying the styles to the media device depending on the type of the device a page is displaying. Some of the media devices supported by CSS are computer screens, printers, televisions, handhelds, speech synthesizers, and projectors.

Advantages:

Allows you to control the look and feel of several documents in one go and do not need to define a specific style for every element.
Allows you to easily group your styles in a more efficient way.

DisAdvantages:

Increases the download time as the entire CSS file has to be downloaded to apply the style to the HTML document. When the styles are less in number, applying external style sheet can make the document complicated.
Displayes the Web page only after the entire style sheet is loaded.

The Inline style:

The inline style properties are written in a single line separated by semicolons. These properties are placed inside the style attribute of the HTML element, on which you want to apply the CSS.

        <div>
            <p style="color:Red;font-family:Comic Sans MS;">This is paragraph element.</p>
        </div>

In the preceding the paragrah element is styled.

Advantages:

Provides the highest precedenceover internal and external style sheets. Therefore, if you want some styles to be compulsorily applied, use inline style or else override CSS styles.
Provides an easy and quick approach to add a style sheet in a web page.

DisAdvantages:

Makes a document difficult to download and increases the download time.
Does not allow to style pseudo-elements, which are used to add special effects to the selectors. For example: you provide different styles or colors to differentiate between active, visited or non-visited links.

Selectors in CSS

Posted by 20Fingers2Brains on Tags: CSS , CSS3

CSS - Cascading Style sheets plays an important part in designing our HMTL pages and making them look good.
In order to achieve best design in best way, one need to know how to use CSS selectors efficiently.
In CSS we have three selectors: element, id and class selector.
In this article we will see what each selector does and how can we make best use of these selectors.

Demo

1. Element Selector

Element selector is used when one wants to apply style to all the elements of same type. Suppose you want to apply color to all the paragraph elements, then the best selector to use is element selector "p" in this case.

In the above example, we have created few paragraph elements and applied a common look using the element selector. The element selector is specified using the name of the element to which you want to apply style like "div" or "p".

2. Class Selector
Class selector is more basic then element selector. One should use class selector where one wants to apply style or common look to certain group of elements which do not belong to same element type. We define a class using class selector. The class attribute of all the elements is set to the selector name.

In the above example, we have defined two class selectors. The class selector is declared using "." operator followed by class name. The class selectors has the same name as class attribute for elements on the page.

3. ID Selector
The ID selector is the most basic, unique and simple to use. The ID selector is used when style is to be applied to only single or unique element on the page. As ID attribute is unique across the page, this selector is used for styling single element on the page.

In the above example, we have created two paragraph elements and assigned ID attribute of both. We have used ID selector to style them differently.
We could have use element selector or class selector, if our case was to style them same. In case of styling them differently we have to use ID selector.

4. Child Selector
The child selector matches the element that is an immediate child of another element. In the child selector, greater than symbol (>) is used as the combinator. A combinator is a symbol, such as >, <, and +, which shows the relationship between two elements.

In the preceding example, the p element is the immediate child of div element and as well as h1 element. The CSS rule is applied to all the p elements that are immediate children of div element.

5. Descendant Selector
The descendant selector matches the element that is a descendant of another element. A descendant element is an element that is nested inside another element. In case of descendant selector white space is used as the combinator. The descendant selector does not effect the immediate child but also considers the inner most hierarchy while applying rule (i.e. element inside an element.).

In the preceding example, CSS rule is applied to all span elements nested inside the div element.

6. Adjacent Sibling Selector
The adjacent sibling selector selects all the elements that are adjacent siblings of a specified element. Siblings elements must have the same parent element. The word adjacent means side-by-side, so no other element could exist between the adjacent sibling elements. To use an adjacent sibling selector, the plus symbol (+) is used as its combinator.

In the preceding example, the first paragraph element matches the adjacent sibling selector, h4 + p, because the first paragraph element is the adjacent element to the h4 element. The second paragraph element does not match with the selector. Although the second paragraph element is sibling of h4 element it is not adjacent to the element.

7. Attribute Selector
The CSS attribute selector selects elements on the basis of some specific attributes or attibute values. There are four categories under Attribute selector:
a. Hyphen Selector: Matches if the element has an attribute with a value followed by a hyphen.

b. Existence Selector: Matches if the element has a specific attribute.
c. Equality Selector: Matches if the elements has an attribute with a specific value.
d. Space Selector: Matches if the element has an attribute with space separated items that match with the value.

8. Query Selector:
The querySelector() and querySelectorAll() methods accept CSS selectors as parameters and return the matching element node in the document tree. The querySelector() method helps in querying the entire document or a specific element of the document. If multiple elemets are available, CSS selectors return the first matching element; or returns null, if no element is available. The querySelectorAll() method returns all the available elements as a singe static collection of elements known as staticNodeList. This collection of elements is not affected by any change made in the document tree, for instance removing or inserting a node does not affect staticNodeList.

CSS Interview Questions ans answers with demos

Posted by 20Fingers2Brains on Tags: CSS , CSS3 , Interview Questions

Following are CSS questions and answers which would help you in brushing up your CSS skills .
These questions are important and covers basic concepts.

1. What is CSS ?

Ans : CSS stands for Cascading style sheet. CSS is used to apply good look to HTML document or a Web Page.

2. What are different ways to integrate CSS into a Web Page ?

And : Following are three ways of integrating CSS into a web page.

Inline : We can apply inline style by using style attribute. We can use this attribute at element or control level.

Demo :

Embedded : We create a style section inside the head section. This section is used for entire web page.

Demo :

Linked/External : In this method, we create a stylesheet .css file and link it to the web page using Link element. The syntax for linking the CSS file is shown below :

3. What are advantages and disadvantages of using external style sheet.

Ans:

Advantages :

Reusability - The style of multiple documents or webpages can be maintained by single CSS file.
Maintainability - The CSS file is simple to maintain.

Disadvantages :

Download Overload - The CSS file need to download for style. The style will not apply until the file is downloaded.
Not Worth - It is not viable for small style definitions. For small style it is better to define them inline.

4. What are advantages and disadvantages of using Embedded style sheet.

Ans:

Advantages :

We can create classes for multiple elements on the page.
No extra download of file is required.

Disadvantages :

This type of applying style is not reusable. Its scope is withing the document or web page only.

5. What are advantages and disadvantages of using Inline style sheet.

Ans:

Advantages :

It is use for smaller style definition.
The style defined at inline level overrides the style defined at embedded or external level.

Disadvantages :

This method does not separate style information and content.
Styles for multiple document cannot be maintained.
Control classes cannot be created to control style of multiple elements on web page.

6. How to remove the border from images or any other element ?

Ans: We can use the border CSS property. We can set it to none as shown below :

img{border:nonw;}

7. What is CSS Selector ?

Ans: The selector is something which selects the element or set of elements from document. The selectors are use to apply CSS style to selected or specific elements.

eg:

id Selector - Id selector selectes the element whose id matches the selector. It id of the element to be selected is preceded with the "#" symbol.

#myDiv

{

color:Red;

}

The above syntax will apply the Red color to the element with id attribute set to myDiv.

class Selector - We can define a class using .preceding the name of class. This selector selects all the elements on the page.

.myDiv

{

color:Red;

}

The above syntax will apply the Red color to all the elements on the page with class myDiv.

element Selector - We use the element name itself to select a particular set of elements.

{

color:Red;

}

The above syntax selects all the paragraph element from the page and applies the red color to it.

8. What is Tweening ?

Ans:

Tweening is short form for in-betweening.
It is the process of generating intermediate frames between two images. It is the important method used in animations.
It gives the impression that first image is evolved into the second image.
The CSS3 properties like transform(matrix,translate,rotate,scale) can be used to achieve tweening.

9.What is difference between background-color and color CSS properties ?

Ans:

The background-color property is used to set the background or back color of any element.
The color property is used to set the color of text in any element.

Demo :

10. Explain grouping in CSS ?
Ans: The term grouping is using or grouping more than one selector together. While applying CSS we can group two selectors together to reuse the defined CSS properties.

eg:

p,div,span
{
color:Red;
font-style:italics;
}

Demo :

11. What are child selectors in CSS ?
Ans: The child selector is used when you want to select an element which is child of another element. The parent and child element is separated by greater than sign. Ths syntax is shown below :

eg:

div > p
{
color:Red;
}

The above code applies the red color to the text inside p element only.

Demo :

12. What are pseudo classes?
Ans: 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.

eg:

a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}

13. How to define comments in CSS ?
Ans: The text defined inside /* and */ is considered as comments. The browser ignores the comments.

Disable the resizing of TextArea in multiple browsers

Posted by 20Fingers2Brains on Tags: CSS3

We often find our TextArea resizable on multiple browsers.
Click on the right bottom of TextArea and you can resize it.
This resizing of TextArea disrupts the page layout and affects the way page looks.
In this article we will see two ways to disable the resizing of TextArea.

Watch Video

Below demo shows what we meant with resizing of TextArea.

Click on the right corner of the above textarea and drag it. The dragging changes the size of textarea.
Lets see 2 ways by which we can control the resizing of the textarea.

Way 1 :

We have a property introduced in CSS3. The property is re-size This property set to none, disables the re-sizing of textarea.

Demo :

In the above example, we have set re-size to none for above textarea. As you can see, we are not getting the right corner image as well. You will not be able to drag or re-size the above textarea.

Way 2 :

The second way to disable the resizing the textarea is also comes from CSS3 properties. We have properties like min-height, max-height, min-width and max-width which can be used to disable re-sizing of textarea.

Setting the min-width and max-width property to same value, will disable the re-sizing horizontally. Similarly setting the min-height and max-height property to same value will disable the re-sizing vertically.

Demo :

In the above example, we have used four properties to disable the resizing. Using this way, the right corner image appears but you will not be able to resize the textarea.

Thus these are the two ways to disable the re-sizing of TextArea.