When we load some page in browser. First of all it reads its head part, where we have usually placed all of our JavaScript code. It loads all of the functions first and then acts accordingly.
Same as, when the browser loads a page, it reads the style sheet first and then translate the page according to the styles mentioned in the style sheet.
There are three ways to integrate CSS into web pages:
Same as, when the browser loads a page, it reads the style sheet first and then translate the page according to the styles mentioned in the style sheet.
There are three ways to integrate CSS into web pages:
- External Style Sheet
- Internal Style Sheet
- Inline Style
External Style Sheet:
External Style sheet is always ideal when the style is being used on whole website. By using external style sheet we can change the whole look of the website by just changing a single page. So it's ideal when we ate creating some different color schemes on a site for users to select.
An External style sheet is a simple notepad file with no HTML tags and with extension .css .
To use external style sheet we must provide a link to the style sheet. The link to the style sheet goes inside the <link> tags in the head section.
Suppose we have a file named styles.css . To insert it into our page provide the link to the style sheet as follows:
Below is the example of an external style sheet named styles.css
Internal Style Sheet:
When we have to define some style to a single page, the Internal Style Sheet is best to use. We define Internal Style Sheet in head section in <style>...</style> tags.
Below is the Example of internal Style Sheet:
Inline Style Sheet:
Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in browser (a default value). 
For detail you can read: http://www.w3.org/TR/html401/present/styles.html
Muhammad Arslan Aslam
I am a Full Time Student and occasional blogger. Software Engineering student with wide experience and interest in Front-End Web Development. You can find me on my profiles listed below and can get in touch any time.
Get Free Email Updates to your Inbox!
Post a Comment
Suggestions will be greeted.