Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
internal css
external css
inline css

How to add cascading style sheet(css)

Web360

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.

Reference to the external spreadsheet using <link> 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.

  • type is 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

  • href is 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:

<style> tag is the focus

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:

Code snippet of inline styling. h1 tag is the focus.

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

css
internal css
external css
inline css
RELATED COURSES

View all Courses

Keep Exploring