Setting Up The CSS File
Before you start with this article, make sure you have a HTML file set up. Setting up a HTML file is easy. To write HTML code you need to have a text editor that supports syntax highlighting. I would suggest you start with Sublime Text editor. You can also use Notepad++ or Brackets.
Create a new directory and create a new text file with a .html extension. Name it “index.html”. You can name it any file you desire, but there is a reason why most developers use index as the name and you will know the reason later in this article. Once you have created a HTML file, type in the HTML structure inside it.
The structure is as follows:
Here, the “!DOCTYPE html” declares the type of file. Next we have the html element that will hold everything else of your html file. The head and body elements are indented inside it. The head holds all the necessary information about your file and the body holds the structure that will be visible on your webpage.
The head includes some basic information, which is again a must for most HTML files as displayed below:
Skipping the meta element for now, lets talk about title. Whatever text the title element holds is displayed as the heading or most probably, the name of your page. It is the text which you can read on your browser tab. This text varies page to page.
The link element is explained in this article further. Further comes the body, where you can use the previously discussed elements like <h1> or <h6> to with both the starting and ending tags to write anything on the webpage.
Try writing something like this in the body:
Now save this file and open the index.html file on any browser you like (or just drag the file to any open browser tab). You just wrote a basic and most probably your very first HTML code. Congrats!
This structure is a must for every HTML file and it is not valid without the exact format as described above.
Now that you understand the basic characteristics of HTML and CSS, you need to know how to bring these together. HTML alone does not look good and your webpage might just not get noticed by internet surfers. While CSS is just nothing without HTML.
There are several ways you can attach your CSS file to the HTML file. This process is known as CSS referencing and I am discussing one way to make your CSS shine on your HTML which is used by most developers.
The best practice is to create a separate file for CSS and write all the design code in it. This external file or sheet can be easily referenced in the head section of the HTML file to make the code communicate. Using a single sheet can also help you maintain a consistency of style throughout your website.
Your website might have more than one page and referencing the same CSS file will help you applying the default style of your website throughout all pages without typing new CSS for every new page.
Get Project Code Refresh’s stories in your inbox
Join Medium for free to get updates from this writer.
To create a CSS file, we can follow the same process of creating a HTML file, but now save it with a .css extension. Now, the best practice is to save our CSS file in the same folder as that of the HTML file. Most developers use the name main.css to name the main CSS file of the website.
Now coming to the actual referencing, we can use the <link> element to define a path to get the code of our CSS file. Now to link the CSS, we use the attribute rel and assign the value of “stylesheet” to it. Finally we put the href
attribute to state the location of our CSS file.
Here is an example of the <head> of a document to reference your style file.
If your CSS file is placed in some other folder than the one where your HTML is kept, make sure your href is updated with the right path. If say you have stored it in the “styles” subdirectory, write the value in href like this style/main.css.
There are other ways of referencing CSS like inline CSS, which you can read on the internet, but is not a preferred option.
If you have reached this far, your CSS is now talking to HTML and now the only thing to see forward is how to start a CSS file. By now, you might have seen that HTML has a default style set to it. If you haven’t, try dragging your HTML file to a blank browser tab.
Now it is important for you to realise that this default style is not given to it by your file or computer but by your browser. The default style varies browser to browser and before we start styling our webpage, we must bring the page to a standard style that will be equivalently displayed on all browsers out in the market. There are more browsers in the market than you think you know. To create a good user experience and to make sure that all of your audience looks at the same website, we use resets.
For this purpose, we use what is known as CSS Resets. These resets define an unified style for all browsers. Because CSS code sets itself up or reads from top to bottom, it is important that we use the resets before any styling we apply.
There are several resets available out there, all of which have their own way of unifying your HTML result. One of the most popular resets and the one that I use mostly is the one by Eric Meyer. You can also use Normalize.css by Nicolas Gallagher.
Now to actually set up your CSS file, create a new file in the folder that contains your index.html file and name it main.css. Open the main.css file with your text editor and the first thing you write on it should be the CSS reset.
Here is the reset from Eric Mayer:
Once you are done, save the CSS file and now open the index.html file in your browser. It is most probable that your webpage looks a bit different now and also more unified.
This is where you can say that you know how HTML and CSS works. You haven’t seen much of CSS yet and there is a lot to come ahead.
If you liked what you read, maybe clap for it. Thank you.
And yes, here is why we developers name the starting HTML file as index.html. When you are done with developing a complete website, you will need to upload the files onto a web server that will help you go online and people around the globe will be able to see it. Now, your website might have many HTML files and you will need to upload them all to the server. It is a basic character of the servers to take your index.html as the starting for your website, what we know as the home page which your website visitors will see first. This characteristic of the servers help in eliminating any confusion of how a website will be presented to anyone.
