Types of CSS
Inline Style CSS
Inline Style can be assigned to the style attribute of any html tags.
|
1 |
<tag style = “attribute: value”>…..</tag> |
“tag style = “attribute: value”” specifies the attribute and its value for some tags’s contents.
Example
|
1 2 3 |
<html> <p style =”color:blue;font-family:Calibre;font-size:30px”>Text Sample</p> </html> |
Output:
Text Sample
Explanation:
“color:blue;font-family:Calibre;font-size:30pt” specifies the text color as blue, font family Calibre, and font size as 30pt.
Note: Inline Style is not recommended to use because it affects the whole CC layout.
Internal Style CSS
Internal Style CSS is a standard CSS which is most frequently used in HTML and CSS file: The syntax looks like this:
|
1 2 3 |
<style type = “text/css”> ……….. </style> |
Example
|
1 2 3 4 5 6 7 8 9 10 |
<html> <style type = “text/css”> /*declares an external style css */ h2{ color : orange } p{font-size: 18pt} </style> <body> <h2>Hello World</h2> <p>Hello Delhi</p> </body> </html> |
Output:
Hello World
Hello Delhi
Explanation:
<style type = “text/css”>….</style> is an internal style CSS syntax, decalring an internal css.
“h2{ color : orange } “ specifies the font color for tag
“<h2>Hello World</h2>”.
“p{font-size: 18pt}” specifies the font size for tag
“<p>Hello Delhi</p>”.
CSS uses /* and */ as comment.
/*declares an external style css */ is a css comment.
External CSS
With external CSS, you’ll link your web pages to an external .css file.This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, you can change your entire site at once.
HTML link with external style sheet by linking
|
1 |
<link rel="stylesheet" type="text/css" href="file_name.css"> |
in <head>…………………………….</head> is done.
Example
style.css file
|
1 2 3 4 5 |
.post{ color:#066; font-family:Tahoma; text-align:justify; } |
index.html file
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>External CSS Example</title> </head> <body> <h1>www.phpgurukul.com</h1> <p class="post"> HP is a server-side scripting language designed specifically for the web. Within an HTML page, you can embed PHP code that will be executed each time the page is visited. Your PHP code is interpreted at the web server and generates HTML or other output that the visitor will see. </body> </html> |
Output
