Вы находитесь на странице: 1из 3

border: 1px solid powderblue; ===>width of the border or The CSS border property

defines a border around an HTML element


padding: 30px;espace betwen border and letters (1)
margin: 50px; defines a margin (space) outside the border
---------
#p01 {
color: blue;
}
<p id="p01">I am different.</p>===>id pour un seul element
also thre is:
p.error {
color: red;
}
<p class="error">I am different.</p>

---------
<head>
<link rel="stylesheet" href="styles.css">
</head> ===>style that equals to:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
--------
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>===>link
-------------
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color:green;
background-color: transparent;always
text-decoration: none;
}
a:hover {
color: yellow;
background-color: transparent; on put mouse on it
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent; ==>when click on ot
text-decoration: underline;
}
</style>
------
p {
color: red;
}in single url
--------------------------------
<a href="https://www.w3schools.com/html/" target="_blank">Visit our HTML tutorial!
</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser
---------------------------------------
image as a link
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
----------------------------------------------------------
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<h2 id="C4">Chapter 4</h2> ==>bookmark in the same page


Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
-----------------------

<img src="pulpitrock.jpg" alt="Mountain View">===>insert image


----------------------------------------------
<body>

<p>Click on the computer, the phone, or the cup of coffee to go to a new page and
read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400"


height="379">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
------------------------------------
background image in the hole body:
<body style="background-image:url('clouds.jpg')">

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the
element where it is specified, in this case the BODY element.</p>

</body>
---------------------------------
An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the
<th> tag.
By default, table headings are bold and centered. A table data/cell is defined
with the <td> tag.

<table style="width:100%">

<caption>Monthly savings</caption>==>ism yji fo9 tableau


<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
--------------------------------
background-color: #eee;hexa color RGB code= 14*16+14,14*16+14,14*16+14 or
14*16+14/256%
---------

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.
The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
ul=unordred list
ol:ordred list
u can use :<ul style="list-style-type:square"> to do a squar instant of bullet
--------------------------------
A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
exwmple:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
-------------
ovrflow =to add a scroll bar oh hide etc
------------------
Use the CSS property float:left or display:inline to display a list horizontally
li {
float: left;
}
---------------------------------
<div>Hello</div>===>block element will take all the space
-----------------------
The SPAN element is an inline element, and will not start on a new line
<span>Hello</span>
<span>World</span>
====>HELLO WORLD
-----------------