CodeChef4U

Code recipes with master chefs.

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

3. March 2021 N.Kendre CSS (0)
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. 

Padding for html element using CSS

23. February 2021 N.Kendre CSS (0)
html element's padding area is the space between its content and its border.

The padding is a shorthand for following properties, and follow following sequence

1. padding-top
2. padding-right
3. padding-bottom
4. padding-left


Code example with all four values

. menu {
    padding: 5px -5px 10px -0px;
}

The CSS padding-top property sets the top padding of an element.

Padding top example 

.about-content {
    padding-top: 10px;
}


The CSS padding-bottom property sets the bottom padding of an element.

Padding bottom example 

.footer-content {
    padding-bottom: -5px;
}


The CSS padding-right property sets the right padding of an element.

Padding right example 

 .left-menu{ 
    padding-right:2em;
}


The CSS padding-left property sets the left padding of an element.

Padding left example  

.right-content{
    padding-left:2%;
} 

Set color and width for border using CSS

22. February 2021 N.Kendre CSS (0)

The border-width property  

The border-width property sets the width of an element's four borders.

border width property values,

border-width: medium|thin|thick|length|initial|inherit;

Code example 

div.dashboard {
    border-width: medium;
}

The border-color property

The border-color property sets the color of an element's four borders.

Code example 

 div.dashboard {
    border-width: medium;
    border-color:gray;
}