Let’s Get started with CSS
CSS or Cascading Style Sheet is used to style an HTML document. HTML without CSS was like a man without clothes, cause there was no style on it. And it would be looked ugly. So how to use CSS on HTML? Wanna know it? Let’s get started
There was many method to import CSS to an HTML document, but I would just explain it about 3 methods (I thought, those way that has to know who wants to start with CSS).
#1 Inline Stylesheet
An inline style is used to apply a style on a specific element. We can use it directly on an element that we want to style it.
This method has a deficiency, if we have hundreds elements of HTML, we have to give the style manually, one by one. I thought, it was ridiculous and crazy, and we may make some mistake cause we wrote lot of elements those could make us unfocus.
#2 Internal Stylesheet
This method, we write it on HTML document that we want to style it, we write <style> element inside <head> element.
If we use this method, we could just use it on one HTML document. When we have two or more HTML documents, we should write it on each HTML document that we want to style it.
#3 External Stylesheet
An external stylesheet can be use on any number of HTML documents. If we would use this method we could apply it by placing <link> element in each HTML document.
The attribute rel of the <link> tag has to be set to stylesheet and the href attribute to be relative or absolute path to the stylesheet. We could also use relative URL path, absolute path could be used too. In HTML5 attribute could be omitted.
It is reccomended to place the <link> tag in the HTML file’s <head> tag, so that the styles are loaded before the elements. Otherwise, users would see a unstyled content
index.html
style.css
An external Stylesheet was the best way to handle your CSS. There’s a simple reason for this, when we’re managing hundreds pages HTML. Those are controlled by a single stylesheet.
We could also load as many css files in our HTML page as needed.
PS: make sure that you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it’s saved in a folder, then specify like this.
There were 3 methods that you should know to start using CSS. Actually there were some methods to import CSS file, but I didn’t share it know cause the methods that I mentioned before, it was enough for you to get started with CSS. For any advise or any recommendation for the next article, you could leave the comment below. And don’t hesitate to follow and subscribe for getting new updates from me.
Have a nice day ^_^.
Connect with me on my social media
Support me by buy the product from affiliate’s link below:
