DEV Community

Immaculate Njoroge
Immaculate Njoroge

Posted on

Introduction to HTML and CSS

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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Inline styles — This is done by using the style attribute in the HTML start tag.
  2. Embedded styles — This is done by using the <style> element in the head section of a document.
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

These are some of the aspects of CSS I would love to share.

Top comments (0)