Hello and welcome to my 3rd part of My First Frontend Project Series. I am Dilesh Zingare and, If you didn't see previous 2 articles then you are missing something important. I have uploaded lectures videos of every article I uploaded so don't worry about anything.
_**
Quick Recap of 2nd part....
**_
In previous part we have learned about how heading tags and divider tag works. What are the attributes of div tag and what can be the values of each attributes..... And I said I will be teaching style tag later on! So this will be the part where we learn about CSS and style.
_**Let's Start 3rd Part.
**_
CSS stands for Cascading Style sheet and like name said it is use for styling the page (output). We can style it like crazy like this..........
And this is only a beginning, we can do much more fun staff from CSS, which you didn't even thought about. So, let's get started.....
If you want you can use style tag in HTML file or you can create a new CSS file differently, but it have to has in the same folder as your HTML file. If you create a different folder for CSS file then you have to work more to provide the path of that folder to your HTML file folder :-
[https://github.com/dilesh596/The-Bite-of-Soul text ]: you can use this link as a reference for style tag. I didn't create a different file for CSS because I think creating a different file for only style tag is drag instead I add Style tag in HTML file it is much easer, That I think at least.
For adding Style tag to a specific area we have to create a selector which will apply things to that specific area which you created. Selectors can be anything such as a, b, c, d,......, z or body, header, footer, etc. Then after you created the selector then add space and add curly brackets { } then add styling attributes like color, background-color, background-image, text-align, padding, text-decoration, text-position, font-family, etc.
Remember that I write color not colour and I didn't add space for adding words like text align I write as text-align.
About values of attributes.
background-color: or color: black or white or pink or brown etc.... text-align: or text-position: left or right or center text-decoration: none or underline or overline or dashed etc...... font-family: arial etc..... background-image: url('data:image/jpeg.................') it will look like this, You have to paste online URL of image from Google the structure till URL('......') will be same as here the url can be vary. But data:image/jpeg will be same for every url.
Example:
header { background-image: url('data:image/jpeg;example.com'); background-position: center; color: whitesmoke; padding: 100px 30px; text-align: center; background-color: black; text-decoration: none; font-family: Arial, sans-serif; }
So, That's it for today, See you at the next article. Don't forget to make use of what you leaned about in all the articles. Good bye till then. If you have any kind of doubt just ask me in the comment section don't hesitate.
My github URL is........
Top comments (0)