html and css

by qeshm (https://qeshm.dev)

first, you can access these slides here

https://html1.qeshm.dev/

https://qeshmhtmllesson1.netlify.app/

both bring you to the same place so use either one

html

So, html stands for hypertext markup language

which just means it's the structure of a site

css

css is cascading stylesheets

which just means it's the styling of a site

now we are going to make some files

index.html
style.css

html

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

your code should now look like this

<!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>

the head tag

<head> </head>

has information that is not shown in the website.

eg. of things that go in it

<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)

the body tag

<body></body>

has information that is shown in the website.

eg. of things that go in it

<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

important ones

<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)

css

css mainly has to important things,

ID and Class

So those let u edit styles of only certain elements with that class/id

class vs id

class

Declared in html like this

<p class="”touchgrass”">hello</p>

Referenced in css like this

.touchgrass {
  //properties go here
}

The ‘.’ is for class

id

Declared in html like this

<p id="”touchgrass”">hello</p>

Referenced in css like this

#touchgrass {
  //properties go here
}

The ‘#’ is for class

Class can be assigned to multiple elements

Id can only be assigned to one

Here are all the css properties

https://www.w3schools.com/cssref/index.php

But here are some common ones

Common css properties

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)

you do not only have to use class or id,

you can also do this

h1 {
  //insert properties
}
h2 {
  //insert properties
}

eg.

h1 {
  //insert properties
}

So this one affects every single header 1 (h1 is header 1)

Note

Don’t use different headers because they are different sizes, use them to structure your webpage

Font sizes can be easily changed

now i'm going to show you guys how to make your own website

but first lets play a game

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