CSS enriches the presentation of HTML elements within a webpage. Inline styling, executed through the style attribute within tags, is generally discouraged. Internal stylesheets, facilitated by the <style> tag, allow for the declaration of rules pertinent to specific sections of the page. Additionally, external stylesheets can be incorporated via the <link> tag, linking to an external CSS file and implementing its rules across the document. This discussion encompasses the application of all three attachment methods.
Utilizing External Stylesheets
To employ an external stylesheet, incorporate the link attribute within the document’s head:
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
External stylesheets can also be sourced from websites through a content delivery network (CDN), such as Bootstrap:
<head> <link rel="stylesheet" href="<https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head>
CDN support for various frameworks is typically available on their respective websites.
Internal Stylesheet
CSS elements can also be included internally using the <style> tag:
<head> <style type="text/css"> body { background-color: blue; } </style> </head>
Multiple internal stylesheets can be included within a program:
<head> <style type="text/css"> body { background-color: blue; } </style> <style type="text/css"> p { background-color: red; } </style> </head>
Inline Styling
Specific elements can be styled using the style attribute:
<span style=”color: red”>This text will be red.</span>
Note: Inline styling is discouraged as it hampers the separation of content and presentation.
Multiple Stylesheets
Multiple stylesheets can be loaded, with later files and declarations taking precedence over earlier ones:
<head> <link rel=”stylesheet” type=”text/css” href=”style1.css”> <link rel=”stylesheet” type=”text/css” href=”style2.css”> </head>
In cases of conflicting rules, the background color of the document, for example, will be determined by the latter declaration.
In above case, if style1 has property of background color “Black” and style2 has property of background color “Yellow”, as the last declaration is for style2, the background color will be Yellow.