CSS is a markup language which will formats webpages (HTML). CSS modify the texts, colors, fonts, and layouts of the web pages using a style sheet and tags. We can use style tags or different pages to apply CSS properties. Without CSS our web page looks like a normal html page. There are the following ways to apply CSS to HTML.
External CSS
Internal CSS
Inline CSS
Inline CSS uses to style a single element or line. The style attribute styles an element's inline. It undermines style sheets. Use inline cautiously.
Inline style sheets translate a minimum number of styles.
These methods can override local style specifications.
It's the most specific in a document.
These styles are straightforward to add and don't require a CSS selector. We can change the element's style as we're inputting several.
Every HTML element can have the right style property.
Inline CSS has no style-content separation.
Control classes can't handle multiple document elements.
These methods aren't reusable.
These styles can't be stored in one place, making editing difficult.
Inline CSS cannot style pseudo-classes and pseudo-codes.
Also, the browser cache isn't supported.
The following syntax shows the inline CSS
|
<body> <h1 style=" property:value;">CONTENT</h1> <p class="class_name" style=" property:value;">CONTENT</p> </body> |
The following example shows inline CSS
|
<!DOCTYPE html> <html> <head> </head> <body> <h1 id="tutor" style="color:red;background-color:yellow;"> INLINE SELECTOR </h1> <p style="color:blue;"> Welcome to CSS tutorial </p> <p id="tutor" style="color:green;"> rrtutor.com </p> </body> </html> |
 |
In the Internal css, the css code will be writes on the same web/html page.This style sheet is used to style HTML pages individually. This page's style affects all other aspects
The use of Internal CSS is when the whole page has one unique style for each element
Internal CSS only affects the page they're on.
Style sheets use IDs and classes.
Internal CSS doesn't require group uploads.
Internal CSS can be used to construct page layouts like CMS templates or email forms when CSS is included once.
Internal CSS can only affect its own page.
Internal CSS slows page loading
The following syntax shows the internal CSS.
|
<style> selector{ property: value; } </style> <body> <p id="id_name">CONTENT</p> </body> |
The following example shows the internal CSS
|
<!DOCTYPE html> <html> <head> <style> #tutor { border: 1px solid blue; color: red; } h1{ color: blue; } </style> </head> <body> <h1> INTERNAL CSS </h1> <p> Welcome to CSS tutorial </p> <p id="tutor"> rrtutors.com </p> </body> </html> |
Output
 |
This Type of style sheets add style to numerous pages. It's ideal because we can change the look of all website files with just one file. Here, we specify the CSS file code. Style.css is the correct extension.
All pages use external CSS's <link> element. HTML's head section must contain <link>
Here, we can create an external style sheet with .CSS extension and we can use this file on any web/html pages by including the css file
External CSS can be used on multiple records from a single style sheet. It's convenient and efficient and has code DRY.
In different situations, grouping methods and selectors build styles.
Classes can be developed and utilized in numerous HTML page components.
External CSS can sometimes speed up loading.
When there isn't enough styling to justify external sheets, it may not be sensible.
Stack exterior template.
Every document's style data requires a download.
Unloading external pages prevents document delivery.
The following syntax shows the external CSS
|
<link rel="stylesheet" type="text/CSS" href="path/filename.css"> |
The following example shows the internal CSS
style.css
|
#tutor { border: 1px solid blue; color: red; } h1{ color: blue; } |
index.html
|
<!DOCTYPE html> <html> <head> </head> <body> <link rel="stylesheet" type="text/CSS" href="path/style.css"> <h1> External CSS </h1> <p> Welcome to CSS tutorial </p> <p id="tutor"> rrtutors.com </p> </body> </html> |
Output
 |
Conclusion
The CSS includes an html page with different formats and methods. We can consist of CSS style for html tags as per requirement, we covered types of CSS and advantages and disadvantages of each type of CSS
Keywords