What is CSS?

CSS stands for Cascading Style Sheet which is a simple designing language. CSS is a mechanism which can be embedded effect/ style inside HTML file for formatting (text size, color, font, space, line) of a web page. It is used to add powerful dynamic effect to the html file. CSS was invited by Håkon Wium Lie on October 10, 1994 and maintained through a group of people within the W3C called the CSS Working Group. CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS

CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages.
Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Offline Browsing − CSS can store web applications locally with the help of an offline catch. Using of this, we can view offline websites. The cache also ensures faster loading and better overall performance of the website.
Platform Independence − The Script offer consistent platform independence and can support latest browsers as well.

CSS Versions

· Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation 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.

· CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2.

CSS3 Modules are having old CSS specifications as well as extension features.

Selectors
Box Model
Backgrounds and Borders
Image Values and Replaced Content
Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

CSS Syntax and Selectors

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

· Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.

· Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.

· Value - Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −

Selector {property: value}

Example: You can define a table border as follows −

table{ border :1px  solid #C00; }

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

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

Example

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

Example

p {
text-align: center;
color: red;
}

Example:

<!DOCTYPE html>

<html>

<head>

<style>

p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

</body>

</html>

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":

Example

#para1 {
text-align: center;
color: red;
}

Example:

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: red;

}

</style>

</head>

<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

</body>

</html>

Do NOT start an ID name with a number!

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

Example

.center {
text-align: center;
color: red;
}

Example:

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

</body>

</html>

Do NOT start a class name with a number!

Grouping Selectors

If you have elements with the same style definitions, like this:

h1 {
    text-align: center;
    color: red;
}h2 {
    text-align: center;
    color: red;
}p {
    text-align: center;
    color: red;
}

you can group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example

h1, h2, p {
text-align: center;
color: red;
}

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: red;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<h2>Smaller heading!</h2>

<p>This is a paragraph.</p>

</body>

</html>

CSS How to...

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

Example:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "myStyle.css" looks:

body {
    background-color: lightblue;
}h1 {
    color: navy;
    margin-left: 20px;
}

Do not add a space between the property value and the unit (such as margin-left:20 px;). The correct way is: margin-left:20px;

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Example

<head>
<style>
body {
    background-color: linen;
}h1 {
    color: maroon;
    margin-left: 40px;
} </style>
</head>

Example

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

<p>This is a paragraph.</p>

</body>

</html>

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.

Example

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

then, assume that an internal style sheet also has the following style for the <h1> element:

h1 {
color: orange;
}

If the internal style is defined after the link to the external style sheet, the <h1> elements will be "orange":

Example

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {color: orange;
}</style>
</head>

Example:

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: orange;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>

</html>

However, if the internal style is defined before the link to the external style sheet, the <h1> elements will be "navy":

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: orange;

}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>

</html>

CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

The background-color property specifies the background color of an element.

The background color of a page is set like this:

Example

body {
background-color: lightblue;
}

Example:-1

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has a background color!</p>

</body>

</html>

Example:-2

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

background-color: green;

}

div {

background-color: lightblue;

}

p {

background-color: yellow;

}

</style>

</head>

<body>

<h1>CSS background-color example!</h1>

<div>

This is a text inside a div element.

<p>This paragraph has its own background color.</p>

We are still in the div element.

</div>

</body>

</html>

Background Image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

The background image for a page can be set like this:

Example

body {
background-image: url("paper.gif");
}

Example:-1

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>

</html>

Example-2

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>This text is not easy to read on this background image.</p>

</body>

