Wednesday 12 August 2020

#9.2 Standard CSS used in HTML - Internal and External CSS

❗Here we are discussing Standard CSS used in HTML. The major part of CSS will be discussed later in CSS Blog.


Internal CSS 

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a  <style> element.


⭐Example of a sample HTML document with an Internal CSS:

Sample HTML document with internal CSS

Output of above Code
📌Here is Codepen link of above examples :- ðŸ”—https://codepen.io/arwazkhan189/pen/qBZOvpM

External CSS 

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page.

External style sheet can be referenced with a full URL or with a path relative to the current web page.

Example:-

  • Example uses a full URL to link a style sheet. <link rel="stylesheet"href="https://www.example.com/...../styles.css">

  • Example link to a style sheet located in css folder on the current website. <link rel="stylesheet"href="/css/styles.css">

  • Example link to a style sheet located in the same folder as the current page. <link rel="stylesheet"href="styles.css">

  • Example link to a style sheet located in previous folder on the current page. <link rel="stylesheet"href="../styles.css">



⭐Example of a sample HTML document with an External CSS:
Sample HTML document link with External Style Sheet

Output of above Code



📌Here is Codepen link of above examples:- 
CSS File -> 🔗https://codepen.io/arwazkhan189/pen/dyMYLPx     

❗How to link external Style Sheet in Code pen ?🔗https://wdforbeginner.blogspot.com/2020/08/quick-tips-3-how-to-link-external-style.html

⭐Example of a sample HTML document with an Internal CSS with Colors, different fonts and font-size,Borders, paddings , margins etc...



📌Here is Codepen link of above examples:-🔗 https://codepen.io/arwazkhan189/pen/gOraJOX


=======================================================================



Next we will learn about HTML Links  ...

Keep Learning and practice , practice and practice.. !!!

Follow me on Codepen ðŸ”—https://codepen.io/arwazkhan189

LIKE , COMMENT , SHARE , SUBSCRIBE  the Blog!
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)