- CSS Introduction
- CSS Syntax
- CSS Selectors
- How To Add CSS
- CSS Comments
- CSS Backgrounds
- CSS Borders
- CSS Margins
- CSS Padding
- CSS Height - Width
- CSS Box Model
- CSS Outline
- CSS Text
- CSS Links
- CSS Lists
- CSS Tables
- CSS Display
- CSS Max-width
- CSS Position
- CSS Overflow
- CSS Float
- CSS Inline-block
- CSS Align
- CSS Combinators
- CSS Pseudo-classes
- CSS Pseudo-elements
- CSS Opacity
- CSS Navigation Bar
- CSS Dropdowns
- CSS Image Gallery
- CSS Attr Selectors
- CSS Forms
- CSS Counters
- CSS Website Layout
- CSS !important
- CSS Rounded Corners
- CSS Border Images
- CSS Backgrounds
- CSS Colors
- CSS Color Keywords
- CSS Gradients
- CSS Radial Gradients
- CSS Text Effects
- CSS Web Fonts
- CSS 2D Transforms
- CSS 3D Transforms
- CSS Transitions
- CSS Animations
- CSS Tooltip
- CSS Image Reflection
- CSS The Object-fit
- CSS Object-position
- CSS Button
- CSS Pagination
- CSS Multiple Columns
- CSS User Interface
- CSS Variables
- CSS Box-sizing
- CSS Media Queries
- CSS Flexbox
How To Add CSS
How To Add CSS
Three CSS Insertion Methods
There are three methods to include a style sheet:
- External CSS
- Internal CSS
- Inline CSS
External CSS
Using an external style sheet, you can alter the appearance of a whole website by modifying a single file!
Each HTML page must include an external style sheet file reference within the <link>
element of the head section.
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a First heading</h1>
<p>This is a paragraph.</p>
</body>
Internal CSS
If a single HTML page has a distinct style, an internal style sheet may be used.
The internal style is defined within the <style>
element, which is located within the head section.
<html>
<head>
<style>
body {
background-color: orange;
}
h1 {
color: white;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a first heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
A unique style can be applied to a single element using an inline style.
Add the style attribute to the relevant element to use inline styles. The style attribute is compatible with all CSS properties.
<html>
<body>
<h1 style="color:red;text-align:center;">This is a First heading</h1>
<p style="color:red;">This is a First paragraph.</p>
</body>
</html>
Multiple Style Sheets
If some properties for the same selector (element) are defined in multiple style sheets, the value from the most recently read style sheet will be used.
color: blue;
}
Then, assume that an internal style sheet also has the following style for the <h1> element:
color: red;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>This is a First heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>
</body>
Products
Partner
Copyright © RVR Innovations LLP 2024 | All rights reserved - Mytat.co is the venture of RVR Innovations LLP