As a web designer, it is very important to have knowledge of design. CSS( Cascading Style Sheets ) provides us the way to design or style our webpage to make it look more interactive and attractive. In HTML Page Styling can be done in 3 ways:
Inline – In this, we can directly embed style using style attributes in HTML Tags.
Internal – In this one we can simply embed styles between <head> & </head> using a <style> tag.
External – In this, we will have to create External CSS Files. External CSS styling is the most popular and common way to add style to an HTML webpage.
Inline CSS Styling
In this type of styling, the style attribute is added in an HTML Element tag and the style set is defined as the value of the style attribute. All values embedded in style attributes is applied to a single HTML Element.
Example:
<h1 style="color: brown; background-color: yellow;">This is a brown Heading with yellow Background.</h1>
The output of the above Example:
This is a brown Heading with yellow Background.
Internal CSS Styling
In this type of styling all styles related to HTML Element are embedded in style tag between <head> </head> tag. It can be used to define common styles to all HTML Elements using Element Tag Name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2{color:brown;}
p{color:lightgreen;}
</style>
</head>
<body>
<h2>This is a small heading</h2>
<p>This is a light green paragraph.</p>
</body>
</html>
Output of above Example:
This is a small heading
This is a light green paragraph.
External CSS Styling
In this type of styling, all styles related to HTML Element are added in an external CSS file/style sheet. All styles related to tags can be added in the external file and a link to the external file is added in the <head> tag of the HTML page. It is the most popular way to control the styling of many pages by changing or modifying a single page. Multiple style sheets can be used for a single webpage.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
style.css
body{ background-color: lightgrey; }
h1{ color: blue; }
p{ color:green; } In HTML Tags separate styling can be given to common tags with the help of id and class attributes.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p id="bold_text">This is first paragraph.</p>
<p class="st_1">This is second paragraph.</p>
<p class="st_1">This is third paragraph.</p>
</body>
</html>style.css
#bold_text{font-weight:bold;}
.st_1{font-size:23px;}Above i have discussed some basic concepts of CSS, to help you get started with web page designing. If you liked this article, do share it with your friends. Thanks for reading the complete article carefully, please provide your important feedback or comments below.
No Responses