HTML Styles - CSS The Style Information element with Examples
You must have seen many Webpages on Search Engines whose look is very engaging, but do you know which computer language is used to make the Webpage look attractive?
If you do not know, then let us tell you that CSS is used to give an attractive look to any webpage. Almost all websites use CSS. In this era of technology, it is also essential for everyone to know computer language.
Generally, it is used to balance a website in a good and attractive way. Like Background Color, Font Size or Color etc., of a website. With CSS help, you can make changes to any web page as per your requirement.
In today's article, we will tell you what CSS is, the types of CSS, and the benefits of CSS; How does it work, and what is it used for?
We will share a lot of information about CSS with you, which will make it easier for you to understand CSS better.
So let's start the article -
{tocify} $title={Table of Contents}
CSS: Full Form - “Cascading Style Sheets”
Giving colour and shape to any website in CSS is called styling, so its full form is also similar to it, which is known as CSS = "Cascading Style Sheet".
- Cascading: This means that whatever work is done in CSS, the browser looks like a presentation, and this thing is called Cascading in CSS.
- Style: Giving colour and shape to any website in CSS is called style.
- Sheet: CSS is a style sheet because, in this, we create a separate file sheet of CSS and write all the CSS code in it.
Cascading Style Sheets is a style sheet language used to describe a document's presentation in a markup language such as HTML or XML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS preserves a lot of work. It can handle the layout of multiple web pages all at once.
What is CSS?
The full name of CSS is cascading style sheet. HTML and CSS have a big hand in the technology of creating a webpage.
Using HTML gives a shape to the webpage, and using CSS gives a new and attractive look to the webpage. HTML and CSS are always used together.
We can use HTML without CSS, but CSS cannot be used without HTML.
HTML and CSS is a computer language which is very simple and can be easily taught.
We need a text editor like Notepad to write HTML and CSS code. After writing these codes, a web browser is required to view them through the internet.
Many tags are used in HTML, such as header tag <h1>, font tag <font>, table tag <table>, image tag <img> etc. CSS is used together to show all these tags even better in the browser.
Using CSS, we can show the webpage's text in good colour, control the styles of fonts and the space between paragraphs, the images of the background and the use of which colour in the background will give the webpage a good look.
CSS is used to set things. CSS gives an entirely new look to the HTML document, which makes users more attracted.
Benefits of CSS
Let us know what the benefits of CSS are: –
1) CSS saves time
We can use the style used in one HTML webpage in many other web pages, that too, by writing the CSS code only once.
We will not have to write CSS code repeatedly to create different web pages.
And by using the CSS code written only once, we can create as many web pages as we want, which saves a lot of time.
2) Helps the page to load quickly
If we use CSS, then we do not need to write the attributes of the HTML tag again and again. Just once, by writing the tag's attributes according to the rules of CSS and applying it to the web page, that tag will appear correctly everywhere.
Therefore, to make the tag appear at different places on the web page, the same code will not have to be written again and again.
The web page will load quickly in the browser if there are fewer codes.
3) Easy to maintain
To completely change the style of the web page, just once by changing the code of the CSS style, all the elements used in HTML will automatically change together, and there will be no need to change all the elements one by one.
4) Platform is independent
Platform independence means we can use CSS on any platform like windows, Linux, Macintosh etc. And it also supports all the latest browsers.
Types of CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) sets the style in web pages that include HTML elements. It specifies the background colour, font size, font family, colour, … etc., properties of elements on a web page.
There are 3 types of CSS which are given below:
- Inline CSS - by using the style attribute inside HTML elements
- Internal or Embedded CSS - by using a <style> element in the <head> section
- External CSS - by using a <link> element to link to an external CSS file
#1. Inline CSS
This type of CSS is used inside HTML elements only.
You will not have to create a separate file for the inline style.
You can use Inline CSS inside any HTML tag in an HTML document.
For example, copy the code below and save the file with the .html extension:
<!DOCTYPE html><html><head><title>Inline CSS</title></head><body><h1 style="color:blue;text-align:center;">How to Use Inline CSS </h1><p style="color:green;">This is a Pragraph with Inline CSS. </p></body></html>{codeBox}
#2. Internal or Embedded CSS
In an HTML document, you can use Internal or Embedded CSS styles to apply CSS.
It is set in the head section of the HTML file.
In simple words, to add internal CSS to an HTML web page, the CSS property is set from the <style> tag inside the HTML <head> tags.
That's why it is called Embedded CSS.
For example, copy the code below and save the file with the .html extension:
<!DOCTYPE html><html><head><title>Internal CSS</title><style>.main {text-align:center;}.KGF {color:#40B3DF;font-size:45px;font-weight:bold;}.akashtimes {font-style:bold;font-size:22px;}</style></head><body><div class = "main"><div class ="KGF">akashtimes</div><div class ="akashtimes">An internal CSS is used to define a style for a single HTML page.</div></div></body></html>{codeBox}
#3. External Style CSS
To add External CSS to an HTML document, you must create a separate .CSS file and add it to the HTML file.
That is, whatever CSS property you want to set in HTML, it will all be inside a .css extension file.
You have to link the line to the HTML file with a <link> tag in the <head> section, something like this:
How to link CSS files in HTML?
To link CSS files in HTML, use the <link> tag:
<!DOCTYPE html><html><head><link rel="stylesheet" href="yourfilename.css"></head>{codeBox}
Note: To add a link tag on Blogger.com; you have to close the stylesheet
Example: <link href= "yourfilename.css" rel='stylesheet'/>
A brief history of CSS
CSS was created in 1994 by Hakon Wiuam Lie. And after this, in 1996, W3C launched Level 1 of CSS. CSS4 is the latest version of CSS right now –
CSS Version
- CSS 1,
- CSS 2
- CSS 2.1
- CSS 3
- CSS 4
Basic Properties of CSS
- Height: Fix the height of the element through this property.
- Width: This property is used to give width to the element.
- Color: It is used to provide color to the element.
- Font-family: font-family property defines the font to be used.
- Font-size: font-size property defines the text size to be used.
- Border: This property is used to make a Border in Element.
- Background Color: With its help, you can color the element's background.
- Margin: It is used to give space around the element.
- Padding: This property is used to determine the padding in the element.
Where Do You Learn HTML & CSS in 2023?
There are many such websites on the Internet from where you can easily learn CSS, such as –
How to learn CSS online
- W3Schools.com
- Javatpoint.com
- Tutorialspoint.com
- codeacademy.com
- akashtimes.com
You can also learn CSS by joining online App courses like
- Udemy
- Udacity
Apart from this, you can also learn CSS by watching videos on YouTube.
There are many ways to learn CSS online.
How to learn CSS offline
You can also learn CSS Coding offline, like –
- Maintaining books
- By joining Coaching Institute
Chapter Summary
- Utilize the HTML style attribute for inline styling
- Operate the HTML <style> element to define internal CSS
- Use the HTML <link> element to refer to an external CSS file
- Utilize the HTML <head> element to store <style> and <link> elements
- Use the CSS color property for text colors
- Use the CSS font-family property for text fonts
- Use the CSS font-size property for text sizes
- Use the CSS border property for borders
- Use the CSS padding property for space inside the border
- Use the CSS margin property for space outside the border
FAQ Related For 'HTML Styles - CSS'
What is the difference between CSS and HTML?
Through HTML, we create the structure of a Webpage and add content to the Webpage. Content like - Heading, Text, Paragraph, Image, Video, Audio etc.
With the help of CSS, make that content attractive like – Color, Background Color, Size, Border etc.
What is CSS used for?
Cascading Style Sheets are utilised to style and layout web pages — for example, to adjust the font, colours, size, and spacing of the content, split it into multiple columns, or add animations and other decorative elements.
Who discovered CSS?
CSS was discovered in 1994 by Hakon Wiuam Lie.
Which is the latest version of CSS?
The latest version of CSS is CSS 4.
Conclusion:
Friends, according to my expertise, I have written complete information to help you on “HTML Styles - CSS (Cascading Style Sheet).” If this post is favorable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
 ){kind=link}