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.

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.

Setting Up The CSS File was originally published in Code Refresh. on Medium, where people are continuing the conversation by highlighting and responding to this story.

Today, our lives without the internet is an unimaginable situation. Everything we do is connected with the web and the huge lot of information on it. Anytime you want, you can just hop onto your favorite search engine and just scroll and click away between hundreds and thousands of websites.

And chances are someone somewhere has built a website with your exact search in mind.

I am going to show how to build your own websites using two of the most prominent computer languages — HTML & CSS.

HTML and CSS make up all the websites that you see. But, it is very important to understand these two languages, the differnce between them and the syntax of the two languages to put up a meaningful website.

HTML and CSS are languages that are mostly used by the front-end developers. To know more about front-end and back-end web development, you can see these articles by UpWork:

A Beginner’s Guide to Frontend Development

A Beginner’s Guide to Back-End Development

Frontend vs Backend Web Development

What are HTML & CSS?

HTML, Hyper Text Markup Language is what represents the content of your websites. The headings, paragraphs, images, buttons are all written with HTML. But only putting them up doesn’t mkae sense. You need to put them in a specific way and style them up to get everyone’s attention. You need to make your website stand out of the thousands and thousands of other similar ones.

CSS is Cascading Style Sheets. Yeah, even its name has style. CSS makes your websites beautiful. They change the way your headings, paragraphs, images and every other content appear on browsers.

HTML and CSS are always separate and they cannot be written in each other’s files. Both these languages are made up of a few basic terms and they need to be known to start writing the code.

Common HTML Terms

Elements

Elements define the contents within a page. Elements are what represents the headings, paragraphs, images, etc. The most common elements include the multiple levels of headings from <h1> to <h6>, paragraphs <p> and many more.

Elements are identified by the use of less-than and greater-than angle brackets, < >, surrounding the element name.

Tags

Tags most commonly occur in pairs of opening and closing tags. The opening tag begins an element and a closing tag ends it.

An opening tag is represented by only the less-than and greater-than arrows, whereas the closing tag also has a forward-slash after the less-than arrow.

They are written as:

<a>...</a>

The different parts of the webpages are mostly made up of tags.

Attributes

Attributes are different properties that are used to provide more information about each tag. The very common attributes include the class attribute and the id attribute.

The class attribute, classifies an element and the id attribute, identifies an element. The src attribute, specifies a source for embeddable content; and the href attribute, provides a hyperlink reference to a linked resource.

Attributes are written within the opening tag and after the tag name. The attribute name is followed by an equal to sign and then a quoted attribute value.

The above code will display the text Google and it will be acting as a link to google.com. Here hrefstands for Hyperlink Reference.

Common CSS Terms

Selectors

A selector designates exactly which element or elements within our HTML to target and apply styles to. Selectors can be written with many different qualifiers to specify exactly what we want to style. We may want to style one paragraph or all the paragraphs.

Selectors target the type, class or id. Selectors are written by writing the selector name followed by curly brackets {}, which includes all the styles that we wish to apply.

p {...}

Common selectors are of three types. It is important to fully understand how to use selectors and how they can be leveraged.

Type Selectors: Type selectors target elements by their element type. Like, if we want to select all paragraph elements, we can write a CSS selector like this:

p {...}

This CSS selects the following HTML:

<P>...</p>
<p>...</p>

Class Selectors: Class selectors allow us to select an element based on the element’s class attribute value.

Class selectors help us in selecting elements more specifically. We can specify the paragraphs we want to select and not select all paragraphs.

To write a class selector in CSS,we need to put a period before the class attribute value. For example, if we want to select all elements with the class attribute value of awesome, we first add the class attribute in HTML to the desired elements to be styled like this

<p class="awesome">...</p>
<h1 class="awesome">...<h1>

Then we add the CSS like this:

.awesome {...}

Any element with awesome attribute value is now selected and styled accordingly.

ID Selectors: ID selectors are even more precise than class selectors, as they target only one unique element at a time.

To write an ID selector in CSS, we use a hash before the id attribute value.

Similar to class selectors, we have to add an id attribute to the HTML element we want to style alone, like this:

<p id="learn">...</p> 

Then, we add css like this:

#learn {...}

Now, let’s continue to the next few common CSS terms.

Properties

A property determines the styles that will be applied to that element. Properties are written within the curly brackets, that define what kind of property is to be modified, like color, size, etc.

There are numerous properties we can use, such as background, color, font-size, height, and width, and new properties are often added. The property name is always immediately followed by a colon, : .

p {
  color: ...;
  font-size: ...;
}

Values

Now, to actually modify the style, we have to set the desired values to the properties.

Here we are selecting all <p> elements and setting the value of the color property to be red and the value of the font-size property to be 16 pixels.

p {
  color: red;
  font-size: 16px;
}

The values are always followed by a semi-colon, ; and is very important because without a semi-colon, the code will be completely invalid and nothing will work.

To know more CSS terms and definitions, you can visit this article by Impressive Webs: CSS Terms and Definitions.

________________________________________

We will further see how to attach HTML and CSS and will also create a document to work on.

________________________________________

Getting to know web pages, HTML & CSS was originally published in Code Refresh. on Medium, where people are continuing the conversation by highlighting and responding to this story.