CSS Concepts: Introduction to Cascading syle Sheets( CSS)

Page No. 1 2 3 4 5 6 7 8 9 10

What is CSS?

Cascading Style Sheets also referred to as CSS, is a simple design technique use to simplify the process of making web pages presentable. It handles the look and feel part of a web page. We can control the color of the text, back ground color of any section of the web page. the style of fonts, the spacing between characters, words , lines and paragraphs, number of columns sized and laid out, what background images or colors are used, as well as a variety of other effects including some animation effects also.

"Cascading" means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to be used on one HTML document. Style means to implement style on the HTML tags and sheet means a separate sheet which can be included into the HTML document

This is a simple language, easy to learn and understand but it provides powerful control over the presentation of an HTML document. This is a very important language to format or define the appearance of our website because in a website, there can be many number of pages which will be connected into it and a good website should have a similar type of the format for all the pages.

Advantages of CSS:

It saves time – means this is a technique in which we can write CSS code once and then reuse same on the multiple HTML pages. We can define one or more style for each HTML element and apply it to as many Web pages as you want.

Pages load faster – suppose we want to set the format of a <P> tag for example bgcolor of <p> tag as “RED” then in all the <p> tags I have to specify the bgcolor attribute explicitly and if a page is having 100 <p> tag then we have to define it 100 times only which will take a lot of time during coding as well as loading also. So less code means faster download times.
Easy maintenance – maintenance of the css file is easy and through css file we can easily make any changes any time by making a change in only css and that change will be implemented on all the pages of the website automatically.
CSS has a lot of variety of the attributes than HTML so you can give far better look to our HTML page.
It is supported by almost all platforms . By using the same HTML document, different versions of a website can be presented for different sized devices like cell phones.

CSS Versions:

Cascading Style Sheets, level 1 (CSS1) was came out in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

CSS2 was became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

CSS Syntax :-

• A style is a consistent, recognizable pattern

• A CSS style is a collection of one or more rules

• A style sheet is a collection of styles

• A rule is the combination of a selector, a property, and a value

– The selector identifies the element to which you are applying a style:- it can be element type , class, and id selectors.

– Property: is a type of attribute of HTML tag. All the HTML attributes are converted into CSS properties for example color or border etc.

– Values: are assigned to properties. For example color property can have value either red or #F1F1F1 etc.

So a general syntax for a RULE is as follows:

selector { property: value }

Example: You can define a table border as follows:

For example :-

table{ border :1px solid red; }

Here table is a selector, border is a property and given value 1px solid red is the value of that property.

Another example:- let suppose we want to change the color of all <P> (paragraph) tag as white then consider the following example :-

TYPES OF SELECTORS :-

1. The Element Type Selectors: - This is the same selector we have seen above. All the HTML tags come under this type of selector’s category. HTML Again one more example to give a color to all level 1 headings :

