CSS3

CSS(Cascading Style Sheets)


Enhancing Web Pages

CSS:-

CSS stands for cascading style sheets. CSS is a collection of styles that allows you to change the appearance of HTML elements on web pages. It can be used to define a set of formatting options that can be used to format text and other HTML elements. It defines a set of standard rules that provides a better control over the page layout and the appearance.

Identifying the syntax of CSS:-

CSS allows the creation of one or more rules for defining the style characteristics of HTML elements. Each rules consists of the following parts.

    Selector:-
A selector specifies the HTML element that you want to style.  You can have one or more selectors in a rule

 Declaration Block:-
       A declaration block follows a selector in a CSS rule and is enclosed in curly braces.

Syntax:-

Selector
{
// Declaration Block
Property: value;
}

Identifying the Types of stylesheet:-

1>     Inline Style
2>     Internal Style sheet
3>     External Style sheet

Inline Style:-

To customize only few elements on a web page, Inline styles can be applied.

Internal Style Sheet:-

An internal stylesheet is used when there is a need to stylize the multiple occurrences of an element on a web page with the same style. It is also known as an embedded style sheet.

External Style sheet:-

An external style sheet is used when multiple web pages are to be styled in the same manner to ensure the consistent look and feel across the entire website. An external style contains only the formatting rules for the desired HTML elements.

An external style sheet is a text document that consists of CSS formatting rules. To associate a web page with an external style sheet, you need to use the <LINK> tag inside the head section of the HTML document.

Identifying CSS selectors:-

1>     ID
2>     Class

Identifying the ID selector:-

CSS styles can be applied to an element with a specific ID by using an ID selector. An ID selector is used to identify an element that you need to style differently from the rest of the page. An ID selector is defined by using the (#) symbol.

Identifying the Class selector:-

A CSS styles can be applied to a group of elements by using the class selector. The class selector is used when there is a need to apply the same style on different types of elements in the HTML document. Multiple elements can belong to the same class. The class selector is defined by using a dot(.).

CSS Properties:-

The CSS properties can be divided into the following categories:-
1>     Font
2>     Text
3>     Link
4>     List
5>     Background

Font Properties:-





Text:-




List:-


Background:-


Link:-

The CSS Link properties are used to customize the appearance of links in the HTML document. A link can attain one of the following states in the HTML document.

Link: An unvisited link
Visited: A visited link
Hover: A link as it appears when the mouse is placed or moved over it.
Active: A link as it appears when it is clicked.

<style>
A:link
{
Color:blue;
}
A:visited
{
Color:red;
}
A:hover
{
Color:green;
}
A:active
{
Color:pink;
Text-decoration:underline;
}

</style>

Grouping Styles:-

Grouping styles are used to apply the same styles on more than one selector by combining them into a single group. The selectors in this group are separated with commas.

Syntax:-

Selector1, selector2
{
Property:value;
}

H1,p
{
Color:blue;
}

Controlling the Visibility of elements:-

CSS visibility styles can have the following categories:-

  1. Display
  2. Visibility


Display:-

The display property is used to set the appearance of an element on a web page.

Syntax:-
Display:none | block | inline

None:-

Hides an element from a web page without consuming any space.

Block:-

Shows the elements by consuming the full width available. It has a line break before and after it. Here, elements flow down the page in the normal flow.

Inline:-

Shows elements by consuming as much width as necessary. It does not have line breaks. Here, elements are laid out within the line. It is the default value that is set to the display property.

Example:-

Li
{
Display:inline;
List-style-type:none;
}

Visibility:-

The visibility property is used to specify whether an element should be visible or not.

Syntax:-

Visibility:hidden|visible

Hidden:-

Hides an element from a web page. However it will consume the space occupied by that element.

Visible:-

Shows the element on a web page. It is the default value assigned to the visibility property.

Positioning HTML Elements:-

1>     Position
2>     Float

Position:-

The position property is used to position an element on a web page.

Methods of position element:-

Static:-

In static positioning, elements are positioned according to the normal flow of the page.

Fixed:-

In fixed positioning, elements are positioned relative to the browser window. They will not change their position even if the browser window is scrolled.

Relative:-

An HTML element positioned relative to its normal position.

Absolute:-

An element can be placed at a fixed position on the web page. Its position will not be affected by the flow of other elements.

CSS Positioning properties:-



Float:-

The float property is used to place HTML elements to the left or right margin, in relation to the other HTML elements. It allows you to wrap the HTML elements around the floated element.

Syntax:-

Float:left|right|none

Clear:-

Whenever you apply the float property on any HTML element, all the elements after the floating element will be placed around it. This can be avoided by using the clear property. The clear property is used to turn off the float effect on HTML elements.

Syntax:-


Clear:both|left|right

No comments:

Post a Comment

Insert, Delete, Update Using Entity Framework and LINQ in ASP.NET 1> Create Database First 2> Create Table 3> Add ADO...