Tips for better CSS coding and styles
chamindu lakshan
Out of the box thinker/YouTubepreneuer/programmer/Wordpress and Wix Designer
Previously, we explained 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:
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>
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>
Recommended by LinkedIn
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: powder blue;}
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
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