HTML/CSS

HTML is a markup language used to write the structure of a web page. A heading, a paragraph, an image, a link, and a form are placed on the page with HTML. HTML is not a programming language. It tells the browser what is there.

CSS writes how that structure looks. Color, size, typeface, spacing, and whether items sit side by side or one under another are the job of CSS. CSS is not a programming language either. It is a style language.

The browser reads the HTML first, then applies the CSS rules to the matching elements. What happens when a button is pressed is usually written in JavaScript.

HTML and CSS are used for the visible part of a web page:

• Articles and simple sites
• Forms and buttons
• Menus and page layout
• Placing images and text
• A layout that fits a phone and a computer screen

The part you see in many web applications is also built on HTML and CSS. Calculating and storing data belongs to another part of the system.

With HTML and CSS you can prepare the structure and the look of a page:

• Write headings and text
• Add an image and a link
• Style a button and a form
• Place elements in rows and columns
• Change the layout when the screen width changes

A simple example

<h1>Nibras Code</h1>
<p>A simple page.</p>

This HTML creates one heading and one paragraph. Color and size are written in separate CSS.

Writing a first HTML page is not hard. A few tags and one CSS rule already show a result in the browser. It gets harder when the page grows, when elements sit inside one another, and when the same look must hold on more than one screen size.

This order is useful at the start:

1. Heading, paragraph, link, and image tags
2. Opening and closing a tag
3. A CSS selector: which element the rule applies to
4. Color, typeface, and margin
5. Width and height
6. Placing elements side by side
7. Writing a small page yourself

Changing a small page yourself teaches more than copying a finished template.

Advantages

• A simple page opens directly in the browser
• The first examples are short and the result is visible at once
• Almost every web page is built on these two languages
• HTML can hold the content while CSS holds the look
• There is no separate fee for the languages themselves

Disadvantages

• By themselves they do not write accounts, sign-in, or data logic
• On a large site, CSS rules can start to clash
• The same page still needs a check in more than one browser
• When the look is wrong, the cause is often an unclosed tag or a selector that does not match

An HTML element usually has an opening tag and a closing tag. A CSS rule has a selector and the properties inside curly braces.

HTML

<h1>Nibras Code</h1>
<p>This is a paragraph.</p>
<a href="https://nibrascode.com">Open the site</a>

CSS

h1 {
  color: #1d4ed8;
  font-size: 32px;
}

p {
  line-height: 1.6;
}

Where it is written

CSS can live in its own file and be linked from the HTML. In a small example it can also sit inside a style tag. A separate file is tidier for a larger page.

A small page

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Nibras Code</title>
    <style>
      body { font-family: sans-serif; }
      h1 { color: #1d4ed8; }
    </style>
  </head>
  <body>
    <h1>Nibras Code</h1>
    <p>HTML writes the structure. CSS writes the color.</p>
  </body>
</html>

A link and an image

<a href="https://nibrascode.com">Nibras Code</a>
<img src="logo.png" alt="Nibras Code mark">

A class style

<p class="note">A short note.</p>

<style>
  .note {
    background: #f3f4f6;
    padding: 12px;
  }
</style>

The short samples above show one piece. These ones are small pages you can save as an .html file and open in the browser. Change a color or a word, save again, and refresh. HTML says what is there. CSS says how it looks.

A card

article is the box. h2 is the title inside it, p is the sentence. The class name kart is the hook. CSS finds every element with that class and gives it a width, a light background, a thin border, and space inside. Without the class, the words still show, but they have no box.

<article class="kart">
  <h2>Python</h2>
  <p>Oxunaqlı dildir. Kiçik proqram üçün uyğundur.</p>
</article>

<style>
  .kart {
    max-width: 280px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
  }
</style>

The card stays under 280 pixels wide. On a wide screen it does not stretch across the whole page.

Two links in a row

nav holds the links. Without CSS they sit one under the other, or as plain blue underlined words. display: flex puts them side by side. gap is the empty space between them. text-decoration: none removes the underline. The address in href is where the link goes.

<nav>
  <a href="/programming/python">Python</a>
  <a href="/programming/javascript">JavaScript</a>
</nav>

<style>
  nav { display: flex; gap: 16px; }
  nav a { color: #1d4ed8; text-decoration: none; }
</style>

The words stay blue. The underline is gone. If flex is removed, the row falls back to the browser's normal line.

A short form

label is the name next to the field. input is the empty line where a person types. button is what they press. The form itself is only a column: the field, then the button, with a small gap. This example does not send the name anywhere. Sending needs a server, or JavaScript. Here you only see the shape.

<form>
  <label>
    Ad
    <input name="ad" type="text">
  </label>
  <button type="submit">Göndər</button>
</form>

<style>
  form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 240px;
  }
  input, button { padding: 8px; }
</style>

The field and the button share the same width, 240 pixels. The typed name is not saved by this page alone.

A page with a dark bar

This is a whole file, not a piece. header is the dark strip at the top. main is the white part under it. body { margin: 0 } removes the white frame the browser adds by itself. The color and the padding are CSS. The words Nibras Code and Birinci qeyd are HTML. Save it as note.html and open that file.

<!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="utf-8">
  <title>Qeyd</title>
  <style>
    body { margin: 0; font-family: sans-serif; }
    header { background: #111827; color: white; padding: 16px; }
    main { padding: 16px; }
  </style>
</head>
<body>
  <header>Nibras Code</header>
  <main>
    <h1>Birinci qeyd</h1>
    <p>Bu sətir əsas hissədə durur.</p>
  </main>
</body>
</html>

The top bar is dark and the text on it is white. The heading sits below the bar, not inside it.

What is HTML?

HTML is the markup language that writes the structure of a web page: headings, text, images, and links.

What is CSS?

CSS is the style language that writes how the page looks: color, size, typeface, and layout.

Is HTML a programming language?

No. HTML is a markup language. It says what is on the page. It does not write calculations or conditions.

Does a page open without CSS?

Yes. The browser still shows the HTML. The look can stay plain.

Are HTML, CSS, and JavaScript the same?

No. HTML writes structure, CSS writes appearance, and JavaScript writes behavior.

Do I need to buy a program to learn them?

No. A text editor and a browser are enough to start. Save the file as .html and open it in the browser.

Are HTML and CSS free?

Yes. There is no fee for the languages themselves when you write them and open them in a browser.