CSS was introduced by the World Wide Web Consortium (W3C) and its supported by all major browsers. Styles define, as to how to display HTML elements and are stored in files with .CSS extension. These are saved in external files and will save a lot of re-work as it can be reusable and capable in changing the appearance and layout of all the pages in our Application/Webpages, just by editing a single CSS document. It also supports Multiple style definitions by having them cascaded into one. It allows developers to control the style and layout of multiple Web pages all at once.
As a Web developer we can define a style for each HTML element and apply it to as many Web pages as we want. To make a global change, we simply have to change the style, and all elements in the Web will be updated automatically.
When there is more than one style specified for an HTML element, then, an inline style (the specification inside an HTML element) would have the highest priority and will override the other style declarations, which would be a style declared inside the <head> tag, in an external style sheet, or in a browser.
The CSS declaration is split into three parts: selector, property and value:
selector {property: value}
The selector is the element that needs to be defined. The property is the attribute to change and each property shall have a value. The property and value will be within curly braces and separated by a colon.
eg. body {color: blue}
If there are multiple words for a value then values need to be mentioned within quotes.
[sourcecode language='css']
p {font-family: “times new roman”}
[/sourcecode]
For specifying more than one property, we must separate each pair of property and its values with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:
[sourcecode language='css']
p {text-align:center;color:red}
[/sourcecode]
The best practice will be to describe each property in a single line if more than one property is to be specified.
[sourcecode language='css']
p
{
text-align: left;
color: blue;
font-family: times
}
[/sourcecode]
Usage of CSS Styles in different ways
By Grouping
We can even group certain selectors for which the same style is to be specified. For implementing this we need to separate each selector by comma.
In the example below we can group all the elements.
All elements will be displayed in red text color:
[sourcecode language='css']
para1,para2,para3
{
color: red
}
[/sourcecode]
By using class Selector
Class selector is used to define different styles for the same type of HTML element.
If we would like to have two types of paragraphs in your document: Say for instance One right-aligned paragraph, and another center-aligned. We can declare it as
[sourcecode language='css']
p.right {text-align: right}
p.center {text-align: center}
[/sourcecode]
And can use in our HTML code as
This paragraph will be right-aligned
[sourcecode language='html']
[/sourcecode]
This paragraph will be center-aligned
[sourcecode language='html']
[/sourcecode]
Note: To apply more than one class per given element, the syntax is:
[sourcecode language='html']
This is a paragraph.
[/sourcecode]
The paragraph above will be styled by the class “center” AND the class “bold”.
We can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class=”center” will be center-aligned:
[sourcecode language='css']
.center {text-align: center}
[/sourcecode]
In the below code both the h1 element and the p element have class=”center”. This means that both elements will follow the rules in the “.center” selector:
[sourcecode language='html']
This heading will be center-aligned
This paragraph will also be center-aligned.
[/sourcecode]
We can set style rule to HTML elements for a particular attribute. This will match all input elements that has a type attribute with a value of “text”:
[sourcecode language='html']
input[type="text"] {background-color: blue}
[/sourcecode]
By using id selector
id selector can also be used to define styles for HTML elements. The id selector is defined using # symbol.
The style rule below will match the element that has an id attribute with a value of “green”:
[sourcecode language='css']
#red {color: red}
[/sourcecode]
The style rule below will match the p element that has an id with a value of “para”:
[sourcecode language='css']
p#para
{
text-align: center;
color: red
}
[/sourcecode]
Comments are mentioned in CSS within the tag /* */ which would explain the purpose or any other related information
about the code.
[sourcecode language='css']
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
[/sourcecode]
Different ways of inserting CSS
Style sheet can be inserted into webpages in three different ways : External Style Sheets, Internal Style Sheet or Inline Styles.
External style sheet
External style sheet can be made use when a same style is to applied across several pages or application. The whole look and feel of the application could be changed by just making changes in a single file. Each page is to be linked to the style sheet using the <link> tag.
The <link> tag is to be present inside the head section:
[sourcecode language='html']
[/sourcecode]
Thus the browser would read the style definitions from the specified css file, and would display the web pages
accordingly.
Internal Style Sheet
An internal style sheet is ideal to use when a single document needs to have a separate style. Internal styles are defined in the head section of the document by making using of the <style> tag
[sourcecode language='html']
[/sourcecode]
Inline Styles
An inline style is very clumsy as it mixes content with presentation. This can be made use only when a single occurrence of an element is to have a style. To use inline styles the style attribute is to be made use in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the
left margin of a paragraph:
[sourcecode language='html']
Content of the paragraph
[/sourcecode]
Usage of Multiple Style Sheets
If some properties has been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
[sourcecode language='css']
h3
{
color: red;
text-align: left;
font-size: 10pt
}
[/sourcecode]
And an internal style sheet has these properties for the h3 selector:
[sourcecode language='css']
h3
{
text-align: right;
font-size: 20pt
}
[/sourcecode]
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
[sourcecode language='css']
color: red;
text-align: right;
font-size: 20pt
[/sourcecode]
The color would be inherited from the external style sheet and the text-alignment and the font-size will be replaced by the internal style sheet.
Leave a Reply