External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.
External CSS Example:
This example shows the use of external CSS with the help of an HTML document.
html
<!DOCTYPE html><html><head> <title>External CSS</title> <link rel="stylesheet" href="style.css"></head><body> <div class="main"> <div class="GFG">w3wiki</div> <div id="geeks"> A computer science portal for geeks </div> </div></body></html> |
CSS
body { background-color: powderblue;}.main { text-align: center;}.GFG { color: #009900; font-size: 50px; font-weight: bold;}#geeks { font-style: bold; font-size: 20px;} |
Output:
External CSS Example Explanation:
In the above example we are following these steps
- We use External CSS file “style.css” in which we defines body background color as powderblue.
- By using .main class aligns text to the center.
- .GFG class sets text color to green, font size to 50px, and font weight to bold.
- #geeks id applies bold font style and 20px font size.
Types of CSS (Cascading Style Sheet)
Cascading Style Sheets (CSS) is a language used to style web pages that contain HTML elements, defining how elements are displayed on webpages, including layout, colors, fonts, and other properties of the elements on a web page. CSS works by targeting HTML elements and applying style rules to define how they should be displayed, including properties like color, size, layout, and positioning.
There are three types of CSS which are given below:
Table of Content
- Inline CSS
- Internal or Embedded CSS
- External CSS