HTML Styling using CSS
Styling HTML with CSS
There are three ways of adding css to your HTML. They are
- External CSS
- Internal CSS
- Inline CSS
External CSS
Use <link> tag to link stylesheets to an HTML document.
Note: The external css file used in this example is green.css
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="green.css">
</head>
<body>
<h1>Using External CSS</h1>
<p>All is green.</p>
</body>
</html>
Internal CSS
Use <style> tag to add internal CSS to an HTML document.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
/* This is internal css*/
p{
color: red;
}
</style>
</head>
<body>
<h1>Using Internal CSS</h1>
<p>This paragraph is red.</p>
</body>
</html>
Inline CSS
Use style global attribute to add inline CSS for a single element.
Example
HTML Online Editor
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>Using Inline CSS</h1>
<p style="color:blue;">This paragraph is blue.</p>
</body>
</html>
Reminder
Hi Developers, we almost covered 99.5% of HTML Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in HTML.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.