CSS Introduction, what is CSS & Types of CSS
CSS Introduction, what is CSS & Types of CSS
What is CSS?
CSS stands for Cascading Stylesheet; CSS is a stylesheet language used to describe and design the presentation of an HTML (Hyper Text Markup Language) documents.
CSS is designed to enable the separation of presentation and content of HTML document, like including layout, stylish text font and color, the separation can improve the content accessibility, In CSS we give attractive design to HTML document such as all font colors, background styles, elements alignments, border, size etc. We learn all the styling in CSS next tutorial of CSS.
Why Use CSS
We learn CSS because we can define and styles our web pages in websites, including design, layout, and variation in display across devices and screen sizes.
In CSS you can do al lots of work and an external stylesheet of CSS file you save .css can be used to style multiple web pages all at once.
Example of CSS
Here we see a simple example of CSS after we learn types of CSS.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example CSS</title> <style type="text/css"> h5{ color: blue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; } p{ background-color: rgb(4, 18, 148); color: rgb(247, 242, 242); } </style> </head> <body> <h5>Hello User</h5> <p>Welcome back in StudyMuch.in</p> </body> </html> |
Output of above Programming Example
 |
Types of CSS
There are three simple ways to insert CSS Style into HTML document.
- Inline Styling
- Internal Style Sheet
- External Style Sheet
1. Inline Styling
Inline stye is useful for design a single HTML document, it is done by using style attribute its value contain CSS declaration.
Example of Inline Styling
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal Style Sheet</title> </head> <body> <h5 style="color: darkgreen; text-align: center;">I love Coding</h5> <p style="text-align: center; background-color: chartreuse;">Learning Web Design is Best.</p> </body> </html> |
Output of above Example
 |
2. Internal Style Sheet
An Internal Style Sheet is useful when a single HTML document has its unique style, simple it is used to single HTML document.
With this, CSS rules should be included inside the <head> tag in HTML document. The <style> element should be only enclosed inside the <head>, otherwise if you write CSS code in <body> tag it is not working.
The text/css value indicate that the content in CSS. <style type=”text/css”>
Example of Internal Style Sheet
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal Style Sheet</title> <style type="text/css"> h5{ color: rgb(255, 72, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; text-decoration: underline; } </style> </head> <body> <h5>Hello User Of StdyMuch</h5> </body> </html> |
Output of above Example
 |
Above Internal Style Sheet Example coding you can see; we write CSS Style script inside the <head> tag.
3. External Style Sheet
An External Style Sheet is very useful when multiple HTML pages have same styles, this can be achieved by having an external style sheet file.
An external style sheet must be saved file with .css extension.
We need to use the <link> element to inside the file in our HTML documents.
Example of External Style Sheet (HTML)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal Style Sheet</title> <link rel="stylesheet" href="examplestyle.css"> </head> <body> <h5>Hello User Of StdyMuch</h5> <p>In this HTML page we link css file (examplestyle.scc), You can see above HTML Example.</p> </body> </html> |
Example of External Style Sheet (CSS)
h5{ color: rgb(255, 72, 0); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; text-decoration: underline; } p{ color: blueviolet; } |
Output of above both programming example HTML and CSS
 |
Above you can see the programming example of External Style Sheet we use External file for styling HTML page; thus, CSS file name is examplestyle.css. you see the HTML example of External style sheet we use <link rel=”stylesheet” href=”examplestyle.css”>
this link for styling.
In this tutorial we learned What is CSS, and Types of CSS. This is the first tutorial of CSS, in next tutorial we will learn a new topic of CSS.
Read Also-
- How to create a Sign-Up page with HTML and CSS.
- Create a stylish Contact Form with CSS and HTML.
- Learn HTML YouTube video with programming.
- Learn HTML Input Types with programming Examples.
- Learn HTML Audio Tag full tutorial.
- Learn HTML Dropdown List full tutorial.
- Learn how to create HTML Table full tutorial.
1 Comment
Arletha Pinera · September 23, 2022 at 8:17 am
fantastic points altogether, you simply won a new reader. What would you suggest about your put up that you just made a few days in the past? Any positive?