Scribd
Upload
59 views

Introduction To HTML & Css

This document provides an introduction to HTML and CSS. It defines HTML as the markup language used to define the structure and content of web pages. It describes common HTML elements and tags used to structure content, as well as how CSS can be used to style HTML elements through selectors that target elements by type, id, and class. It also outlines the different methods for adding CSS rules, including inline, internal and external stylesheets.

Uploaded by

Sanchit Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

Introduction To HTML & Css

This document provides an introduction to HTML and CSS. It defines HTML as the markup language used to define the structure and content of web pages. It describes common HTML elements and tags used to structure content, as well as how CSS can be used to style HTML elements through selectors that target elements by type, id, and class. It also outlines the different methods for adding CSS rules, including inline, internal and external stylesheets.

Uploaded by

Sanchit Gupta
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

Introduction to

HTML & CSS


What is HTML

Hyper Text Markup Language


• It is a markup language used to create the
content and semantic structure of Web pages.
• A Web page is comprised of a number of
HTML elements, each of which has a
particular meaning in the context of a Web
page.
Web Browsers

• The purpose of a web browser (Chrome,


Internet Explorer, Firefox) is to read HTML
documents and display them as web pages.
• The browser does not display the HTML tags,
but uses these tags to interpret the content of
the page.
HTML Tags

• HTML tags are keywords (tag names)


surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b>
and </b>
• The first tag in a pair is the start tag, the
second tag is the end tag
• The end tag is written like the start tag, with a
forward slash before the tag name
HTML Elements

• An HTML element is everything between the


start tag and the end tag, including the tags:
• HTML Element:
<h1>This is a heading</h1>
Element Attributes

• HTML elements can have attributes, which


provide additional information/usage
• Attributes are always specified in the start tag
• Attributes come in name/value pairs
Eg:
<div id=“container”
style=“background:#000;”></div>
<img src=“test.jpg” alt=“sample”
width=“200” height=“200” />
Essential tags

• <html>
• <title>
• <head>
• <body>
• <link type=“” rel=“” href=“” >
• <script type=“” src=“”>
• <style>
Basic Structure of a HTML document

<html>
<title>Page title</title>
<head></head>
<body>
****Content comes here****
</body>
</html>
Deprecated Tags and Attributes

• In HTML 4, several deprecated tags and


attributes were used to style documents.
These tags are not supported in HTML 5.
• Avoid using the elements <font>, <center>,
and <strike> and the attribute bgcolor.
Some important tags
• <h1> to <h6>-Headings
• <p> - Paragraphs
• <a href=“”> Anchor tag – links
• <img src=“”> – adding images
• <div> -adding divisions, basically used for layout
and with CSS
• <input type=“”> - checkboxes, text-area, submit
buttons, radio,etc.
• <form> - creating a HTML form
Note that the <img> and <input> do not have closing tags
Some important tags

• <table> creates a table


• <tr> - table row
• <td> - table cell
• <br> - break line
• <hr> - horizontal line
CSS

Cascading Style Sheets


• Styles define how to display HTML elements.
• CSS was introduced together with HTML 4, to
provide a better way to style HTML elements.
Types of style sheets

Browser User style


style sheets
sheets
Author style sheets
(default)

Inline Internal External


Adding CSS to HTML

CSS can be added to HTML in the following


ways:
1. Inline - using the style attribute in HTML
elements
2. Internal - using the <style> element in the
<head> section
3. External - using an external CSS file
• The preferred way to add CSS to HTML, is to
put CSS syntax in external CSS files.
Inline Styles

• An inline style can be used if a unique style is to be


applied to one single occurrence of an element.
• To use inline styles, use the style attribute in the
relevant tag. The style attribute can contain any CSS
property.
Internal Style Sheets

• An internal style sheet can be used if one single


document has a unique style.
• Internal styles are defined in the <head> section of
an HTML page, by using the <style> tag
External style sheets
• External style sheets enable you to change the appearance
and layout of all the pages in a Web site, just by editing one
single file!
• Saved in .css extension
• Each page must link to the style sheet using the <link> tag:
Style priority

1. Inline style
Decreasing
2. Internal style sheet Priority

3. External style sheet

!important – used with a style attributes to


override other style attributes assigned to an
element
CSS Syntax

h1 {color:#09C;font-family:Helvetica;}

Selector Property Value Property Value


CSS Selectors

• They allow authors to target specific HTML


elements so that they can be styled.
Type selector

The type selector is written using the element type only.

A type selector selects every instance of the element


type regardless of their position in the document tree.
ID & Class

In addition to setting a style for a HTML


element, CSS allows you to specify your own
selectors called "id" and "class".
• The id selector is used to specify a style for a
single, unique element.
• The class selector is used to specify a style for
a group of elements.
ID Selectors

• The id selector is written using a “#” followed


by the id value.

• Note: Class values are case-sensitive.


Browsers will interpret “a” and “A” differently.
Class Selectors

• The class selector is written using a “.”


followed by the class value.

• Note: Class values are case-sensitive.


Browsers will interpret “a” and “A” differently.
Class Selectors

• You can also combine type and class selectors to


isolate specific instances of an element. For
example:

• This means that only paragraphs with a class of


“big” will be selected.

You might also like