h1 { color: #36CFFF; }

2. The Class Selectors: we can define our style rules within a class also which can be further inherited on any of the selector of the website. And where we inherit that class all the properties defined in that class will be implemented on that element. This can be defined with a dot(.) symbol. For example : - suppose I am creating a class named as red with the dot(,) operator, in which I am simply defining color attribute as red, now when I implement this class on any of the selector it will make the text color as red.

.red { color: red; }

<p class=”red”> Hello This is CSS formatting </p>

This rule renders the content in red for every element with class attribute set to black in our document for example in the above <p> tag.

h1.red { color: red; }

As we all know that the color of <H1> tag text is black suppose I want to change the text color of only H1 tag element as red then I can declare as the previous example which renders the content in red for only <h1> elements with class attribute set to red.

You can apply more than one class selectors to given element. Consider the following example :

This para will be styled by the classes center and bold. </p>

3. The ID Selectors: we can also define as style rules using an id attribute of the elements. All the elements having that id will be formatted according to the defined rule. It always recognize by HASH(#) symbol. For example

#red { color: #FF0000; }

This rule renders the content in red for every element with id attribute set to redin our document. You can make it a bit more particular. For example:

h1#red {

color: #FF0000; }

This rule renders the content in black for only <h1> elements with id attribute set to red.

SOME OTHER SPECIAL SELECTORS :-

The Universal Selectors: - the universal selector simply matches the name of any element type. It is created by “*”.

* { color: #000000; }

Above defined rule implements the color as black to every element in our document.

The Descendant Selectors: A descendant selector in CSS is any selector with white space between two selectors, which means the selector comes with each other. Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em { color: #000000; }

The Child Selectors: There is one more type of selectors which is very similar to descendants but have different functionality. Consider the following example:

body > p { color: #000000; }

This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> etc. would not have any effect of this rule.

This Child Selectors can also apply styles to HTML elements with particular attributes. The style rule below will match all input elements that have a type attribute with a value of text:

input[type="text"]{ color: #000000; }

The advantage to this method is that the <input type="submit" /> or < input type=”checkbox”> will be unaffected, and the color applied only to the desired text fields.

The Grouping Selectors:- some time we find that many of our elements implements same style, in that case we have to give the different elements name separated with a comma. For example :-

h1, h2, h3 { color: #36C;

font-weight: normal; letter-spacing: .4em; margin-bottom: 1em;

text-transform: lowercase; }

The above example implements all the same values to specified attributes like color, font-weight, letter-spacing, margin-bottom and text-transform to all the elements h1,h2 and h3. The order of the list is irrelevant.

You can combine various class or ID selectors also. For example :- in the below example I had group IDS(like content, footer, supplement), class (first) and element h1 which all will be having the same attributes and their values.

#content, #footer, #supplement, .first, h1

{ position: absolute;

left: 510px;

width: 200px; }

Multiple Style Rules: If we need to define multiple style rules for a single element then we can define these rules to combine multiple properties and corresponding values into a single block. For example:-

h1 {

color: #36C;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase; }

Here all the property and value pairs are separated by a semi colon (;). You can keep them in a single line or multiple lines.

CSS Inclusion - Associating Styles (TYPES OF CSS based on their inclusion)

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.

1. Embedded CSS - The <style> Element:

In this method we can put all our CSS rules into an HTML document using the <style> element. This tag can be placed inside <head>...</head>, <body> … </body> or both <body> and <head> tags. According to the place where the style <tag> is present, it is called as Deferred, immediate and mixed respectively. Rules defined using this syntax will be applied to all the elements available in the document. Here is the generic syntax:

<head>

Style Rules

............

</style>

</head>

This is a Deferred Style sheet because <style> tag is present in <HEAD> tag.

<body>

Style Rules

............

</style>

</body>

This is an immediate Style sheet because <style> tag is present in <BODY> tag.

<head>…

Style Rules

............

</style>

</head>

<body>

Style Rules

............

</style>

</body>

This is a mixed Style sheet because <style> tag is present in <HEAD> and <BODY> tag both.

Attributes: Attributes associated with <style> elements are:

Type :- its value is text/css , which specify the stylesheet language as a content-type(MIME type). This is a required attribute.

Media :- its value can be screen,tty, tv, projection, handheld, print, aural or all which specifies the device, where the document can be displayed. Default value is all and it is an option attribute for <STYLE> tag.

Css.html

<html>

<head>

<title> Example of Embedded CSS(Deferred Style Sheet) in HTML file </title>

h1{

color:red;

}

</style>

</head>

<body>

<br>

<h1> This is an example of Embedded(deferred style sheet) in which

text inside the H1 TAG which changes its default black color to RED </h1><br>

It is deferred because we had define style tag in the HEAD TAG <br>

<h1> This is an example of text inside the H1 TAG. This is a preformatted text TAG but now having text color as RED.

In this type of style sheet all the h1 tag will implement the same format which is define inside the style tag. </h1>

</body>

</html>

2. Inline CSS - The style Attribute:

These are the css rules which are specified within the <TAG> by the style attribute which is a combination of style declarations separated by semicolon(;). These rules will be applied to that element only. Here is the generic syntax:

For Example:

This is an example of an inline CSS </h1>

Css.html

<html>

<head>

<title> Example of Inline CSS in HTML file </title>

</head>

<body>

<h1> This is a text inside the H1 TAG. This is a preformatted text TAG, having text color as black </h1>

<br>

<h1 style="color:red"> This is a text inside the H1 TAG having INLINE style which changes its default black color to RED </h1>

</body>

</html>

3. External CSS - The <link> Element:

This is the best way to implement styles on the complete website because in this method we create a separate .css file which we can link in any number of webpages to implement the same style. For example in the below figure if I will create a styles.css file, I can link that file to all my .html documents like – index.html,store.html,faq.html and help.html etc.

An external style sheet is a separate text file with .css extension with all the Style rules within this text file and then you can include this file in any HTML document using <link> element.

Here is the generic syntax of including external CSS file:

<head>

</head>

Attributes:

Attributes: Attributes associated with <link> elements are similar to <STYLE> tag except on additional and very important attribute:

Type :- its value is text/css , which specify the stylesheet language as a content-type(MIME type). This is a required attribute.

HREF :- this is used to give the URL of the .css file which we want to link in the .HTML file.

Using this <LINK> tag, we can include more than one .css file to our .HTML file which provide a high level of flexibility in our designing of website.

For Example:

Consider a simple style sheet file with a name mystyle.css having the following rules:

h1, h2, h3 { color: #36C;

font-weight: normal; letter-spacing: .4em; margin-bottom: 1em;

text-transform: lowercase; }

Now you can include this file mystyle.css in any HTML document as follows:

<head>

<body>

<h1> this is an example of H1 Tag using external css file </h1>

</body>

Mystyle.css

h1,h2,h3

{

color:green;

font-weight: normal;

letter-spacing: .4em;

margin-bottom: 1em;

text-transform: lowercase; }

Css.html

<html>

<head>

<title> Example of Embedded CSS(Deferred Style Sheet) in HTML file </title>

</head>

<body>

<br>

<h1> This is an example of Embedded(deferred style sheet) in which

text inside the H1 TAG which changes its default black color to GREEN </h1><br>

It is deferred because we had define style tag in the HEAD TAG <br>

<h1> This is an example of text inside the H1 TAG. This is a preformatted text TAG but now having text color as GREEN.

In this type of style sheet all the h1 tag will implement the same format which is define inside the style tag. </h1>

<h2> this is an example of H2 tag </h2>

<h3> this is an example of H3 tag</h3>

</body>

</html>

4. Imported CSS - @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.

<head>

<@import "URL"; </head>

Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:

<head>

<@import url("URL"); </head>

Example:

Following is the example showing you how to import a style sheet file into HTML document:

<head>

@import "mystyle.css"; </head>

Page No. 1 2 3 4 5 6 7 8 9 10

CSS Concepts

Tuesday, 25 April 2017

Introduction to Cascading syle Sheets( CSS)

No comments:

Post a Comment