Scribd
Upload
47 views7 pages

DOCTYPE HTML

Uploaded by

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

DOCTYPE HTML

Uploaded by

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

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bb.css">
</head>
<style>
h1 {
background-color: peru;
}

* {
color: brown;
}
</style>

<body>
<h1>why im handsome</h1>
<ol>
<li style="color: darkred; font-size: 30px;"> im handsome</li>
<li style="text-align: center; text-decoration: line-through;">im
handsome</li>
<li>im sooo handsome</li>
</ol>
<ul>
<h1>all of my guys say na me be party animal</h1>
<li class="yardies">this yardies telling me dance</li>
<l1 style="background-color: pink;">shii i should have just flung
my shoulder</li>
<li style="font-size: 30px; font-weight: 900;">079 hand it
over</li>
<img src="" alt="">

</ul>
</body>

</html>

Home work

1. Research on css tags


2. What do this css tags do; text indent, text decoration, font style, test transform, background
image

1. CSS Tags:
CSS (Cascading Style Sheets) is a style sheet language used to
describe the presentation of a document written in a markup language
like HTML. CSS tags are used to apply styles to HTML elements and
control the layout, appearance, and behavior of web pages.

Some common CSS tags include:

 <style>: Used to define the styles for a web page within


the <head> section.
 <link>: Used to link an external CSS file to the HTML document.
 Element selectors (e.g., h1, p, div): Used to apply styles to
specific HTML elements.
 Class selectors (e.g., .my-class): Used to apply styles to elements
with a specific class.
 ID selectors (e.g., #my-id): Used to apply styles to a specific
element with a unique ID.
 Pseudo-class selectors (e.g., :hover, :active): Used to apply styles
to elements based on their state or position.
2. CSS Property Explanations:
 text-indent: This property specifies the indentation of the first
line of a text block. It can be used to create a hanging indent or a
regular indent.
 text-decoration: This property is used to set the text decoration
style for an element, such as underlining, overline, line-through,
or none.
 font-style: This property specifies the font style for the text, such
as normal, italic, or oblique.
 text-transform: This property controls the capitalization of the
text, allowing you to set it to uppercase, lowercase, or capitalize
the first letter of each word.
 background-image: This property sets one or more background
images for an element. The images are displayed in the order
they are specified, and they can be positioned using other
background properties.
Here's an example of how these CSS properties can be used:
css

/* Text Indent */
p {
text-indent: 2em;
}

/* Text Decoration */
a {
text-decoration: underline;
}

/* Font Style */
h1 {
font-style: italic;
}

/* Text Transform */
h2 {
text-transform: uppercase;
}

/* Background Image */
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Remember that these are just a few examples of the many CSS properties
available. CSS provides a wide range of options for styling and manipulating
the appearance of web pages.
Selector
Type---> name of tag e.g p,b,div
Class--->.
Id- #
Universal-*

Priority order for selectors;(most


important)
Id,universal,class,type

<del>this draws a line through text


E.gfisayo is fine
<ins> this underline text
E.g This is a paragraph
<blockquote> this indent a paragraph
e.g this is a paragraph
this is a paragraph
this is a paragraph
this is a paragraph
format using style sheet

padding; 20px 0px 40px 60px;


top right bottom left
this applies to both margin and padding
margin: outside of the element
padding: inside of the element
boarder: width color style:
boarder: 1px red style
margin: 25px 50px;
The top and bottom are 25px and right
and left is 50px

Selector-name:psudoclass{
Property:value
}
E.g{
Background-color:black
}
BLOCK ELEMENTS
BLOCK ELEMENT
These include;
p,div,form,h1,h2,h4,h3,h5,ol,ul,section,
men
Semantic tags:
Section,header,footer,nav,main
Inline elements
Span,anchor(a),italics(i),image

You might also like