I’ll introduce two methods to apply CSS codes. One writes CSS codes in a separate file from the html file and the other one writes CSS codes among the html codes of each page. Well, of course, the main method is to write the CSS code in a separate file because if we want to write CSS codes within each html page, we will have to open all the pages for each time we change the site and change the CSS codes. In tutorials on CSS on the Koolstans site, I’ll first teach you how to write CSS codes in a separate file, but then in all examples, I write CSS with html code (not in a separate file) and my goal is also this. You can easily copy all the code quickly in a file on your computer and see the result and change it by figuring out how the results change because the purpose for the present is to learn how to code your CSS.

Write CSS Codes in a separate file:

First, I’ll explain the basic way of writing CSS codes, which is the same as writing CSS codes in a separate file. First, let’s say how to create a html file and CSS file. You can use any custom text editing software to create these two files. The simplest software for making both html and CSS files is the Notepad software in Windows, which you can find in the Windows menu. Adobe Dreamweaver software is also a professional and very suitable software and I recommend it to you. This software will speed up your coding and by coloring different sections of the code, you will have a better view than the written code. The following is an explanation of the software in the html tutorial section where the link is shown below:

Dreamweaver software for easier writing codes

We first create a html file. Copy the following in the text editor software:

< html >   < head > < / head >   < body bgcolor = “blue” >   < p > this is a paragraph < / p >   < / body > < / html >

Then select the file with the desired name (usually index) and with the html extension. Save it and open it with your internet browser.

As you know, the codes of a html page start with the tag and ends with the tag. Within these two tags, html codes are divided into two head and body sections, header code, beginning with a tag and ending with a tag. Chapter header codes are not displayed in the Internet browser, and only provide information about the html page. Of course, we do not currently write code for this section, and we’ve only written two tags to keep it in mind. The codes whose results are displayed on the Internet browser should be written in the body section. Code body parts start with a tag and end with a tag. Pair of tags


They are also used to create a paragraph. Be careful that within the tag, we set the bgcolor attribute to Blue, which causes the background color to be displayed in blue.

Result :

Well, this is the usual way of determining the background color with html code, and we just explained it to compare with the CSS method. But we now want to create a CSS file that defines CSS code with what the background color of the page is. We will first create a CSS file, for this purpose copy the following code into your text editor:

@charset utf-8;
body {           background-color : blue ;      }

Then save it to MyStyle.css. Be sure that the file extension must have css. Maybe a CSS file extension. In the CSS file, we first wrote the body word, which means that changes to the body tag should be made in the html code of each page that references this CSS file. Because the background color is determined using the body tag. Then we have two symbols} and {{}, which shows that the properties we will define are related to the body tag, of course here we have just written one attribute. The characteristic we consider is background-color, which we set to blue. At the end of the mark; We have written. Note that if we want to write the 5 different attributes for the body tag, we should write them between the two characters {and {}, each with a separate line and at the end of each; Be placed .

Now we need to write the html page code, we should delete the bgcolor attribute in the html page and write a reference to the CSS file as well as the usual way.

< Html >   < head > < link href = “Mystyle.css” rel = “stylesheet” type = “text / css” media = “screen” / > < / head >   < body >   < p > this is a paragraph < / p >  < / body > < / html >

Then save the file index.html with the html extension in the same folder as the MyStyle.css file and run it with your Internet browser. Note that the bgcolor attribute has no longer been written in the body tag, and also tagged with a reference to the MyStyle.css file. Be careful that the tag should be written in the head section of the HTML page code, ie between two tags and. In the tag, the href attribute must specify the CSS file address to which we refer. You do not need to memorize the words written for the tag and you can only copy the expression in your files and, when necessary, we only need to change the address specified for the href attribute.

So we learned how to create a CSS file and then refer to that CSS file on HTML pages.

Write CSS Codes on Your Page HTML:

As we said, CSS codes can also be created on the HTML page itself, in which case the CSS file is no longer required. But here I note that the basic and professional way to use CSS codes is to build the CSS file and write the CSS code inside it. But on the Keystone site in the other topics that we describe, we write CSS codes in our HTML page so that you can easily create an HTML file by simply creating an HTML code and engaging in the creation of two files, addressing, and so on. Because our goal is currently learning CSS programming, and then, as a professional, write your own CSS code in a separate file.

Now we write the same previous example this time in a different way so that the CSS codes inside the html file itself are executed. Copy the following code in your text editing software:

< html >   < head > < style type = “text / css” > body {background-color: blue; }       < / style > < / head >   < body >   < p > this is a paragraph < / p >   < / body >< / html >

Then save the file named index.html, which has the html extension, and open it with your Internet browser. You can see that we use a pair of tags to write CSS within the html file, and these two tags should be written in the head section of the html page, that is, between the two tags. The same body tag code that we wrote in the CSS file in the previous example, this time between the two tags. Note that in the tag, the type attribute is set to text / css.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top