Login to ZARP

TOPIC: [Coding Lesson] Part 2 HTML/CSS

[Coding Lesson] Part 2 HTML/CSS 7 years 9 months ago #625438

.

HTML/CSS Coding lesson

.

Hello my name is vitx im a player of DarkRP atm. Today im going to teach you all how to code HTML and CSS they are the most basic codes on our websites "WWW" World Wide Web. Every day i'm going to make lessons today we start at lesson 1 that we going to learn basic things. Then when we have come further in we going to start with PHP and SQL they are pretty basic aswell.

I'm a website programmer myself i just programming on my free time and i enjoy it pretty much and love todo project with PHP and HTML.

Softwere i use

ATOM Download

Dreamweaver Download

Contact me

Steam Profile

Introduction

Today we going to talk about more Elements and Paragraph and how to style them on a good way there is a few way you can style them. You can style them direct in your HTML or make a separate with a CSS file i'm going to teach how you do with both way. Then we going to start with a project.

First of all we start up our index.html

our code should look like this.

<!DOCTYPE html>
<html>
  <head>
    <title>Vitx home page</title>
    <link rel="stylesheet" href="test.css" type="text/css">
  </head>
  <body>
    <p>Hello website!</p>
  </body>
</html>

Link stylesheet

Now i'm going to teach how to link stylesheet to another CSS file to get the style working properly.

As you can see we already linked our styelsheet but we have no CSS file in our folder.

Explain few things

There is one important thing that you need to know for now and that is href="style.css" inside "" these marks you going to name what your CSS file is named.

    <link rel="stylesheet" href="style.css" type="text/css">

Go ahead and create a new text document then rename our text document to style.css and IMPORTANT you always need to rename the type of the file aswell.

<!DOCTYPE html>
<html>
  <head>
    <title>Vitx home page</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <p>Hello website!</p>
  </body>
</html>

Now when you have created and linked your stylesheet properly we going to get our text some colors some fonts and then we going to start on our project i have planed for you guys

Get some colors

We start to open up our style.css file then we type this code in our style on line 1, you can copy this code or code it yourself. When we styling things we wanna know what we going to style then we take the first tag of it like now we have a Paragraph that is <p></p> then we take our P then we follow our code down below. If you dont really understand feel free to add me on steam

stylesheet codes

p {
  color: red;
}

You might want the Paragraph to be bigger then we use a code called font-size

p {
  color: red;
  font-size: 100px;
}

There is 100 of things you can do with styleheet you can also try to get the text center with using text-align then you have three options left, center and right. but you always need to close the code with a ;

p {
  color: red;
  font-size: 100px;
  text-align: center;
}

Project

I wont start to code the project today but what we going todo the other lessons is a full complet login system with HTML, CSS and PHP/SQL
I hope you like this lessons and leave a support

vitx
Offline
Expert Boarder
Posts: 1015
Thanks received: 308
Karma: -38

Login or register to post a reply.

The following user(s) said Thank You: Wolfi

[Coding Lesson] Part 2 HTML/CSS 7 years 9 months ago #625580

Will be another coding lesson tomrrow aswell	vitx Offline Expert Boarder Posts: 1015 Thanks received: 308 Karma: -38
Login or register to post a reply.

[Coding Lesson] Part 2 HTML/CSS 7 years 9 months ago #625582

Can you give the link of part 1 ? I'll take a look.	Wonky Offline Gold Boarder unbothered Posts: 1944 Thanks received: 574 Karma: 100
Login or register to post a reply.

[Coding Lesson] Part 2 HTML/CSS 7 years 9 months ago #625587

Wonky wrote: Can you give the link of part 1 ? I'll take a look. Click here	SorIe Offline Marvelous Boarder Posts: 10846 Thanks received: 4309 Karma: 400
ex-dog LT member on many servers Login or register to post a reply.

[Coding Lesson] Part 2 HTML/CSS 7 years 9 months ago #625592

Sorle wrote: Wonky wrote: Can you give the link of part 1 ? I'll take a look. Click here Thank you kind woman.	Wonky Offline Gold Boarder unbothered Posts: 1944 Thanks received: 574 Karma: 100
Login or register to post a reply.