What is CSS?
CSS stands for Cascading Style Sheet. It is dependent on Html because it helps Html content to design. If you don’t know anything about Html then I have written an article based on Html and I suggest you go through it for proper knowledge. In last post we hve discussed how to create a 3D carousel in Javascript. So, let’s start it.
Why Use CSS?
It is used for designing our web pages like how to use margin, padding, boxes, colors, etc. This helps us to make our content responsive across all devices.
Syntax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body{ background: #262626; margin:0px; padding:0px; } h1{ color:#fff; font-family: arial; font-size:26px; } p{ font-size:14px; padding:5px; color:#ddd; } |
So, in the early stages of this language, It was not discovered and people were doing all their work with Html. When it is discovered then it brings a lot of new ideas to its users. It starts helping the users to create new content and professional websites because without it no one is able to create a responsive and optimized website. All these tags are introduced so that users can use them and make their work easy and brings positive results in the field of website development.
How to Use It:
There are three ways to use it in our Html code so that we can connect it with the Html file.
Inline CSS
External CSS
Internal CSS
Inline CSS:
Inline CSS means that when we use CSS along with Html tags in the same tag then it is known as internal CSS.
|
1 |
<p style =” color:greens”> Welcome to fantacydesigns </p> |
Internal CSS:
It means that when we use CSS in the head of an Html file using a style tag then it is known as internal CSS.
|
1 2 3 4 5 6 7 |
< style> p{ color:red; font-size:16px; color:red; } </style> |
External CSS:
When we are creating a new file and connecting it using a link tag in Html tag then it is known as external CSS. It saves us from confusion and makes our work easy.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
Best editors:
These IDEs are very useful because they provide suggestions to their developers and save a lot of their time which is an important part of development. It also helps in reducing the risk of errors in the code.
- Atom
- Sublime Text (Best Editor)
- Notepad++
- Visual Studio Code
- Brackets
Selectors:
It has two types of selectors Id (#) and class (.).
Id selector:
I’d is used for those types of elements that are unique I’d be using it for that element and it is unique.
|
1 2 3 4 |
#para1 { text-align: center; color: red; } |
Selectors:
The class can be provided to different elements and it will edit all those elements which have the same class. The class can be provided to many elements but I’d is unique and only provided to one element in a program.
|
1 2 3 4 |
.center { text-align: center; color: red; } |
Element selector:
It is used for selecting Html elements and then designing them.
|
1 2 3 4 |
h2 { text-align: center; color: red; } |
Comments
Comments are those parts of the program which are not executed during the execution of the program. The comments have only used the understanding of the developers so that they can identify the program lines next time. They can be used for providing hints in a program.
|
1 |
/*<p> Welcome to fantacy designs </p>*/ |
Colors
It used different methods for coloring Html elements.
- RGB (RGB(255,0,0); means color red)
- HEX (#ff0000 ; means color red)
- RGBA (RGB(255,0,0,0); means color red)
How to learn it?
You can simply learn it by following these websites. So, must go through them.
Therefore, by going through this article you can learn a lot of new things in this article. If you have any type of questions/queries then comment below. So, that I can solve your issue.
Thanks for reading this article.
