The Cascading Style Sheet (CSS) is used to set the style on web pages that contain HTML elements.
It sets the background color, font size, font family, color, etc. owned by the elements on a web page.
(Image Source - Google Images)
There are three types of CSS :
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with the element known as Inline CSS. This type of style is specified within an HTML tag using the style attribute.
Example:
<!DOCTYPE html><html><head><title>Inline CSS</title></head><body><p style = "color:#009900; font-size:50px;font-style:italic; text-align:center;">Hello World...</p></body></html>
Internal or Embedded CSS: This can be used when a single HTML document must have a unique style. The CSS rule set must be inside the HTML file in the main section, that is, the CSS is embedded inside the HTML file.
Example:
<!DOCTYPE html><html><head><title>Internal CSS</title><style>.main {text-align:center;}.text {color:#009900;font-size:50px;font-weight:bold;}.sub_text {font-style:bold;font-size:20px;}</style></head><body><div class = "main"><div class ="text">Demo Text</div><div class ="sub_text">Hello World</div></div></body></html>
External CSS: External CSS contains a separate CSS file that contains only style properties with the help of tag attributes (eg class, id, header, ... etc.). CSS property is written in a separate file with a .css extension and must be linked to the HTML document using the link tag. This means that for each element, the style can be configured only once and will be applied on all web pages.
Example: The file below contains the CSS property. This file is saved with the .css extension. For example - style.css
body {background-color:powderblue;}.main {text-align:center;}.text {color:#009900;font-size:50px;font-weight:bold;}#sub_text {font-style:bold;font-size:20px;}
Below is the HTML file that the created external style sheet is using
- The link tag is used to link the external style sheet to the HTML web page.
- The href attribute is used to specify the location of the external style sheet file.
<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css"/></head><body><div class = "main"><div class ="text">Demo Text</div><div id ="sub_text">Hello World</div></div></body></html>
CSS Properties: Inline CSS has the highest priority, then comes Internal / Embedded followed by External CSS, which has the lowest priority. Multiple stylesheets can be defined on one page. If the styles are defined in several stylesheets for an HTML tag, the following order will be followed.
- Because Inline has the highest priority, Inline styles override any styles defined in the internal and external style sheets.
- Internal or Embedded ranks second on the priority list and overrides styles on the external style sheet.
- External style sheets have the lowest priority. If there are no styles defined in the internal or inline style sheet, the rules in the external style sheet apply to HTML tags.
Comments
Post a Comment