Codechef4u is a community for computer professionals,by computer professionals,just like you; who loves sharing and helping each others,Join them
Share your post

Different types of CSS files

There are three different types of CSS Styles

Internal CSS

Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document.

 

Advantage of internal CSS
You don't need to create and upload a separate document as in the external style.
You can add reusable CSS classes.
 
Disadvantages
Hard to maintain CSS code from all pages

 

Code sample,

<!DOCTYPE html >
<html >
<head >
<style >
 
H2 {
    Font-size:14px;
    padding: 5px;
}
 
</style >
</head >
<body >

 

External CSS

With external CSS, you will link your web pages to an external .css file, which can be created by any text editor in your device.

<link rel="stylesheet" type="text/css" href="site.css" / > 

 

Advantages
Clean code and easy for maintenance
 
Disadvantages
Your pages may not be rendered correctly until the external CSS is loaded.
Uploading or linking to multiple CSS files can increase your site’s download time.

 

 

Inline CSS

Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag, without using selectors.


<p style="text-align:left;"> left aside text .</p>
 
Advantages
You can easily and quickly insert CSS rules to an HTML page
You don’t need to create and upload a separate document as in the external style.
Disadvantages
Adding CSS rules to every HTML element is time-consuming and makes your HTML structure messy. 

CSS 3 and CSS3 features

CSS

Cascading Style Sheets (CSS) is a simple design language released in 1996, CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS 3

CSS3 version introduced new features that allowed developers to style HTML elements with less CSS code.

CSS3 features

Easy to use 

CSS3 allows developers to style HTML elements easier.

Responsive design           

CSS3 is the latest version, hence it supports responsive design.

Box Shadow

One of the CSS3 new features is the box-shadow property that adds a shadow to an element. Instead of using multiple images around an item, this property lets you add shadow with a short line of code.

Separate reusable modules       

CSS3 can be breakdown into modules.

Attribute Selectors

CSS3 also introduced new selectors in addition to the ones in CSS2. Instead of applying IDs or classes for styling, developers can select HTML elements according to their attributes.

Performance and speed  

CSS3 is faster than basic CSS.

Animation    

Animation and 3D transformations are supported

Compatibility          

CSS3 is backwards-compatible with former CSS versions. It means that CSS3 features work on web pages using older CSS. Browsers that support CSS2 also represent the modifications with CSS3..

Color 

CSS3 supports HSL RGBA, HSLA and the gradient colors. i.e. #fff supported.

Rounded corners  

CSS3 provide codes for setting rounded gradients and corners

Text shadow and effects 

CSS3 has many advance features like text shadows, visual effects, and a wide range of font style and color.

Opacity         

One of the CSS3 properties called opacity makes elements see-through or completely transparent.

Set color and direction of text with CSS properties

Following CSS text formatting properties are used to set color and direction of text

Text color

Text-color property is used to set the color of the text.

Code example

/*color hex value(white)*/
.btn-custom {
    color: #fff;
}
/*color name value(green)*/
.btn-success{
    color:green;
}

Text direction

Text direction property is used to set the direction of the text.

Following are text direction CSS values

Ltr :Text direction goes from left-to-right, this is default value.          
Rtl :Text direction goes from right-to-left
Initial:Sets this property to its default value. Read about initial         
Inherit: Inherits this property from its parent element. Read about inherit

Code example

/*Set the text direction to "right-to-left":*/ 
div.right-to-left {
    direction: rtl;
}