CSS
( Cascading Style Sheet )

CSS or Cascading style sheet is the standard stylesheet language of web, used to style or formatting of an HTML document. With CSS, it is easier to build a website as css can style whole website using one single css file. CSS is a standard part of HTML5 It is compulsory to use css in HTML5 as it is one of the core web technology.

HTML can only build webpage structure, Css can style HTML. Thus CSS is used to enhance look and feel of HTML.

How to write css

CSS Syntax or CSS Code is started with CSS Selector followed by declaration block, i.e. { }. Inside declartion block, property:value pair is used. Colon : is used to separate property and value. To add next property value pair, use ; semi-colon. Only last semi-colon is option in declaration block. CSS Syntax is not case-sensitive, but prefer lowercase

selector
{ property1:value1;
property2:value2;
....
}

Example

p {
color:red;
font-size:20px;
background:red
}

CSS Types | in how many way we can write css

Based on how css is written in html page, css is divided into three types, Internal CSS, external css and inline css.

Type Description
Inline CSS CSS code is written inside html tag directly, in style attribute.
Internal CSS CSS Code is written inside <style> tag in head. Recommended for single page only.
External CSS CSS code is written in separate file with .css extension and <link> element is used to attach external css with html document. Used for multipage websites.

Inline CSS

Use inline css when you want to apply a style to a single occurrence of an element. Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute and value inside. 

        
exapmple

        
This text is red

        
This text is highlited

    
    
              
inline css

        <h2 style="color: red;">This text is red</h2>
        <h2 style="background: yellow;color:#000">This text is highlited</h2>

Internal CSS

Use internal stylesheet when you are working on single page website. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document. The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css". But in HTML5, type is optional.

Internal CSS

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident velit repellendus, ea libero reiciendis necessitatibus sunt qui consequatur odio exercitationem deleniti molestiae ex maxime cumque laborum excepturi ipsum laboriosam! Vel?

Internal css

    
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<meta charset="UTF-8">
<style>
    p{color: green}
    h1{ text-align:center; color:red}
</style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>The text in this paragraph will be green.</p>
    <p>This paragraph is also green.</p>
</body>
</html>

External CSS

Use an external stylesheet when you want to apply same style to whole website / several webpages. If we make one single change in an external css, the change is reflected on all the pages where the stylesheet is linked.

An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External stylesheets are linked using the <link> tag which should be placed in the head section of an HTML page. This tag includes two compulsory attributes.

Attributes in the link tag

  1. rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet"
  2. href -Denotes the name and location of the external stylesheet to be used.

EXample

    
        <!DOCTYPE html>	
        <html>
        <head>
        <title>External CSS</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <p>
        The text in this paragraph will be blue.
        </p>
        </body>
        </html>

CSS Comments

CSS Comments starts with /* and ends with */. CSS Syntax inside comments is not functional. We can store notes, or dummy code inside css comments.

Example

    
<style>                      
/* CSS Comments */
body{
font-family:arial;
font-size:14px;
}
</style>

Media Attribute in CSS

CSS Media Atttribute specifies the device media where css will run. Default value of media attribute is all. Others values for media attribute are screen and print. Here are some examples for media attribute

if you apply media atrribute in style then it will affect only that media like ' media : screen ' 

     
        <style media="screen">
        body{ 
            font-family:sans-serif;
        }
    </style>
    
    <style media="screen and (min-width:460px)">
        body{ 
            font-family:cursive;
        }
    </style>
    
    <style media="print">
        body{ 
            font-family:monospace;
        }
    </style>
    
            or
            
    <link href="css/style.css" rel="stylesheet" media="screen">
    <link href="css/style-print.css" rel="stylesheet" media="print">

Learn complete SEO

To rank your website on top of Google Search

SEO