How to use the CSS file?
CSS (Cascading Style Sheets) can be applied in three main ways: inline, internal (or embedded), and external. Here’s a brief explanation of each along with examples:
1. Inline CSS: Inline CSS is applied directly within the HTML tags using the style attribute. This method is suitable for applying styles to individual element.
CSS
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p> |
2. Internal (Embedded) CSS: Internal or embedded CSS is placed within the HTML document, typically in the head section, using the <style> tag. This method is useful when applying styles to a specific page.
HTML
<!DOCTYPE html> <html> <head> <style> p { color: green; font-size: 18px; } </style> </head> <body> <p>This is a paragraph with internal styles.</p> </body> </html> |
External CSS: External CSS is stored in a separate CSS file and linked to the HTML document. This method allows for the separation of style and content, making it easier to maintain and apply consistent styles across multiple pages.
HTML
<!-- HTML document linking to the external CSS file --><!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <p>This is a paragraph with external styles.</p> </body> </html> |
CSS
/* File: styles.css *//* styles.css */p { color: red; font-size: 20px; } |
CSS File Format | .css Extension
CSS, or Cascading Style Sheets, is a style sheet language used in web development to describe the presentation and formatting of a document written in HTML or XML. CSS is essential for separating the content of a web page from its visual representation, allowing web developers to control the layout, colors, fonts, and other stylistic aspects of their web pages.
Table of Content
- Brief History
- Why you should use CSS?
- How CSS Solved a Big Problem?
- How to use the CSS file?
- Example
- Conclusion