INTRODUCTION
HTML - HyperText Markup Languages
HTML:
- HTML is the standard markup language for creating Web pages.
- HTML describes structure of web pages.
- HTML elements tell the browser and display the content.
HTML Element:
HTML is an element is defined by start tag,content and end tag;
Syntax:
<tag name>Content goes here</tag name>
Example:
<h1>hypertext markup languages and cascading style sheet</h1>
HTML PAGE STRUCTURE:
SIMPLE PROGRAM FOR HTML:
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<h1>introduction</h1>
<h2>hypertext markup languages</h2>
</body>
</html>
OUTPUT FOR WEB BROWER:
STEPS FOR CREATE HTML FILE ,SAVE A FILE AND RUN IN WEB BROWER:
- First up all,We are opening Notepad or Text Editor
- And then type the html program for user convenient
- Save the file with proper html file extension (ex: simple.html or simple.htm)
- Finally run in web browser.
- And display the output for browser.
CSS - Cascading Style Sheet
CSS :
CSS is languages to design an creating a web pages for HTML Document.
Why Use CSS :
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS Syntax :
A CSS rule consists of a selector and a declaration block.
INSERT CSS:
There are three ways of inserting a style sheet:
- External CSS
- Internal CSS
- Inline CSS
INLINE CSS:
An inline style may be used to apply a unique style for a single element.
<!DOCTYPE html>
<html>
<head>
<title>html</title>
</head>
<body>
<h1 style="color:maroon">introduction</h1>
<h2>hypertext markup languages</h2>
</body>
</html>
OUTPUT FOR INLINE CSS IN WEB BROWSER:
INTERNAL CSS:
An internal style sheet may be used if one single HTML page has a unique style.
<!DOCTYPE html>
<html>
<style>
<title>html</title>
<style>
body
{
background-color:yellow;
text-align:center;
}
h2
{
color:blue;
}
</style>
</head>
<body>
<h1>introduction</h1>
<h2>hypertext markup languages</h2>
</body>
</html>
OUTPUT FOR INTERNAL CSS IN WEB BROWSER:
EXTERNAL CSS :
With an external style sheet, you can change the look of an entire website by changing just one file!
simple-html.html
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<link rel="stylesheet" type="text/css" href="simple-css.css">
</head>
<body>
<h1>introduction</h1>
<h2>hypertext markup languages</h2>
</body>
</html>
simple-css.css
body
{
background-color:aqua;
color:black;
}
h2
{
color:maroon;
}
OUTPUT FOR EXTERNAL CSS IN WEB BROWSER:
IMPORTANT - KEYWORD :
- If your using these three method for implementing the CSS at a time.
- First priority is Inline CSS inserting method
- while using three method in one program, so we can use !important keyword for user convenient style sheet creation.
EXAMPLE:
Without !important keyword inline is high priority.
simple-html.html
<!DOCTYPE html>
<html>
<head>
<title>html</title>
<link rel="stylesheet" type="text/css" href="simple-css.css">
<style>
h2
{
color:white;
}
</style>
</head>
<body>
<h1 style="color:maroon;">introduction</h1>
<h2>hypertext markup languages</h2>
</body>
</html>
simple-css.css
body
{
background-color:aqua;
color:black;
}
h2
{
color:maroon;
}
OUTPUT FOR WITHOUT !IMPORTANT KEYWORD INLINE IS HIGH PRIORITY:
Example:
With !important keyword.
simple-html.html
<!DOCTYPE html><html><head> <title>html</title> <link rel="stylesheet" type="text/css" href="simple-css.css"> <style> h2 { color:white; } </style></head><body> <h1 style="color:maroon;">introduction</h1> <h2>hypertext markup languages</h2></body></html>
simple-css.css
body{ background-color:white !important; color:orange !important;}h2{ color:blue !important;}
OUTPUT FOR WITH !IMPORTANT KEYWORD:
simple-css.css
body
{
background-color:white !important;
color:orange !important;
}
h2
{
color:blue !important;
}
OUTPUT FOR WITH !IMPORTANT KEYWORD:
