CSS : What is CSS, Types of CSS, How we apply CSS in a website, Inline CSS, Internal CSS, External CSS, with pdf notes on CSS

By -

Cascading Style  Sheet (CSS)

CSS stands for cascading style sheet. It helps us to make webpage beautiful. In normal words we can say CSS is a beauty parlor of any simple HTML page. Let's see with an example:


These are two welcome notes for my website. First one have only HTML but in second we applied CSS to beautify it. You can easily notice a border and background colors in the second one.

I hope its clear to you that CSS is came into picture just to beautify a simple webpage.

Types of CSS:

On the basis of how they are applied to a website we have three types of CSS:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

How we apply CSS in a website:

Let's see a brief view on all three types of CSS in short and if you wanna understand them clearly kindly visit them by clicking on link above 

Inline CSS :                                                

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>
<body>
    <p style="font-family: Lucida Console; font-size: 20px; background-color: green;">
        This text have Inline CSS
    </p>
</body>
</html>

The above written code have inline css (To understand Inline CSS click here...........) 

Internal CSS:                                                

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
</head>
<body>
    <p>
        This text have Internal CSS
    </p>
</body>
<style type="text/css">
    p{font-family: Lucida Console; font-size: 20px; background-color: green;}
</style>
</html>

Above code have an Internal CSS applied in it (click here to learn Internal CSS............)

External CSS:                                    

<!DOCTYPE html>

<html>

<head>

    <title>External CSS</title>

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

</head>

<body>

    <p>

        This text have External CSS

    </p>

</body>

</html> 

You may have tries to run these code in your computer. And you found a result in Inline and internal css but did not found any styling in case of external CSS. This is because we don't write CSS code for external css inside HTML document. We create a separate file with aName.css and write the link of file in the head tag and write al css codes in the same. And the link we have written stylesheet.css does not exist. 

To read all three css click on the link below



Comments

Post a Comment

Most popular post

Heading in HTML

By -
Image
 Heading in HTML In the web page you are reading this HTML lesson you can see Heading clearly, and I hope you know well what is heading. Heading is something written on top of every topic, it tell us what we are going towrite inside the page or in the topic. In HTML we are having 6 different levels of headings ranging from <h1> to <h6> <h1> This is level 1 Heading <h1> <h2> This is level 2 Heading <h2> <h3> This is level 3 Heading <h3> <h4> This is level 4 Heading <h4> <h5> This is level 5 Heading <h5> <h6> This is level 6 Heading <h6>  By looking at above example you might have understood all six levels of headings    GET COMPLETE HTML COURSE FOR FREE  
Read more

Paragraph in Html

By -
Image
 Paragraph HTML is an markup language to create a webpage. In webpages we also need paragraphs. You all are familiar with word paragraph. To create a paragraph we use <p>..........</p> tag. Syntax: <html> <body> <p> This is an example paragraph </p> </body> </html>   Attributes of <p> tag We can use all inline css attributes in paragraph tag to decorate and also id & class to target in CSS file or in internal CSS.  Don't worry if you are getting trouble in understanding what are Inline CSS, Internal CSS, or CSS file, we will study them in very easy language and in deep soon. Let's first see a syntax with id & classes <html> <body> <p id="firstpara" class="firstpara"> This is an example paragraph </p> </body> </html>  Here what we did we just given an id and an class to target specific paragraph in Cascading Style Sheet(CSS) Click here to learn about CSS Click he...
Read more

Case Sensitivity

By -
Image
 Case Sensitivity What is Case Sensitive? Before knowing case sensitivity lets firstly know what is case.  ABCDEFGH........... these alphabets are written in Upper Case( Capital letters are termed as Upper case). Similar to those abcdef......... are Lower Case alphabets (small letters are known as lower case). Now any language which is sensitive about cases (upper case & lower case) are known as case sensitive language. If a language is case sensitive then, for that language BOOKS & books  are two different things. "CURRENTLY YOU ARE ON TECHNICALVINAYAK.BLOGSPOT.COM" (This line is written in upper case) "currently you are on technicalvinayak.blogspot.com" (This line is written in lower case) "Currently You ARe ON technicalVINayak.blogspot.com" (This line is niether in upper case nor in lower case but a case sensitive language treat it as a different thing. And for html or any other non case sensitive language all three are same) How case sen...
Read more