Hyper Text Markup Language (HTML) is the standard markup language for creating Web pages. It describes the structure of a Web page
HTML is made up of a series of elements. These help in informing the browser on how the content is displayed.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
An example of HTML Webpage Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Elements explained
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
CSS
CSS is called Cascading Style Sheet. This is what aids in the styling and formatting of the web pages.
There are three methods of including CSS in an HTML document:
-
Inline styles — This is done by using the
styleattribute in the HTML start tag. -
Embedded styles — This is done by using the
<style>element in the head section of a document. -
External style sheets — This is done by using the
<link>element, pointing to an external CSS file.
Inline styles
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.
The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a semicolon (;), just as you would write into an embedded or external style sheets.
All need to be in one line i.e. no line break after the semicolon, as shown here:
<h1 style="color:purple; font-size:18px;">This is a heading</h1>
<p style="color:red; font-size:42px;">This is a paragraph.</p>
Embedded Style Sheets
They only affect the document they are embedded in.
Embedded style sheets are defined in the <head> section of an HTML document using the <style> element.
You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head>tags. Let's take a look at an example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External Style Sheets
This is used when the style is applied to many pages of the website.
Holds all the style rules in a separate document that you can link from any HTML file on your site.
You can attach external style sheets in two ways — linking and importing.
style.css
body {
background: lightblue;
font: 20px Tahoma, sans-serif;
}
h1 {
color: yellow;
}
Linking External Style Sheets
This is done by the <link> tag goes inside the <head> section, as you can see in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Importing External Style Sheets
This is done by the @import statement instructs the browser to load an external style sheet and use its styles.
You can use it in two ways. The simplest is within the header of your document.
<style>
@import url("css/style.css");
p {
color: green;
font-size: 24px;
}
</style>
The other way is by the @import rule to import a style sheet within another style sheet.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
These are some of the aspects of CSS I would love to share.
Top comments (0)