This article will explain the three types of CSS along with the advantages and disadvantages of each type.
Styles with CSS
This week we are going to have our first lecture with the exciting CSS to start styling our projects.
I made some practise at home by creating a simple form with HTML
Before CSS:
And I’ve applied some basics rules of CSS to style the form afterwards for a better looking.
After CSS:
I also made some readings related to CSS styles.
There are three types of CSS styles: inline, external, and internal.
Inline CSS
Inline CSS styles a specific HTML element by adding the style attribute to each HTML tag, without using selectors. However each HTML tag must be styled individually.
<!DOCTYPE html>
<html>
<body style=“background-color:red;”>
<h1> style=“color:blue;”> </p>
</body>
</html>
Internal CSS
Internal CSS requires the <style> tag in the <head> section of the HTML document in every page of a website.
<style type="text/css">
External CSS
External CSS, links the webpage to an external .css file, that has been created by a text editor, this allows to change the whole website and it’s the most used.
In the <head> section of the HTML document, add a reference to the external .css file just after <title> tag:
<link rel="stylesheet" type="text/css" href="style.css" />
The key for sucess? Practising, Practising, Practsing!
