Basic Web Principles — HTML And CSS Explained

According to widely agreed tale, getting started
in tech has always been difficult, on my path I had the same experience. I was practically confused finding what to learn, starting out with courses I didn’t understand its prerequisites and jostling from one online learning platform to the other. In all, it felt like I was wasting my time until I spoke with a couple of friends and a mentor on adplist.com who told me that everything in programming revolves round the web and if I want to start off, I should start from the web. Starting from the web apparently means learning HTML, CSS and Javascript which are the web development fundamentals. In this article, I’ll explain the basic web principle, niching down HTML and CSS and how they make the web work. Here’s a list of what we’ll cover in this article: • The Web • HTML • CSS

The Web

For a basic understanding of web, it is a subset of the internet. World Wide Web, is a portion of the Internet that consists of pages that can be accessed by a Web browser. In other words, the web is a collection of files and codes that are stored in a server that is divided into two; (web browser client and web server) and are connected to the internet.

Internet

This is a network of computers that communicate with each other to send and receive data (information), and each computer is identified by a unique number called the IP address.

IP Address

An IP address is a lengthy string of numbers linked to every device connected to a network that uses the Internet as the medium for communication. To access a web on the internet, it loads through a browser which is known as the web client. For instance, someone sends you a link and when you click the link, your browser (web client) send a message to the website (web server) asking for the content of the link and the website’s server receives the message and shows the link contents. The client-side and server-side are referred to as the “front end” and the “back end», respectively. This whole process has to be constructed as lines of codes and that’s where HTML, CSS and the whole web development process comes in.

What is HTML?

HTML stands for Hypertext Markup Language.
It was founded in 1989 and it’s the first building block of a web page, core of every web page and starting point for anyone learning how to create content for the web.

How HTML works

Rather than using a programming language to perform functions, it uses a Markup language which uses tags end elements to create primary content of a web page. The browser then reads to understand the contents and purpose it serves in a webpage.

HTML Document

      
Hello World!
   

1. A declaration statement at the top stating that the document is an HTML 5 document
2. Header
3. Body

The tag in HTML is used to specify the version of HTML that a document is utilizing. This is also described as document type declaration(DTD).
Note that unlike other HTML tag, the
tag does not have an end tag.

tag is the second tag in an HTML document, all other tags are written in it and it closes as By using the opening
tag, the browser is informed that the page will be formatted in HTML.

The tag which has its closing written as expressly contain details about the body, the page’s title, the labels, etc. of a web page. Only specific markup elements like meta, link, script, etc. are permitted in the HTML 5 head title.

The is used to specify the primary content that will be shown on a website. Such content include: text, images, videos, links, etc.

What is CSS?

CSS stands for Cascading Style Sheet.
CSS is a stylesheet language created in late 1990s to make beautiful web designs. Adding CSS to a web page will make the web pages appear aestetically pleasing.

How CSS works

Like humans, we were created with skeleton which serves as a framework for the body, then we’re covered with the skin which gives beauty and makes human beautiful

The same thing with CSS, it works as the skin that covers HTML, it is used to create background colors, layout, styling, padding and every other designs that makes a webpage smart and beautiful.

Presentation and ease of use are a couple of the main things that CSS has bought to web design by translating the way content looks on a webpage and what else goes on it to complement that content.

CSS Syntax
A selector, property, and its value are the components of a CSS Syntax. The HTML element where CSS style is applied is indicated by the selector. Semicolons are used to separate each CSS property.

The HTML element you want to style is indicated by the selector.
One or more declarations are contained in the declaration block and are separated by semicolons.
A comma separates the name of the CSS property from its value in each declaration.

Types of CSS

— Internal CSS

    body p 
This is paragraph is set at yellow color.
   

Internal or embedded CSS works by adding CSS codes into tag in the section of an HTML document.
A single page can be effectively styled with this CSS style but takes time to use this style for several pages because CSS rules must be added to each page of the website.

— External CSS

This type of CSS works by adding an external .css folder that contains the whole stylesheet into the tag in an HTML document.

A large website can be styled more effectively using this CSS type. An entire website can be changed at once by making changes to the .css file.

— Inline CSS

Typically, inline CSS is only used to style one type of HTML element, by adding the CSS style attribute to each HTML element.

Conclusion

The first step to understanding web programming and web development is learning and understanding HTML and CSS and the most common and extensive use of learning HTML and CSS is to code for the web. Even if programming has applications in a wide range of fields, from cybersecurity to design employment, webpages are still built using HTML and CSS, with HTML serving as the structure and CSS serving as the finishing touches.

Understanding and utilizing the alternatives provided by these two programming languages will not only put you in a strong position to build your own websites, but it will also open up numerous doors and opportunities for learning additional programming languages.

In subsequent articles I shall be dissecting structures of each language and continue to open up our minds to web development.

Thank you for reading and see you soon!

Источник

HTML Styles — CSS

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS = Styles and Colors

What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to «blue», all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline — by using the style attribute inside HTML elements
• Internal — by using a element in the section
• External — by using a element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the element to blue, and the text color of the

element to red:

Example

A Blue Heading

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the section of an HTML page, within a element.

The following example sets the text color of ALL the elements (on that page) to blue, and the text color of ALL the

elements to red. In addition, the page will be displayed with a «powderblue» background color:

Example

This is a heading

This is a paragraph.

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the section of each HTML page:

Example

This is a heading

This is a paragraph.

The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

Here is what the «styles.css» file looks like:

«styles.css»:

Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

This is a heading

This is a paragraph.

CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

CSS Padding

The CSS padding property defines a padding (space) between the text and the border.

Example

Use of CSS border and padding properties:

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.

Example

This example uses a full URL to link to a style sheet:

Example

This example links to a style sheet located in the html folder on the current web site:

Example

This example links to a style sheet located in the same folder as the current page:

You can read more about file paths in the chapter HTML File Paths.

Chapter Summary

• Use the HTML style attribute for inline styling
• Use the HTML element to define internal CSS
• Use the HTML element to refer to an external CSS file
• Use the HTML element to store and elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

Tip: You can learn much more about CSS in our CSS Tutorial.

HTML Exercises

HTML Style Tags

Tag	Description
	Defines style information for an HTML document
	Defines a link between a document and an external resource

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник