3. Example:
<!doctype html>
<html> //open tag//
<body>
<h1> My first heading </h1>
<p> My first paragraph </p>
</body>
</html> //close tag //
Visible page content
Describe the web page
Output:
My first heading
My first paragraph
4. HTML Element
• Block level Element
i) behaves like blocks, block level like
<p>,<h1>,<div>,<ul>,<ol>,<pre>,<address>,<form> .
ii) This elements always starts in new line and occupy full width of parent
element.
• Inline Element
i) Starts in the same line.
ii) Their width is equal to their content
<b>,<l>,<s>,<u>,<strong>,<del>,<sup>,<sub>,<anchor>,<span> .
iii) <img> tag supports width and height.
6. Introduction
• CSS stands for Cascading Style Sheets.
• Its the language we use to style an HTML document.
• Its describes how HTML elements are to be displayed on screen , paper or
other media.
• Its saves a lot of work. It can control the layout of multiple web pages all at
once.
• External stylesheet are stored is CSS files.
7. Why use CSS?
CSS used to define styles for your web page including the design , layout and
verification in display for different devices and screen size.
Example:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-size: 20px;
}
8. CSS can be added to HTML documents in 3 ways:
1.Inline - by using the style attribute inside HTML elements.
2.Internal - by using a <style> element in the <head> section.
3.External - by using a <link> element to link to an external CSS file.
CSS Selectors:
CSS selectors are used to "find" (or select) the HTML elements you want to
style.
We can divide CSS selectors into five categories:
•Simple selectors (select elements based on name, id, class)
•Combinator selectors (select elements based on a specific relationship
between them)
•Pseudo-class selectors (select elements based on a certain state)
•Pseudo-elements selectors (select and style a part of an element)
•Attribute selectors (select elements based on an attribute or attribute value)
9. Selector Example Example description
#id #firstname Selects the element
with id="firstname"
.class .intro Selects all elements
with class="intro"
element.class p.intro Selects only <p>
elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element,element,.. div, p Selects all <div>
elements and all <p>
elements
All CSS simple sectors:
10. Difference between HTML and CSS
HTML CSS
HTML is used to define a structure of
a web page.
CSS is used to style the web pages by
using different styling features.
It consists of tags inside which text is
enclosed.
It consists of selectors and
declaration blocks.
HTML doesn’t have further types. CSS can be internal or external
depending upon the requirement.
We cannot use HTML inside a CSS
sheet.
We can use CSS inside a HTML
document.
HTML is not used for presentation
and visualization.
CSS is used for presentation and
visualization.
HTML has comparatively less backup
and support.
CSS has comparatively higher backup
and support.