by qeshm (https://qeshm.dev)
both bring you to the same place so use either one
which just means it's the structure of a site
which just means it's the styling of a site
index.html style.css
So html is written using tags! Like this
<p></p>
The first one is a opening tag The one with the / is the closing tag First create some boilerplate code in your index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="description" content="hello world" /> </head> <body></body> </html>
<head> </head>
has information that is not shown in the website.
<title>Document</title> -- Adds a title (shows up in the tab) <link rel="stylesheet" href="style.css" /> -- Connects your styles.css <meta name="description" content="hello" /> -- Adds a description (shows up in google search)
<body></body>
has information that is shown in the website.
<h1>my site</h1> -- makes a header 1 <h2>hello</h2> -- makes a header 2 <p>skill issue</p> -- makes a paragraph
https://www.w3schools.com/tags/default.asp here are some more tags
<p></p> <h1-6></h1-6> <a href="https://qeshm.dev">qeshms pro site</a> --links <div></div> -- makes a div that u can style with classes (will explain later)
Declared in html like this
<p class="”touchgrass”">hello</p>
Referenced in css like this
.touchgrass { //properties go here }
The ‘.’ is for class
<p id="”touchgrass”">hello</p>
#touchgrass { //properties go here }
The ‘#’ is for class
https://www.w3schools.com/cssref/index.php
background-color: insertcolor; – changesbg color color: insertcolore; –changes font color font-size: insertsize (px, em, etc); – changes font size padding-top/left/bottom/right: insertamt; –adds some padding margin-top/left/bottom/right: insertamt; –same as padding but diff (next slide) border-top/left/bottom/right: insertamt; –same as padding but diff (next slide)
h1 { //insert properties } h2 { //insert properties }
h1 { //insert properties }
So this one affects every single header 1 (h1 is header 1)
Don’t use different headers because they are different sizes, use them to structure your webpage
Font sizes can be easily changed
elaborate
styling (bold, italic, underlind)
attributes properties and stuff
types of styling (inline external and stuff internal)
Some notes here that might be useful.
gimkit