Understanding HTML and CSS Basics by seltileng dabukUnderstanding HTML and CSS Basics by seltileng dabuk

Understanding HTML and CSS Basics

seltileng dabuk

Completed work

Technical Writer

Website CSS

Web Designer

CSS3

Git

HTML5

Computer Software

Like this project

Completed work

Posted Sep 13, 2025

Technical writing. Explanation of HTML and CSS basics for web development.

Likes

Views

Tags

Technical Writer

Website CSS

Web Designer

CSS3

Git

HTML5

Computer Software

seltileng dabuk

Web Developer and also a Blockchain researcher

TechTribe

HTML is a markup language used to stucture webpages, it is the basic structure of any website or webpage. It is used to stucture the content of a website. It is like the skelleton of the web.

BASIC HTML STRUCTURE

<!DOCTYPE html>
<html>
    <head>
        <title>basic html structure</title>
    </head>
    <body>
    </body>
</html>

The <div> tag in HTML is used to group elements together for styling. It is used as a generic container. You can apply various CSS properties to a <div> tag, such as font properties, colors, and background colors, to style its content.

The <button> tag is an interactive element that can be activated by a user through a mouse. It is used to perform an action, such as submitting a form. you can customize their appearance with CSS.

The <style> tag is a semantic tag used for internal styling within the <head> tag of a html document. It is a better way of styling compared to inline styling even though in-line styling would be used at a certian point.

example

<head>
    <style></style>
</head>

CSS Cascading style sheet is a languge used for the design structure of a webpage it adds beautification and style to a web page. it is like the flesh of a webpage.

There a three types of styling in CSS. these are:

In-line styling: This is the styling that is done within the element or tag of the html document.

<!DOCTYPE html>
<html>
    <head>
    
    </head>
    <body style="background-color:red;">
          <h1 style="color:white;padding:30px;">INLINE CSS</h1>
    </body>
</html>

Internal styling: This is the syling that is done within the head element of the html with the style semantic tag <style></style>

example

<!DOCTYPE html>
<html>
  <head>
    <style>
        body {
          background-color: blue;
        }
        .id {
          color: white;
          padding: 50px;
        } 
    </style>
  </head>
  <body>
    <div class=id>INTERNAL CSS</div>
  </body>
</html>

External styling: This is the styling that is done by linking an external file which has the .css extension This is the prefered way of styling webpages.

<!DOCTYPE html>
    <html>
         <head>
            <link rel="stylesheet" type="text/css" href="https://sedicryptic.github.io/style.css">  
    </head>
    <body>
        <button class="btn"/>sign up</button>
      </body>
</html>

PROPERTIES IN CSS

It enhances the visual appearance of web pages by separating content from design, making it easier to maintain and apply consistent styles across multiple pages. Here are some key points about CSS:

Comments: CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Comments are ignored by browsers and do not affect how your webpage looks or works.

Colors: CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. You can define colors using names, hex codes, RGB values, and more.

Flexbox: CSS flex-grow, flex-shrink, and flex-basis properties are used to control the layout of flexible items within a container. This is essential for responsive design, allowing elements to expand or shrink based on available space.

Spacing in a flexbox container can be controlled using several properties.

THINGS TO UNDERSTAND IN CSS

When styling a tag that tag shoul be called and then styled. example

<!DOCTYPE html>
<html>
    <head>
        button{
        color: black;
        }
    </head>
    <body>
        <button>sign up </button>
    </body>
</html>

Anytime when styling when a class is declared to style that class you put a point and then the class you want to style

example.

<!DOCTYPE html>
<html>
    <head>
        <style>
        .go{
        color: blue;
        }
        </style>
    </head>
    <body>
        <h1 class="go">beginner</h1>
    </body>
</html>

CONCLUSION: HTML is the basic structure of the webpage and so should be well structured first before the adding CSS for styling.