The Three types of Style Sheets in HTML
There are
various ways in inserting CSS into a specific HTML document. This can be done
through the three types of style sheets which are: Inline, Internal, and
External.
Style Sheet No.1: Inline Style Sheet
The easiest
style sheet to go through in making an html document. Inline style is useful
when we need to define specific style for individual elements present on a web
page. Inline style sheets are declared with the style=attribute.
An example of an
Inline Style Sheet code:
Steps in
making an Inline style sheet:
1. Copy the
image above by typing it in a notepad
2. Open the
html document in a browser
Style Sheet
No.2: Internal Style Sheet
Internal CSS code is put in the
<head> section of
a particular page. The classes and IDs can be used to refer to the CSS code,
but they are only active on that particular page. CSS styles embedded this way
are downloaded each time the page loads so it may increase loading speed. However,
there are some cases when using internal style sheet is useful. One example
would be sending someone a page template – as everything is in one page, it is
a lot easier to see a preview. Its results has a unique feature than the inline
style.
An example of an Internal Style Sheet code:
Steps in making an Inline style sheet:
1. Copy the image above by typing it in a notepad
2. Open the html document in a browser
Style Sheet
No.3: External Style Sheet
An external style sheet is a separate file linked to an HTML
web page. It comes with a .css filename extension. All the styles that need to
be used on a website can be declared in the external style sheet. External
style sheets are an important tool from the webmaster’s perspective. This is
frequently used to apply one or more styles to many pages.
An example of an External
Style Sheet code:
Steps in making an
External Style Sheet:
1. Type the code on
the image above in a Notepad
2. Save the style
sheet with a .css extension.The file should be stored in the same location as
your HTML file/s
After making the css
code, let’s make the HTML file like the code below in a Notepad:
Those are the three types of style sheet in HTML,for starters,try this.I hope you have learn something in my blog ;-)
