17 April 2022
How to design a website using HTML and CSS?
We live in the world of the internet. This has of course been one of the revolutionary developments in recent times. No longer is vital information just restricted to books or printed materials. With the World Wide Web, you can web brows to any information you want. Search engines are of great help. When it comes to website development then the 2 most dominant languages are HTML and CSS. Let us first understand what they are.
What are HTML and CSS?
Hyper Text Markup Language or more popularly is known as HTML. This is what gives content structure and meaning. This is done in HTML by defining the content as. For example, headings, paragraphs, or images. Cascading Style Sheets or CSS on the other hand, is a presentation language created to style the appearance of content. Use of fonts or colors are done here.
Both the languages HTML and CSS are independent of one another. It must remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content. The CSS on the other hand should always represent the appearance of that content.
Understanding some common HTML terms
Elements
These are designators. These define the structure and content of objects within a page. Some elements are more frequently used. These include multiple levels of headings, usually identified by <h1> through to <h6> elements) and paragraphs (identified as the <p>element);
Tags
Elements in HTML are usually surrounded by the greater than and less than brackets. Everything put together is s known as a tag. Tags usually are in pairs ,like the opening tag and the closing tag.
Attributes
The properties which are used to provide additional information about an element are known as the attributes. The most common attributes include the id attribute. This identifies an element;
Setting Up the HTML Document Structure
HTML documents are plain text documents .These have to be saved with an .html file extension instead of a .txt file extension. To begin writing HTML, you first need a plain text editor that you are comfortable using. .2 of the popular plain text editors for writing HTML and CSS include Dreamweaver and Sublime Text. There are also some free alternatives. These are the Notepad++ for Windows and Text Wrangler for Mac.
Inside the <html> element, the <head> element identifies the top of the document. This includes the Meta data at the top of the document. The content inside the head element is not displayed on the web page. The visible content is inside the body element of the web page.
A typical HTML document structure looks as follows:
Basics of CSS
Some common terms used in the CSS are as follows.
Selectors
A selector determines the elements within our HTML to target and apply styles. This may be in terms of color, size , position, etc.
Properties
The property designates the styles that would be applied to that element. Property names fall after a selector. These are to be written within the curly brackets, {}, and immediately preceding a colon, :. We can use properties to set background, color, font-size, height, and width.
Values
After we have selected an element with a selector and determined the style we have to apply with a property. Thereafter we can determine the behavior of that property with a value. Values can be identified as the text between the colon, :, and semicolon, ;.
In conclusion we hope that we have been able to give you a fair amount of idea of the basics of HTML and CSS.
