CSS – Introduction

CSS stands for Cascading Style Sheets. describes how elements are to be displayed on website. Simply CSS is used to prepare a layout for your web page. Types of CSS Inline CSS Inline CSS is used to handle for the single element at a time. Inline CSS will place in the same line along with your HTML code. Example

Welcome to CSS World !!!

Internal CSS Internal CSS is used to multiple elements at a time. This method can be good if you need to style only one page, or if you want different pages to have varying styles. Example:


Enter Name :
Enter Email : External CSS This is the same as Internal CSS, the only difference between internal and external css is that you can handle entire website using External CSS while Internal could work on the same page only. You can link to the file externally by placing one of the following links in the head section of every HTML file. 37
Example: This means, that if you need to modify the design of all your pages, you only need to edit one css file to make global changes to the entire website.

CSS Selectors The ID Selectors
You can define style rules based on the id attribute of the elements. The ID Selectors denoted by # keyword Example
#box { color: #000000; } Grouping Selectors
You can apply a style to many selectors by separate selectors with a comma. Example: h1, h2, h3 { color: red; text-transform: lowercase; font-size:15px; } This rule will be applicable to h1, h2 and h3 element. The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. Example:
input[type=”text”] { color: red; width:300px;
The advantage to this method is that the these properties will applied only to the text boxes and not to button or radio button. (Because if we will create a rule of input only then it will cover all elements starts with input tag). The Child Selectors
The Child Selectors are very similar to descendants but have different functionality. Example:
<style> body > p { font-size:18px; } </style> This rule will render all the paragraphs font in 18px if they are a direct child of the <body> element. Other paragraphs would not have any effect of this rule. The Universal Selectors
The Universal Selectors are used to cover all elements within a document so the same is also called as page properties

Leave a Reply

Your email address will not be published.

Enjoy the tutorial? Please spread the word :)

Follow by Email