What is CSS and type with brief description.
We all are know about the HTML. Basically all the website are design using the HTML (that is called front-end web development). So When we are design a front-end that time we are use the HTML code. But the HTML is not only create the hole website front-end development with a good graphical design. To complete front-end development we are use the CSS(stands for Cascading Style Sheets).

So What is CSS and type with brief description

CSS stands for Cascading Style Sheets. The CSS can control HTML elements how they are displayed on web browser.
There are three way to write CSS for a website. Mean there are three types of CSS.

  • Inline styles
  • Embedded styles or Internal styles
  • External styles
  1. Inline styles: Inline styles are written directly in the tag and it only affect specific tag they are written the CSS. Syntax:style="" Example:
<a href="https://www.spectrumtech.in" style="color:red;text-decoration: underline;">Web Design</a>

Output: Web Design

Explain: Here the “style” tag content the CSS for the anchor tag. So when the browser display the link text then its display text color RED and the text underline.

2. Embedded styles or Internal styles: Embedded styles or Internal styles are written in the HTML HEAD section and this CSS affect the current HTML file where the CSS is present. Example:

<!DOCTYPE html>
<html>
<head>
<title>This is the title of the page.</title>
<style>
 .classname{color:red;}
 .blue{color:blue;}
</style>   
</head>
<body>
 <p class="classname">This is a paragraph.</p>
 <a href="https://www.spectrumtech.in" class="blue">This is a link.</a>
</body>
</html>

Output: This is a paragraph This is a link.

 

3. External styles: External styles are written outside of the HTML file in a separate document and then attached to various web documents. Now in this time most website use the External styles. How to link the External styles:

<link href='url' rel='stylesheet' type='text/css' />
how to write External styles or Internal styles

So here we discuss about the how to write basic CSS for External styles or Internal styles.
Both are same process using the “class name” or the “id name” or “attributes name” or the “tags name”. for the class name we are use the “.”(dot) before the classname for denoted the class like .classname , for ID use “#” like #id , for attribute like [attribute^=”value”] and tag name just use the tag name.
For define class and use:

Define Class and write CSS regarding this class Example: 
<a href="https://spectrumtech.in" class="classname">This is a link</a>
Example: .classname{color:red;}

For define ID and and write CSS regarding this ID with Example:
<a href="https://spectrumtech.in" id="IDname">This is a link.</a>
 Example:#IDname{color:red;}

How to write CSS using attribute Name:: 
<a href="https://spectrumtech.in" target="_blank">This is a link.</a>
 Example:a[target="_blank"] { color: black;}

How to write CSS using tag name:: 
<a href="https://spectrumtech.in" >This is a link.</a>
 Example:a{ color: black;}

*Notes: Most professional web designers are use a External styles to govern a site’s layout and design. The disadvantage to external style sheets is that every page will use every style in the CSS sheet, So some of pages will load a much larger CSS page than that actually required. But Advantage : for a website have one CSS file and its load once for the all pages because the browser can cache the CSS file for first time and that case the CSS file can’t hit second time and the website load quickly.

I hope this article helped you to learn what is CSS and types?.