Uma's Blog

CSS Types:

We can write the css code in 4 different ways.

Inline css style.
Internal css style.
External style sheet.
@import style sheet.

1) In-line css style:
i) Writing css code in the element using style attribute.

ii) In-line style sheet priority is high.

iii) In-line css style consists of 4 parts.

a) Selector (Element).

b) Style Attribute.

c) Property.

d) Value.

Syntax:

h2 style="font-size: 12px;font-color: orange;"

   Example:
<p style="color: blue;font-size: 10px">This is paragraph</p>

  Code:

Output:

  2) Internal css style:
  i) Writing css code in the <head>...</head> element.
ii) Using <style type="text/css">...</style>.
iii) It consists of 3 parts.
a) Selector(Element,Id,Class)
b) Property.
c) Value.

Syntax:
i) Element
<style type="text/css">
body {
background-color: #00001;
}
</style>

ii) Id
  <style type="text/css">
#id1 {
color: red;
font-size: 16px;
}
</style>
<p id="id1">Paragraph</p>

iii) Class
   <style type="text/css">
.color {
background-color: #00001;
color: maroon;
}
</style>

   Code:

Output:

3) External style sheet:

  i) External style sheet represents .css extension file.
ii) We can manage all web pages using single css file.
iii) External style sheet consists of 4 parts.
a) External source link.
b) Selector (Element, Id, Class)
c) Property.
d) Value.

Syntax:
<head>
<link rel="stylesheet" type="text/css" href="xyz.css">
</head>
xyz.css
body {
background-color: #00001;
}
h1 {
color: pink;
text-align: center;
}

  Code:
css file:

html file:

Output:

  4) @import style sheet:
i) This is another way to load css file.
ii) @import css style defined with in the style element of body element.
iii) It consists of 3 parts.
a) @import (keyword).
b) URL.
c) Css file path.

Syntax:
  <head>
<style type="text/css">
@import url("style.css");
</style>
</head>
style.css
p {
color: purple;
margin-left: 20px;
}