How to add CSS in a HTML file

-

 

css in html

Css stands for Cascading Style Sheets, it is used to style a document.
Html places the content and css styles it, for example in a building the
bricks would be html, css would be the decorations and javascript would
be the functionality of the building. To create a website 3 major languages
are needed, they are html, css and javascript. In this blog I will teach
you how to include css in html.
Did you know you can code css in html? yes, html has a tag from which
you can style your website in css without creating an additional
file. There are 3 ways to code css in html. The 3 ways are "Internal css",
"Inline css", "External css".
Before following the guide, we expect you to know a bit of
html and css, knowing html and css would be a great help. Even
if you don't you can still follow the images given below.



1. Internal css
To add css in html with Internal css you need to add the
"style" tag first do open and close brackets("<>") and in beetween
them write "style". Then once you have wrote your css code you can
close the tag by open and close brackets("<>") and in beetween
them write "/style".




2. Inline css
Instead of adding a tag you can define the style of the element
straight from the "style" attribute.
If you want to add style to multiple elements then
I suggest using the Internal method but if you want to add style
to less then 4-5 elements then Inline css would be the perfect way to choose
First select the element you
want to apply the style to, then add a "style=''" attribute in beetween
the single quotes write your code. The style attribute should be
placed after you are defining the element, it should be before the ending brackets
of the starting element.




3. External css
In this way you will create an additional file. If you are making
large projects and want to sort out different code then I suggest you
the External method. Since in external method we have 2 files
one for html and one for css. You have to
first go to the "head" section of your html file. There write
"link rel='stylesheet' href='example.css'" this code does not need
ending brackets.



** BONUS CONTENT**
Javascript in html
I just taught you how to include css in html but there's another topic to cover,
did you know that javascript can also be included in html. Html was made
so it supports all 3 web languages which are html, css and javascript.
Without html it would be really hard to create a website. To add javascript in
html there are 2 methods.
1st Method
Just like in internal css we add the "style" tag, like that we add
the "script" tag to include javascript in our html file. It exactly works
like internal css, the only difference is that in it you code javascript instead of css.




2nd Method
Just like in external css, we also add a another file to code javascript.
We first go to the body section of our html code and type "script src="myjsfile.js".
If you didn't understand don't worry here's a image of it.







Comments

Post a Comment

Popular posts from this blog

how to rank number one on google

-
Image
 how to rank number one on google Hi in today's blog, I will tell you how to rank number one on google. If you want to rank in google you must do SEO, so I will be telling you  the best tools to find keywords and how to do SEO. Just make sure to follow these few steps to rank number one on google. 1. Keywords If you want to rank on google you must use keywords/tags on your website, I have a tool called Word Stream . In Word Streamer you just have to type in the topic your website is related to and it would tell you everything like how many people search it and how much would you earn per 1,000 clicks and also how high is the competition. 2. Quality Content If you want to rank on google you  must ensure that the content you are making is good enough for people to read it. To make your content good, you must relate to your topic and add images and illustrations etc. If someone is searching for really deep information, then your blog must be more then 2000+ words to sho...
Read more

The Complete JavaScript Course (2022) From Zero to Expert!

-
Image
The Complete JavaScript Course (2022) From Zero to Expert! Introduction Welcome to my Complete Javascript Course (2022) From Zero To Expert, in just one blog. In this course you will learn everything you need to know to get started. I helped an expert developer learn Javascript, and now he makes 1,20,000$ per month just from making a website from Javascript. Lets dive right in. 1. Overview Javascript is a coding language made to add functionality to web pages. To create a web page you need HTML, CSS and Javascript. HTML creates the page layout, CSS styles the web pages and Javascript adds functionality to it. 2. Getting Started To start coding Javascript you need a file to code on and also a text editor, I recommend using Visual Studio Code (Vs Code). Once you have downloaded the text editor, you have to install Javascript in it. Then create a new file, and you are ready to go. First lets get to know how to write something, in Javascript writing something is really simple. Here's ...
Read more

Learn CSS | Lesson 1 | Making A File

-
 Learn CSS  Part 1 Hi I am teaching you HTML already but it is important to learn CSS too as CSS is needed for the style of the document, remember in part 1 of HTML how I told you that HTML is the layout. Now CSS is the style of the layout. So lets start with the basics, lets learn how to make a CSS file. You can do this in Notepad too don't worry, so first create a new Notepad file and name it "style.css" and save it as UTF-8. Then make a HTML file called "index.html". In the index.html paste this code: <head> <link rel="stylesheet" href="style.css"> </head> Make sure both the files are in the same folder, this basically connects the HTML file to the CSS file. There are 2 more ways to do this, instead of linking them you can straight code HTML and CSS in the same file. To do so make a basic HTML document, then in the end of the body section before closing its tag paste this: <style> </style> Now in between these...
Read more