</html>

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body {
background-image: url("gradient_bg.png");
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

body {

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Strange background image...</p>

</body>

</html>

Example-2

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: repeat-x;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Here, a backgound image is repeated only horizontally!</p>

</body>

</html>

Background Image - Set position and no-repeat

Showing the backgound image only once is also specified by the background-repeat property:

Example

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background image example.</p>

<p>The background image is only showing once, but it is disturbing the reader!</p>

</body>

</html>

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Example-2

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>W3Schools background no-repeat, set position example.</p>

<p>Now the background image is only shown once, and positioned away from the text.</p>

<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>

</body>

</html>

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use thebackground-attachment property:

Example

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Example-2

<html>

<head>

<style>

body {

background-repeat: no-repeat;

background-position: right top;

margin-right: 200px;

background-attachment: fixed;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>The background-image is fixed. Try to scroll down the page.</p>

<p>If you do not see any scrollbars, try to resize the browser window.</p>

</body>

</html>

Background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

The shorthand property for background is background:

Example

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: #ffffff url("img_tree.png") no-repeat right top;

margin-right: 200px;

}

</style>

</head>

<body>

<h1>Hello World!</h1>

<p>Now the background image is only shown once, and it is also positioned away from the text.</p>

<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>

</html>

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's border.

This element has a groove border that is 15px wide and green.

Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}

p.solid {border-style: solid;}

p.double {border-style: double;}

p.groove {border-style: groove;}

p.ridge {border-style: ridge;}

p.inset {border-style: inset;}

p.outset {border-style: outset;}

p.none {border-style: none;}

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

</style>

</head>

<body>

<h2>The border-style Property</h2>

<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="none">No border.</p>

<p class="hidden">A hidden border.</p>

<p class="mix">A mixed border.</p>

</body>

</html>

Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.one {
    border-style: solid;
    border-width: 5px;
}p.two {
    border-style: solid;
    border-width: medium;
}p.three {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-width: 5px;

}

p.two {

border-style: solid;

border-width: medium;

}

p.three {

border-style: dotted;

border-width: 2px;

}

p.four {

border-style: dotted;

border-width: thick;

}

p.five {

border-style: double;

border-width: 15px;

}

p.six {

border-style: double;

border-width: thick;

}

p.seven {

border-style: solid;

border-width: 2px 10px 4px 20px;

}

</style>

</head>

<body>

<h2>The border-width Property</h2>

<p>This property specifies the width of the four borders:</p>

<p><b>Note:</b> The "border-width" property does not work if it is used alone.

Always specify the "border-style" property to set the borders first.</p>

</body>

</html>

Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
transparent

The border-color property can have from one to four values (for the top border, right border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Example

p.one {
    border-style: solid;
    border-color: red;
}p.two {
    border-style: solid;
    border-color: green;
}p.three {
    border-style: solid;
    border-color: red green blue yellow;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

p.one {

border-style: solid;

border-color: red;

}

p.two {

border-style: solid;

border-color: green;

}

p.three {

border-style: solid;

border-color: red green blue yellow;

}

</style>

</head>

<body>

<h2>The border-color Property</h2>

<p>This property specifies the color of the four borders:</p>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>

<p class="three">A solid multicolor border</p>

<p><b>Note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p>

</body>

</html>

Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for each side.

In CSS, there is also properties for specifying each of the borders (top, right, bottom, and left):

Example

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

p {

border-top-style: dotted;

border-right-style: solid;

border-bottom-style: dotted;

border-left-style: solid;

}

</style>

</head>

<body>

<p>2 different border styles.</p>

</body>

</html>

Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one property.

The border property is a shorthand property for the following individual border properties:

border-width
border-style (required)
border-color

Example

p {
border: 5px solid red;
}

Example-1

<!DOCTYPE html>

<html>

<head>

<style>

div {

border: 5px solid red;

}

</style>

</head>

<body>

<h2>The border Property</h2>

<p>This property is a shorthand property for border-width, border-style, and border-color:</p>

</body>

</html>

Labels: CSS

What & How to do

Saturday, July 2, 2016

Basic note related to CSS

What is CSS?

Advantages of CSS

CSS Versions

CSS Syntax and Selectors

CSS How to...

Example

Example

Example

Example

0 Comments:

Post a Comment

Previous Posts