CSS – Introduction

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 manage single element at a time. You can place the Inline CSS in the same line along with your HTML.

Example

<input type=”button” value=”Login” style=”background-color:blue”>

<h2 style=”color:red”>Welcome to CSS World !!! </h2>

<input type=”text”  style=”width:160px; border:solid 1px red”>

Internal CSS

Internal CSS is used to manage 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:

<html>

<head>

<style type=”text/css”>

.myclass

{

width:200px;

height:30px;

background-color:gray;

}

</style>

</head>

<body>

Enter Name : <input type=”text” class=”myclass”> <br>

Enter Email : <input type=”text” class=”myclass”>

</body>

</html>

External CSS

This is the same as Internal CSS, the only difference between internal and external css is that you can manage 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.

<link rel=”stylesheet”  type=”text/css” href=“CSS File Path Here” />

Example:

<link rel=”stylesheet”  type=”text/css” href=“CSS File Path Here” />

<link rel=”stylesheet”  type=”text/css” href=“master.css” />

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.

Text Properties

Properties Values
Color color name, hexadecimal no. or RGB  code  Example : red, #ff0000, rgb(255, 0, 0)
text-align Left, right, center, justify
text-decoration None, underline, overline, line through, blink
text-indent Length, percentage (40%, 20%…)
text-transform None, capitalize, lowercase, uppercase
letter-spacing normal, any lenth (40, 50..)

 

Font Properties

Properties Values
Font-Family

 

family-name  Example : font-family: Verdana, sans-serif;
Font-Size

 

xx-large, x-large, larger, large, medium, small, smaller, x-small, xx-small, length, %
Font-Style

 

Normal, italic, oblique
Font-Weight lighter, normal, 100,200….900, bold, bolder

Height, Width Properties

Properties Values
Height

 

Auto, length, %
Line-height

 

Normal, number, length, %
Max-height

 

None, length, %
Min-height length, %
Max-width & Max-height None, length, %

Border Properties

Properties Values
Border

 

Border:2px red dotted;

 

Border-color

 

Border-color:red;
Border-style

 

Dashed, dotted, solid, double, groove, hidden, insert, outset etc..
Border (position) Border-left, border-right, border-top, border-bottom

 

 

 

Padding & Margin Properties

Properties Values
Padding

 

Padding:10px;

 

Padding-left

 

Padding-left:10px; same as right, top & Bottom
Margin

 

Margin:10px;
Margin-left Margin-left:20px; same as right, top & Bottom

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/09/16/css-introduction-2
YouTube41
YouTube