CSS
CSS Introduction
CSS Selectors
CSS Color
CSS Background
CSS Border
CSS Margin
CSS Padding
CSS Box Model
CSS Text
CSS Font
CSS Link
CSS List
CSS Overflow
CSS Display
CSS Combinators
CSS Pseudo-classes
CSS Navigation Bar
CSS Hover
CSS Z-index
CSS Media Queries
CSS Shadow
CSS 2D Transform
CSS Animations
CSS Button
CSS FlexBox
CSS Grid
CSS Pagination
Ways To Add CSS
There are three different ways to add CSS to an HTML page, which are:
Inline CSS is used to add custom properties to specific elements. The added style will only reflect on that particular element only.
To use inline CSS, insert the style attribute within the HTML element's opening tag.
In given Example the inline style of color: purple is attached to only the h1 tag.
Internal CSS
Internal CSS is used to apply custom style to multiple elements on the same page. The style can be used throughout the HTML page.
Internal CSS is defined in a style block, which will be inside the head section.
In Following example the style block, selector p will target all p tags and assign them color: red.
External CSS
External CSS works similarly to internal CSS but with a twist.
Instead of adding the styles within the HTML file, we create a separate file with a .css extension.
This file will hold all the styling details. Then, we link this file to the HTML page, giving it the instructions on how to look.
There is a new <link> tag in the head section, and this link tag has rel and href properties.
- Inline CSS
- Internal CSS
- External CSS
Example
<h1 style="color: purple;">I'm harry</h1>
<h2>I'm web</h2>
Example
<head>
<style>
.p {
color: red;
}
</style>
</head>
<body>
<h1>Hello</h1>
<p>I'm Web Developer</p>
<p>Thank you</p>
</body>
- <link>: This tag is used to create links between different resources, like stylesheets, fonts, and more.
In our case, we are using a link tag to link the CSS file with the HTML file. - rel="stylesheet": rel stands for relationship, this defines the type of relationship between the HTML document and the linked resource. When set to "stylesheet", it specifies that the linked resource is a stylesheet that will be used to style the HTML content.
- href="style.css": The href attribute stands for "hypertext reference." It specifies the path or URL to the external resource we want to link. In this case, it's the path to the external CSS file called "style.css".