CSS Basics
CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension.
CSS helps to change formatting of any HTML element by just making changes at one place. All changes made would be reflected automatically to all of the web pages of the website in which that element appeared. Also, quality website requires a quality web hosting service provider.
CSS Rules
CSS Rules are the styles that we have to create in order to create style sheets. These rules define appearance of associated HTML element. The general form of CSS syntax is as follows:
Selector {property: value;}
Key Points
-
Selector is HTML element to which CSS rule is applied.
-
Property specifies the attribute that you want to change corresponding to the selector.
-
Property can take specified value.
-
Property and Value are separated by a colon (:).
-
Each declaration is separated by semi colon (;).
Following are examples of CSS rules:
P { color : red;} h1 (color : green; font-style : italic } body { color : cyan; font-family : Arial; font- style : 16pt}
Embedding CSS into HTML
Following are the four methods to add CSS to HTML documents.
-
Inline Style Sheets
-
Embedded Style Sheets
-
External Style Sheets
-
Imported Style Sheets
Inline Style Sheets
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property.
Syntax:
<Tagname STYLE = “ Declaration1 ; Declaration2 “> …. </Tagname>
Let’s consider the following example using Inline Style Sheets:
<p style="color: blue; text-align: left; font-size: 15pt"> Inline Style Sheets are included with HTML element i.e. they are placed inline with the element. To add inline CSS, we have to declare style attribute which can contain any CSS property. </p>
Output −
Embedded Style Sheets
Embedded Style Sheets are used to apply same appearance to all occurrence of a specific element. These are defined in <head> element by using the <style> element.
The <style> element must include type attribute. The value of type attribute specifies what type of syntax it includes when rendered by the browser.
Syntax
<head> <title> …. </title> <style type =”text/css”> …….CSS Rules/Styles…. </style> </head>
Let’s consider the following example using Embedded Style Sheets:
<style type="text/css"> p {color:green; text-align: left; font-size: 10pt} h1 { color: red; font-weight: bold} </style>
External Style Sheets
External Style Sheets are the separate .css files that contain the CSS rules. These files can be linked to any HTML documents using <link> tag with rel attribute.
Syntax:
<head> <link rel= “stylesheet” type=”text/css” href= “url of css file”> </head>
In order to create external css and link it to HTML document, follow the following steps:
-
First of all create a CSS file and define all CSS rules for several HTML elements. Let’s name this file as external.css.
p{ Color: orange; text-align: left; font-size: 10pt; } h1{ Color: orange; font-weight: bold; }
-
Now create HTML document and name it as externaldemo.html.
<html> <head> <title> External Style Sheets Demo </title> <link rel="stylesheet" type="text/css" href="external.css"> </head> <body> <h1> External Style Sheets</h1> <p>External Style Sheets are the separate .css files that contain the CSS rules.</p> </body> </html>
Imported Style Sheets
Imported Style Sheets allow us to import style rules from other style sheets. To import CSS rules we have to use @import before all the rules in a style sheet.
Syntax:
<head><title> Title Information </title> <style type=”text/css”> @import URL (cssfilepath) … CSS rules… </style> </head>
Let’s consider the following example using Inline Style Sheets:
<html> <head> <title> External Style Sheets Demo </title> <style> @import url(external.css); </style> </head> <body> <h1> External Style Sheets</h1> <p>External Style Sheets are the separate .css files that contain the CSS rules.</p> </body> </html>
Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We are independently owned and we have spent time and effort doing our best to offer you the most relevant and accurate information. All the "customer reviews" are posted by real webmasters (hosting customers) and we're not responsable for their opinions. Purchasing any service from the hosting companies listed on our site is your solely decision.
Statistics Panel
| Stats Panel | Last 24h | Last Month | Total |
| Articles | 0 | 95 | 5166 |
| News | 0 | 647 | 18356 |
| Hosting Sites | 0 | 1 | 2452 |
| Reviews | 0 | 26 | 1807 |
| Coupons | 0 | 0 | 561 |
