What is CSS??


Opening shirt CSS 3 vector illustration. Man open shirt to show "CSS" sign in flat cartoon style. Open shirt code, programmer concept

CSS:-CASCADING STYLED SHEETS

CSS is a language used to beautify a HTML webpage So that it can look attractive and more appealing to user. CSS is not a case sensitive language.

There are three ways to embedd CSS to HTML webpage:-

INLINE:- By using STYLE attribute in HTML elements.
INTERNAL:- By using  <style>......</style> element  in <head>......</head> section
EXTERNAL:-By using external CSS file.(* Extension for CSS file is .css *)


All the three ways of adding CSS are similar to each other and its execution is also similar
Programming language concept - PHP, CSS, XML, HTML, Javascript learning - book as laptop

let`s have a code snippet of all three types:-

All the following codes will have same output but in each code snippet we will use different method to embed CSS CODE.




Method 1:- INLINE:-

CODE:-

<html>
<head>
<title> any title </title>
</head>
<body>
<h1 style="color: blue;" >I am heading</h1>
<p style="color: red;">I am paragrah</p>
</body>
</html>



OUTPUT:-


Method 1:- INTERNAL:-

CODE:-

<html>
<head>
<title> CSS EXAMPLES </title>
<style>
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>
<h1>I am heading</h1>
<p>I am paragrah</p>
</body>
</html>



OUTPUT:-



Method 1:- EXTERNAL:-


CODE:-


1.EXTERNAL CSS FILE

Silver CSS file document icon. Download css button icon isolated on blue background. CSS file symbol. Vector Illustration

h1{
color: blue;
}
p{
color: red;
}


2.HTML:-


<html>
<head>
<title> CSS EXAMPLES </title>
</head>
<body>
<h1>I am heading</h1>
<p>I am paragrah</p>
</body>
</html>

OUTPUT:-


In all the above cases CSS is embeded by using different kind of method but the output is similar in case of all types it doesn`t matter what kind of method we are using, output always remain same.
CSS also have concept of classes which are useful when we need to apply similar kind of  properties
to multiple elements.


Previous Post
Next Post
Related Posts

0 comments: