FANDOM


OverviewEdit

In this lesson we will continue learning HTML, but we will now learn some of the more powerful stylizing options by using CSS (Cascading Style Sheets).

Introduction to CSSEdit

This is the most important topic in HTML programming. CSS gives us so many options that HTML is pretty useless without it.

StyleEdit

You will find most CSS related things inside the head tags. Inside of it you will need to create a tag <style> and end it with </style> . It is inside of here you will do almost all of the work.

CSS FormatEdit

All CSS sheets have this general form:

TAG_NAME {
     ATTRIBUTES
}

The tag names can include just about any tag we have seen so far. The attributes can vary so much I will just include links to a page of stuff you can change.

ScopeEdit

In CSS you can edit entire tags like h1, b, body, etc. You can modify several at the same time by separating them with a comma. The compiler will interpret the command in the most defined scope.

Here is an example:

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2 {
    background-color: #6495ed;
    color: yellow;
}

h2 {
    color: red;
}
</style>
</head>
<body>

<h1>First </h1>
<h2>Second </h2>
</body>
</html>

ID'sEdit

In CSS, there is a very useful way to just modify one use of a tag instead of all the uses for the tag. You can do this by putting an equality in a tag within the HTML document.  Here is the syntax for the use:

<h1 id="name">First </h1>

Here is the syntax for referencing it in the style section:

#name {
    color: red;
}

Explore!!!Edit

CSS is an art and is difficult to teach every single usage for it. Instead, when you think of something you want to change about your page you should just look it up. Here are a few nice places to look:

Images and BackgroundsEdit

The last few things I want to add to this lesson are how to use images and backgrounds.

ImagesEdit

Images are used in many different ways in HTML and CSS but they can really be described pretty easily.

Here is the syntax for adding an image to HTML(without using CSS):

<img src="URL OF IMAGE">

There are plenty of other things you can modify in the images but this is the fundamental syntax of it.

Here is a complete usage:

<!DOCTYPE html>
<html>
<body>

<img src="https://s-media-cache-ak0.pinimg.com/originals/c6/df/a2/c6dfa22150790c670c988c5196f6ba0e.jpg">

</body>
</html>

The image types you can use are: .jpg, .jpeg, .png, and .gif. There might be some other ones like bitmaps but just stick to those.  You can do editing to images in the same way as other tags in CSS. With it you can change things like dimensions of the image, margins, etc. You can also make image links simply by putting the img tag between the a tags.

There are lots of possibilities to look at for this one so just try some out.

BackgroundsEdit

Background related things are done (almost) entirely in CSS. You do it by modifying the body tag. For backgrounds, you can make things like solid colors, tessellating (repeating) images, fixed images, etc. In CSS, here are a few of the modifiers: background-image, background-color, background-repeat, background-attachment. W3schools has a good article on this so here it is.

It is pretty straightforward so try some things out and see what kinds of things you like.

div tagEdit

I have had a few questions about the nature of the div tag in html. It is an arbitrary tag in that it does not do anything. It changes absolutely nothing but it is useful in that you can use it to section of pieces of code and then use CSS on them.

Learning from other peoples' codeEdit

It is very useful in HTML and CSS to look at the code that professionals write. It will make you a much better programmer at it. You can do this by pressing F12 on windows or by right clicking while on a website and choose something like "Inspect element". You will need to expand all of the sections but you should now be able to read and understand a good amount of the code you run across. You will see things about php and script; IGNORE THOSE FOR NOW! we will get to them later. Check out some of your favorite websites and see some of the tactics they are using.

Problems Edit

  1. Create an html page that is as similar as you can to the front page of this wiki. You can use the images by using the F12 image like I suggested. (You won't be able to get any interactivity beyond links.)