Previously, we explained about styles in the HTML page. But in this session, we want to teach important points about placing CSS codes on the web page.
When you want to style elements in HTML, there are three ways to do it:
-
Inline CSS:
By using the Style Attribute inline, you can style each element on the web page individually, even if that element is repeated with the same tag, it will have a different style from other similar elements. Example:
<h1 style="color:blue;">A Blue Heading</h1> -
Internal CSS:
When creating the <head> section, using the <style> element in it, you can write the styles required for any type of web page elements. By using Internal CSS, every standard HTML tag can have a common style. Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> -
External CSS:
In this method, an external CSS file is created, such as style.css, and the location of this file is called in the <head> section using the <link> element as follows:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>style.css
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}In this method, like Internal CSS, every standard HTML tag has a common style. With the difference that CSS codes will no longer be in HTML codes.
Note: In Internal CSS and External CSS methods, in addition to common styling to each standard tag, each tag in the HTML code can have its own unique style using Inline CSS.
Also, in more specialized CSS training courses, you can use more advanced frameworks that were introduced in the previous session to design the best web pages. But the development of a web page or web app is not completed with HTML and CSS and requires the use of professional programming languages in front-end development such as Java Script and PHP for back-end.
At the end of this tutorial, you can use the CodePen code editor to program HTML, CSS and Java Script at the same time, but if you need a simple editor, don’t forget using NoteBox.
Have you any questions? Ask it on our Reddit.