Scribd
Upload
24 views10 pages

HTML and Css

The document provides an introduction to HTML and CSS, explaining that HTML is a markup language used to structure web content while CSS is used for styling that content. It outlines the basic structure of an HTML document, essential HTML tags, and different methods for applying CSS styles, including inline, internal, and external stylesheets. Additionally, it describes the syntax of CSS rulesets, which consist of selectors and declaration blocks.

Uploaded by

blessedjerry393
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views10 pages

HTML and Css

The document provides an introduction to HTML and CSS, explaining that HTML is a markup language used to structure web content while CSS is used for styling that content. It outlines the basic structure of an HTML document, essential HTML tags, and different methods for applying CSS styles, including inline, internal, and external stylesheets. Additionally, it describes the syntax of CSS rulesets, which consist of selectors and declaration blocks.

Uploaded by

blessedjerry393
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 10

HTML And CSS

Web design basics


Introduction to HTML

 HTML stands for Hyper Text Markup Language.


 From the name, we can infer that HTML is a markup
language.
 A markup language tells the browser how to display
content
 It’s the standard language used to create and structure
content on the web.
 No matter how advanced a website gets, at its core is
HTML.
Basic structure of an html
<!Doctype html>5
<html>
<head>
<title> Page Title Here </title>
</head>
<body>
<h1> Hello, world </h1>
<p> This is my first webpage </p>
</body>
</html>
Overview

 <!Doctype html>: declares the type of document


 <html>: Root element where every other element is
embedded
 <head>: Metadata, title and links to stylesheets
 <body>: The visible components of the webpage
Essential HTML Tags
Tag Purpose
<h1> - <h6> Headings (largest to smallest)
<p> Paragraphs
<a> Hyperlink
<img> Images
<ul>, <ol>, <li> Unordered list, Ordered list, List item

<div> Container for content


<br> Line break
Basic styling with CSS
 CSS stands for Cascading Stylesheet
 It is a language used to specify the look and feel of an
html page, that is: colours, fonts, and other styles like
animations.
 Plain pages tend to be boring, so web developers
make use of different styles to make html pages more
beautiful and presentable
Ways of Styling
1. Inline CSS:
In inline styling, the styles are applied in the element itself using
the style attribute
<p style=“ color : blue; ”> Blue Text </p>

2. Internal CSS:
The styles are applied in the html document under the <style>
tag.
<style>
p{
color : blue;
}
</style>
3. External stylesheet:
In external styling, the styles are specified in an external
stylesheet, which is essentially a document with the .css extension.
The stylesheet is then linked to the html page using the <link>
tag.

In the stylesheet (styles.css):

p{
color : blue;
}

In the html document (in the <head> tag):

<link rel = “stylesheet” href = “style.css”>


CSS Syntax
 A stylesheet is made up of what we call a ruleset.
 A CSS ruleset is made up of a selector and a declaration block.
 The selector, or group of selectors target the elements we want to style:

div {
background-color : black;
color : white;
}

in the example above, div is the selector


 The declaration block is what’s inside the curly braces.
 Each declaration consists of a property and value.

You might also like