- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
Where to Write CSS Code in HTML
The CSS code can be written in these places/ways, to apply styles to HTML elements:
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
The inline CSS can be used to style particular HTML element. To write inline CSS, use following syntax:
<ELEMENT style="property1:value1; property2:value2; ...; propertyN:valueN;"></ELEMENT>
For example:
<!DOCTYPE html> <html> <body> <h2>Where to Write Inline CSS Code</h2> <p>The paragraph given below is styled using inline CSS.</p> <p style="background-color: purple; color: white; padding: 12px;">CODESCRACKER</p> </body> </html>
Where to Write Inline CSS Code
The paragraph given below is styled using inline CSS.
CODESCRACKER
Note - The syntax to write CSS code is described in its separate tutorial.
Main Advantage of Inline CSS
- CSS code written as inline CSS to an HTML element, has the highest precedence over internal and external CSS
Main Disadvantages of Inline CSS
- Inline CSS increases the difficulty to maintain, and the download time
- Pseudo-elements and/or Pseudo-classes can not be used using Inline CSS
Internal CSS
The internal CSS are be used to style particular web page. The internal CSS are written inside the STYLE tag, that must be inside the HEAD of HTML document. Here is the syntax:
<!DOCTYPE html> <html> <head> <style type="text/css"> Selector1{property1: value1; property2: value2; ...; propertyN: valueN;} Selector2{property1: value1; property2: value2; ...; propertyN: valueN;} . . . SelectorN{property1: value1; property2: value2; ...; propertyN: valueN;} </style> </head> <body> ...The Content of HTML Document's BODY goes here... </body> </html>
For example:
<!DOCTYPE html> <html> <head> <style> p{background-color: purple; color: white; padding: 12px;} </style> </head> <body> <p>CODESCRACKER</p> </body> </html>
CODESCRACKER
The advantage of internal CSS over inline CSS is, if we want to style all paragraphs without writing CSS for each and every paragraph, then the internal CSS helps in doing this task. For example:
<!DOCTYPE html> <html> <head> <style> p{background-color: purple; color: white; padding: 12px;} </style> </head> <body> <h2>Where to Write Internal CSS Code</h2> <p>All the paragraphs are styled</p> <p>CODESCRACKER</p> <p>This is the third paragraph</p> </body> </html>
Where to Write Internal CSS Code
All the paragraphs are styled
CODESCRACKER
This is the third paragraph
See, all the three paragraphs are styled using one single CSS declaration. Now the question is, what if we need to style only two paragraphs or two paragraph with one, and the last with other style. Then we need to define either class and/or id to the paragraph or use pseudo-classes, for identification and/or selection. For example:
<!DOCTYPE html> <html> <head> <style> h2{font-size: 200%;} p.a{background-color: purple; color: white; padding: 12px;} p.b{background-color: black; color: whitesmoke; padding: 20px;} </style> </head> <body> <h2>Where to Write Internal CSS in HTML Document</h2> <p class="a">All the paragraphs are styled</p> <p class="a">CODESCRACKER</p> <p class="b">This is the third paragraph</p> </body> </html>
Where to Write Internal CSS in HTML Document
All the paragraphs are styled
CODESCRACKER
This is the third paragraph
You will learn all about selectors and pseudo-classes in upcoming tutorial. For now, the thing is, internal CSS code can be written in HTML document, in the same way as done in above example.
Main Advantage of Internal CSS
- Affects only the page where the internal CSS is written
Main Disadvantage of Internal CSS
- Since internal CSS are written for every page, therefore if we need to change/update some style, then we have to do the same change/update for every page
External CSS
External CSS are written in an external file whose extension must be .css say codescracker.css. For example, write the following CSS code in a new file:
h2{font-size: 200%;} p.a{background-color: purple; color: white; padding: 12px;} p.b{background-color: black; color: whitesmoke; padding: 20px;}
Now save the file with name say codescracker followed by .css extension. Here is the snapshot of the file:
Now because the CSS code is written in an external file, therefore we need to link that file to the HTML document to which we want to apply the CSS written in that external CSS file.
The syntax to include an external CSS file in an HTML document is:
<link rel="stylesheet" type="text/css" href="ExternalCSSFileURL">
Another way to include external CSS file to an HTML document is:
<style> @import url("ExternalCSSFileURL"); </style>
For example:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="codescracker.css"> </head> <body> <h2>Where to Write and Link External CSS in HTML</h2> <p class="a">This is the first paragraph</p> <p class="a">This is another paragraph</p> <p class="b">This is the last paragraph of this Document</p> </body> </html>
Where to Write and Link External CSS in HTML
This is the first paragraph
This is another paragraph
This is the last paragraph of this Document
In above example, I've written only the file name of external CSS file, because the HTML document and the CSS is saved in the same directory. But you can still provide the complete URL of the external CSS file.
Note - If the external CSS file is not saved in the directory, where the HTML document is saved, then include the complete URL of the CSS file.
Note - You can also provide the complete URL of external CSS file without caring where the HTML document is saved.
Main Advantages of External CSS
- It becomes easy to maintain
- To change the style of whole website, we need to update only a single CSS file
- Write once, use everywhere
Main Disadvantage of External CSS
- Increases the page load time, as the page loads only after the entire CSS codes written in an external CSS file, gets loaded
« Previous Tutorial Next Tutorial »