How to add cascading style sheet(css)
There are three ways to apply cascading style sheets(CSS) that tells the browser how to display text and other content. The choice of CSS by designer depends on its particular use. The three ways are:
1. External
With the external stylesheet method, the stylesheet rules are defined in a separate file with a .css extension that is then referenced in the html document using the <link> tag. The tag is inserted in the <head> tag.
The <link> tag is used to show the relation between the current document and an external resource.
-
rel, which stands for ‘relation’, is a required attribute used to explicitly specify the relationship between the current document and the linked document. Its usage here communicates that the linked file is a stylesheet. -
typeis used to specify the media type of the linked resource. Media type states the nature and format of a document or file. It consists of a two-part identifier (type and subtype) separated by a slash(/). This is intended to help the web browser correctly process and display its content -
hrefis used to specify the location or URL of the external document.
The advantage of using an external spreadsheet is it can be referenced by multiple webpages, and it allows easy modification of the website as any update made to the .css file will affect all pages on the website.
2. Internal
Internal CSS allows the insertion of a <style> tag into an HTML document <head> tag where the
website’s styling rules are specified. It affects all the elements of the body section and is used when the styling rules are meant to only affect one webpage
Here’s how to create an internal CSS:
3. Inline
The inline style relates to a specific HTMl( HyperText Markup Language)tag- it uses a style attribute with CSS rules to style a specific page element. Inline CSS cannot be used to style pseudo-elements and their classes. For instance, Inline CSS cannot be used to style the state of a link.
Inline CSS is not advisable when working with large web pages as it is not flexible and it consumes a lot of time as compared to the Internal and External CSS.
Here is how Inline CSS can be added to a specific element:
The style attribute with different values is separated by a ; symbol and are inserted into a quotation mark.
This CSS style is best used for individual CSS updates that are frequently done across the website.
NOTE: In a situation where multiple styles are specified in an HTML document, inline CSS overrides internal and external CSS. In an instance where the properties for the same element(selector) is specified in the different stylesheets(internal and external) the value of the last read stylesheet will be applied.
RELATED TAGS
CONTRIBUTOR
Web360