CSS

1. CSS Home 2. CSS Introduction 3. CSS Versions 4. CSS Extension 5. Adv.& Disadv of CSS 6. HTML v/s CSS 7. CSS Syntax 8. CSS Selector 9. Inserting CSS file 10. Class 11. ID 12. Div 13. Font 14. Font-size 15. Font-weight 16. Font-style 17. Font-variant 18. Text 19. Text-color 20. Text-decoration 21. Text-transform 22. Text-indent 23. CSS Color 24. Web Safe Color 25. Background-image 26. Background-repeat 27. Background-position 28. Background-attachment 29. Background-size 30. Background-origin 31. CSS Box Model 32. Padding 33. Padding-top 34. Padding-right 35. Padding-bottom 36. Padding-left 37. Margin 38. Margin-top 39. Margin-right 40. Margin-bottom 41. Margin-left 42. Margin Demonstration 43. Border 44. Border-style 45. Different Border-style 46. Border-width 47. Different Border-width 48. Border-color 49. Border-radius 50. Border-collapse 51. Border-spacing 52. Border-image 53. Border-bottom 54. Border-bottom-style 55. Border-bottom-width 56. Border-bottom-color 57. Border-bottom-left-radius 58. Border-bottom-right-radius 59. Border-top 60. Border-top-style 61. Border-top-width 62. Border-top-color 63. Border-top-left-radius 64. Border-top-right-radius 65. Border-right 66. Border-right-style 67. Border-right-width 68. Border-right-color 69. Border-left 70. Border-left-style 71. Border-left-width 72. Border-left-color 73. Ex.Padding,Border,Margin 74. List Style 75. List Style-type 76. List Style-position 77. List Style-image 78. Dimension Properties 79. Width 80. Max-width 81. Min-width 82. Height 83. Max-height 84. Min-height 85. Grouping Selector 86. Nesting Selector 87. Floating 88. Position 89. Pseudo Element 90. First-letter Pseudo 91. First-line-Pseudo 92. Before & After Pseudo 93. Pseudo-class Selector 94. tag 95. Image Gallery 96. Scrollbars 97. Display Property 98. Cursor Property 99. Caption-side Property 100. Transform Property 101. Interview Question and Answer part 1 102. Interview Question and Answer part 2 103. Interview Question and Answer part 3 104. Interview Question and Answer part 4 105. Interview Question and Answer part 5 106. Interview Question and Answer part 6 107. Interview Question and Answer part 7 108. Interview Question and Answer part 8
Pr.Pg Next Pg

Ways to insert CSS style tutorials

  • There are three ways you can apply CSS to an HTML document. These methods are such as:

    1. Inline style (the attribute style)

    2. Internal style sheet (the tag style)

    3. External style sheet (link to a style sheet)

 

1) Inline Style:

  • An Inline style sheet is a term that refers to style sheet information being applied to the current element.

  • Inline style sheet are should only be used where a particular style is not going to be repeated elsewhere on the page/site.

  • The definition is defined within the HTML tag in the body section of the HTML code. It must be redefined every time it is required

  • As inline style has to be defined every times, it loses its advantages and use this method sparingly.

 

Syntax: The syntax for inline styles is slightly simpler than that of Internal and External styles in that there is no selector and no curly brackets.

 

<element STYLE=" property:value">

 

Example: The following example shows, how to change the background and font color of a paragraph using Inline CSS Style
Output:
Example: The following example shows, how to set background using Inline CSS Style
Output:

 

2) Internal Style Sheet:

  • An internal style sheet should be used when a single document has a unique style.

  • You define internal styles in the head section of an HTML page, within <style> . </style> tag.

  • This could be useful, for less pages and each pages having different style requirements.

 

Example: Program to display use of internal CSS style sheet
Output:

 

3) External Style Sheet:

  • An external style sheet is a separate file with .css extension, Where we can declare all the styles that you want to use on your website.

  • External Style sheet is very useful when you want standard style applied to many web pages.

  • It also helps to change look of entire Web-site, just by changing one .css file.

  • The <link> element can be used to include an external style sheet file in your HTML document..

  • The <link> tag is placed within <head> . </head> section of webpage.

 

Syntax: The syntax of including external CSS file:

 

<head>

<link rel=StyleSheet type="text/css" href="external css file name " >

</head>

 

  • Where text/css: Specifies the style sheet language as a content-type . This attribute is mandatory.

  • And href: Specifies the style sheet file having Style rules. This attribute is a required.

Example: Consider a simple style sheet file with a name demostyle.css having the following rules:

 

demostyle.css

h1 {

color: #0000FF;

font-weight: normal;

text-transform: uppercase;

}

 

Example: Program the following example shows the use of External style sheet .
Output:
Pr.Pg border                                              Next Pg