Well styling an element basically means what the word style means. Meaning change the text color, background color , text-size, etc. I will be using an online editor called codepen to display the input and output together.
There are 3 types of styling.
In inline style you can style inside the element tag like this
<p style=”color:blue; font-size:30px;”>hello, I am a paragraph</p>
For internal styling you use <style></style> tags inside the head tags of your html and style inside that, like this:-
External styles(CSS style sheet)
External styles are written same as internal styles. except there are written on a separate page which is then saved in .css format
You can add external css style sheet to your html with a <link> tag, like this:-
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
rel attribute defines the relationship that the linked file has to the HTML file from which it’s referenced. In most cases, this resource will simply be “
stylesheet“, which means, not surprisingly, “the referenced document is a style sheet.” And now you will be wondering what the href is well href stands for hypertext reference. It’s the source of the file used by the tag.
In the end I would like to tell you that you can use whichever style you like to however external styling is better for a cleaner code and off course you can create one style sheet which you can use on multiple HTML pages. Inline style is wisely used when you have to target a single element for a different style than your external style sheet.
Note: Now be sure to practice and follow this blog for new ways to code or just #learnsomethingnew.