Build by boxes with HTML element
attribute gives more information about the element like how to display or what functionality to add
{ style an element / tell where to go once you click on the link // or what img to display }
Web page is —> HTML + CSS + JS
<!DOCTYPE html> // tells the browser the HTML version [HTML 5]
<html>
<head> // where we store all the inveseble elements
<title> page name </title>
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/> // adding tab icon
</head>
<body> // where we store all the visible elements
<header> </header>
<main> </main>
<footer> </footer>
</body>
</html>
<h1> // heading
<p> // paragraph element
<a herf="https:\\\\google.com" //link
target="_blank" // opens in a new tab
title="let go to google" // information when you hover
> text </a>
<br> // line brake also without closing tag / (cannot put anything inside of it)
<b>text</b> //bold the text
<i> // italic
<div> </div> //box
<img src="img/name.jpeg,,reletev URL ,local"> //img link don't have closer tag /
<!-- comment section -- > // adding comment to code // "ctrl + /" shortcut
<ol> // order list with numbers
<li> List </li> // list item with numbers under the order list
<ul> List </ul> // un order list with discs
<a href=https://google.com> </a> link
© // adding copyright simbel on HTML
style1
<h1 style="font-size: 30px; color:#9E3018; ;">Heading 1 - 1</h1>
<h1 style="font-size: 30px; color: salmon;">Heading 1 - 1</h1>
style element ruol set
under <head> elemet
<style type="text/css">
h1{
font-size: 30px;
color:salmon; }
</style>
class attribute styling
under <head>
.classNAme { // I declre
font-size: 60px;
{
under <body>
<h1 class="className"> Name </h1>
group classes under head
// will effect only when both classes paper together
.big.uppercase { color: navey ; }
------
<span>text</span> // black box without style by default and will inherit the style form the element its inside of
linking the CSS file with HTML code
under <head>
<link rel="stylesheet" type="text/css href="file_location.css">
// href shortcuts
../ one folder up
./ use the same folder
Change in css file
body { backgroung-color: lightgray; //body background
margin: 0; // no margin
font-size: 20px;
line-height: 30px; // adding space on the lines
}
header {
backgroung-color: #d14635;
text-align: center; // center the content in the header
padding-top 50px; // adding margin / padding
padding-top 50px;
}
header h1 {
color: white;
font-family: Helvetica, Arial, sans-serif; // adding fonts if he doset have the font he will use the second Arial and so on
}
header img{
border-radius: 170px;
width: 300px;
border: 20px solid #483a94;
}
main {
max-width: 800px;
margin: 0 auto; // shortcut forcentering items
padding: 0 20px; / setting the padding with the shortcut
}
main img {
max-width: 100%; // will be max of the main 800px we set
}
h2{
font-size: 30px;
color: #e70c19;
}
a {
color: #e70c19;
}
a:hover { // changing color once hover with the mouse
color:white;
background-color #483a94;
}
/* add comment */ adding a comment to the CSS (command + /)
<style>
.class {}
$id {}
element {}
.clsss #id a {}
div{
/* text */
color: red;
font-size: 20px;
font-weight: bold;
line-height: 30px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: underline;
font-style: italic;
font-family: 'Helvetica', 'Arial', sans-serif;
text-align: center;
/* background */
background-color: blue;
background-image: url('../img/ralph-avatar.jpg');
background-repeat: no-repeat; /* for a single image */
background-repeat: repeat; /* for a repeating image */
background-position: center center; /* X, Y position of where the image should start */
background: #CCC url('../img/ralph-avatar.jpg') no-repeat 20px 40px; /* background shortcut */
/* margin and padding */
margin-top: 10px; /* margin for a single-side */
padding-bottom: 10px; /* padding for a single-side */
margin: 10px; /* margin for all sides */
margin: 10px 20px; /* margin for top and bottom, and right and left */
margin: 10px 20px 30px; /* margin for top, right and left, and bottom */
margin: 10px 20px 30px 40px; /* margin for top, right, bottom, and left sides */
padding: 10px; /* padding for all sides */
padding: 10px 20px; /* padding for top and bottom, and right and left */
padding: 10px 20px 30px; /* padding for top, right and left, and bottom */
padding: 10px 20px 30px 40px; /* padding for top, right, bottom, and left sides */
/* borders */
border: 20px solid red; /* border shortcut (width, style and color) for all borders */
border-top: 20px solid blue; /* border shortcut for one side */
border-radius: 10px; /* rounded corners */
border-bottom-right-radius: 2px; /* style a single corner */
/* common displays */
display: block;
display: inline;
display: inline-block;
/* widths and heights */
width: 100%;
max-width: 700px;
min-width: 400px;
height: 100%;
max-height: 800px;
min-height: 500px;
/* other */
opacity: 0.75; /* use values from 0 until 1 */
}
ul{
list-style: none; /* removes discs */
}
/* flat list (on one line) */
ul.flat{
margin: 0;
padding: 0;
}
ul.flat li {
margin: 0 5px;
padding: 0;
display: inline-block; /* could use 'inline' as well */
}
/* center content (but not text) */
div{
width: 800px;
margin: 0 auto;
}
/* hover pseudo class */
a{
color: blue;
}
a:hover{
color: red;
}