×

How To Use CSS

You can use CSS(Cascading Style Sheet) in four ways. These are given below: The given above CSS type, in which various technique will be used. These are different from each other and their different advantages.
  • Embedded or Internal CSS
  • Inline style
  • External style sheet
  • Imported CSS

Embedded or Internal Style Sheet

An Embedded or Internal Style Sheet is used in only one single page. It is define within <style> element inside the <head> section. Let us see an example of CSS embedded or internal style sheet:

Example of Internal Style Sheet

<head>  
<style>  
body {    
      background-color: white;    
      }    
p{    
    color: black;    
    border:2px solid red;    
}     
</style>  
</head>
Try Now

Inline Style Sheet

An Inline Style Sheet used with a unique style for a single element. You must have to used style attribute to the element.

sheds plans Hip Roof Shed Plans 10×18 Clerestory Dormer Shed Plans 20×12 Let us see an example of CSS inline style sheet:

<p  style="text-align:center;  color:blue">  We  are learning  how to use inline Style </p>

External Style Sheet

In External Style Sheet can use <linl> element to include an external stylesheet file. The style file extension must be .css . you can access style sheet in different web pages by using link the style sheet. Let us see an example of CSS external style sheet:
<head>  
   <link type = "text/css" href = "style.css">  
</head>
/*========= Save it name with style.css ===========*/  
body{  
     Background-color: gray;  
     }  
h1 {  
   color: blue;  
   text-transform: lowercase;  
   }

Import Style Sheet

In Import Style Sheet, @import is used to import an external stylesheet with in <head> element. Let us see an example of CSS import style sheet:
<head>  
   @import "importedstyle.css";  
</head>

Related Topics

CSS Browser Support

The desk underneath lists of all CSS properties and the way each belongs to it is supported in the generally unique browsers: - The quantity to the right of the browser...

2 minutes read.

CSS Opacity

The CSS Opacity property is used to set the clarity of the image. It is defined as degree and specify the transparency of an element. Note: Opacity value will be less...

1 minute read.

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of...

5 minutes read.

CSS Text-align

Text-align The text-align property of CSS sets the table-cell box’s horizontal alignment or any block element. The text-align property is the same as the CSS property vertical-align but towards any horizontal...

1 minute read.

CSS Masking

CSS Masking The CSS mask property is applied to hide a component with the use of the masking or clipping an image at any specific point. The masking depicts the use...

3 minutes read.

CSS Hover

CSS Hover: CSS :hover is used to select the various elements whenever we point the mouse on these elements. We can also use this selector on all the HTML elements,...

3 minutes read.

CSS Letter-spacing

CSS Letter-spacing: Letter-spacing attribute is applied to manage the space among all letters within the block or element of the text. This property sets the behavior of the spacing between...

2 minutes read.

What is Bootstrap CSS?

Bootstrap: - Bootstrap is a CSS framework that is free to use and is used for the front-end development of the website in a faster and easier way. Bootstrap was released as...

3 minutes read.

How to make smooth bounce animation using CSS

The smooth bouncing animation project is done with the help of HTML and CSS. This project gives so much fun and excitement to the users. What is HTML? The HTML or HyperText...

2 minutes read.

Combine Background Image with Gradient Overlay

With the help of CSS gradient, we can display smooth and straightforward transitions between two or more colours. We can add the background images by combining the gradient property with...

2 minutes read.

CSS Animation

CSS Animation: The animation property of CSS is applied to make animation over any webpage. It is used as the animation replacement made by JavaScript and Flash. Rules of CSS3 @keyframes The...

3 minutes read.

What is a CSS File?

What is a CSS File and How to use it in Html? CSS: - CSS stands for Cascading Style Sheet. CSS is a file of style sheets that describe the presentation of...

4 minutes read.

Difference between CSS Grid and CSS Flexbox

The way that information is arranged on a website reveals a lot about you or your company. Organizational abilities are just as important as having the right materials. The design...

3 minutes read.

CSS Text-Overflow

Introduction: The text-overflow property of CSS is used to format the text which is overflowing the boundaries of the container. This property helps user to clip the text, to display the...

5 minutes read.

Untitled Reusable Block

  ...

1 minute read.

CSS Overlay

CSS Overlay: It measures to cover-up something’s surface along with a coating. CSS overlay sets anything over the top area of other things. It creates a web-page more attractive. The...

8 minutes read.

CSS Button Style

CSS button style: Using CSS properties, we can easily modify the default BUTTON and enhance its appearances using simple graphic commands. TYPES OF BUTTON STYLE: - Program to change button using CSS ...

35 minutes read.

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.

CSS Background-clip

CSS Background-clip: The background-clip property describes the background’s painting area. It limits an area where the image or color of the background appears by using any clipping box. Everything will...

2 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.