HTML Stands for Hypertext Markup Language. We also call it the backbone of the internet. It is one of the markup languages which is used to create web pages and applications. One of the most essential and powerful features of HTML is its CSS. We can design our HTML page with the help of CSS.
What is CSS?
CSS stands for Cascading Style Sheets. It is used to design the layout of the webpage. CSS helps the developer to save a lot of work. With the help of CSS, we can control the background images or background colors to be used, the spacing between elements, different displays for different devices and screen sizes, color, font, how elements are positioned and laid out, and many more.
Here the word "Cascading" means if we apply some style to the parent element, then a similar style is automatically applied to the child elements.
We can apply the CSS property to our HTML page in 3 ways. These ways are as follows.
We can implement the CSS property by writing the CSS code in a particular line. This can be done with the help of inline CSS. In inline CSS, we can use style attributes to implement the CSS property.
The above code is an example of the implementation of inline CSS. In the code, we have implemented some CSS properties inside the tag with the help of the style attribute.
Advantages of Inline CSS
There are some advantages of using inline CSS. These are as follows.
Disadvantages of Inline CSS
There are also some disadvantages to using inline CSS. These are as follows.
Internal CSS is used to implement the CSS property in a single HTML page. We can write the internal CSS within the head tag of the HTML page. We have to write the code inside the <style> tag.
With the help of the below process, we can implement the internal CSS in HTML code.
Step 1: First, we have to open our HTML page; then, we have to search for the <head> opening tag.
Step 2: We have to write the below code inside the <head> tag.
Step 3: We have to write the required CSS code inside the <style> tag. The example is as below.
Step 4: Then we have to close the style tag.
In the above, we implement the CSS property inside the style tag. Inside the style tag, we have defined different styles for different elements by targeting the tag name.
Advantages of Internal CSS
There are some advantages of using internal CSS in our HTML code. These are as follows.
1. We can use the selector like ID selector or CLASS selector in internal CSS. The implementation of CLASS or ID selector is as follows.
2. In internal CSS, we don't have to upload extra files. Because in internal CSS, we write all the code in a single code.
Disadvantages of Internal CSS
There are some disadvantages to using internal CSS in our HTML code. These are as follows.
With the help of external CSS, we have to write another file where we have to write the CSS code with the help of any text editor, and then we have to link that file to the HTML code with the help of syntax.
This method is a more efficient and reliable method that is followed by all the developers. When we want to change the design of the webpage, then we have to just go to the. CSS file, and then we have to modify that file according to our needs.
With the help of the below steps, we can implement the external CSS in our HTML code.
Step 1: First, we have to create a file and name that file with the help of a .css extension with the help of any text editor. The example is as below.
Step 2: Then we have to go to the <head> tag in the HTML file; then, we have to create a reference path to that CSS file after the <title> tag.
In the above code, we have to create two files. One is for HTML, and another is for CSS. Then we have to link those files with the help of the link attribute inside the <head> tag.
CSS Colors, Fonts, and Sizes
With the help of these attributes, we can give color, font, and font size to our web page. These are widespread properties for all web pages.
In the above code, we have provided some font families, colors, and font sizes for our webpage.
With the help of this, we can set a border around the HTML element.
CSS Padding & Margin
With the help of padding, we can define the space between the text and the border. And with the help of margin, we can define the space outside of the border.