Learning Web Design

Get Help, Tips & Tutorials on Using Your Computer.

Re: Learning Web Design

Postby MaTT » Sun Apr 14, 2013 4:28 pm

Formatting text in HTML

Ok, so now you know what to do to start writing HTML, and you know where to put all the stuff that will display on your web page. However, typing some text by itself is very boring, without formatting.
For example:
Bold
Italic
Underline
Highlight
Size
Colour
Family
Heading
Paragraphs



Web designers tend not to use HTML for formatting anymore, CSS is used much more which we will get onto later. For now we will stick with HTML. What you can do to start with is open the HTML file you made before or you can start a new one.

SHOW | Inside your HTML file
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>
Hello World

</body>
</html>


Basic Formatting

To make text bold, you can use two different tags; <b>text</b> or <strong>text</strong>
To make text italic, you can use two different tags; <i>text</i> or <em>text</em>
To make text underlined, you can use <u>text</u>
To make text marked (with a yellow background), you can use <mark>text</mark>

These are the basic formatting tags, the others use more advanced variations of tags, you'll see what I mean...

Headings

Text can be made into a heading using the <h#> tag; the # provides different levels of headings and can be made customisable with CSS to create different types of headings. By default (without CSS), the higher the number, the smaller the text gets, but the maximum number is 6. Try it out!
<h1>text</h1>
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
<h5>text</h5>
<h6>text</h6>

The rest of the formatting can be done using the <font> tag but with different things inside it called Attributes. Attributes are basically different options you can set to tags. To set these options, you put the Attributes that the tag uses inside the <tag>. For example, you would type it like: <tag attribute="value" attribute2="value">text</tag>. Attrivutes are a very important part in HTML, it means you can use tags to change your webpage, but change the tags further to suit you.

Colouring

So to make text to different colours, you can use the following tag with the attributes:
<font color="colour">Coloured Text</font>

What you need to do is to replace colour with a colour name, hexadecimal colour code, or an RGB colour code (which i've never used because it's just easier to use colour names and hexadecimal colour codes). They are explained in a second, but first it is very important to consider the spelling of colour. "Color" is the American English spelling and this one needs to be used in HTML while "Colour" is the English spelling and this one can't be used in HTML.

Colour Names
You can type the names for colours into the attribute to change the colours, for example:
<font color="red">Coloured Text</font>
<font color="yellow">Coloured Text</font>
<font color="green">Coloured Text</font>
<font color="blue">Coloured Text</font>
<font color="lightgreen">Coloured Text</font>
You can use this list to see all of the colour names

Hexadecimal Colour Codes
You can also use the Hexadecimal colour codes for colours. Those of you who are familiar with the colours on the forum will know that you can use [color=#FF0000][/color] (for example) to change the colours. By selecting a different colour in the Font Colour tab, you will notice that the #FF0000 will change to #00FF00 (for example) if you choose green. This is the colour code, if you learn machine code, you will notice that this code uses Hexadecimal, but it's not important for you to know that.
The colours under the Font Colour tab only show 125 different colours so it's only using 125 colour codes. Altogether there are 16,777,216 different colours that can be displayed using Hexadecimal colour codes.
You can use this Colour Picker to get any colour in any shade (you can even mix colours with this) that you would like to use with Hexadecimal colour codes.
Here are some examples:
<font color="#FF0000">Coloured Text</font>
<font color="#FFFF00">Coloured Text</font>
<font color="#008000">Coloured Text</font>
<font color="#0080FF">Coloured Text</font>
<font color="#00FF80">Coloured Text</font>

We're not going to go over RGB colours because it's better to use colour names and hexadecimal colour codes. If you want to learn RGB in HTML, you can Google search it.

Font Sizing

You can change the size of text by using a different attribute in the <font> tag. That attribute is size="#". You would replace # with a number from 1 to 7. CSS offers much more different options for size, but like I said, we are going to move on to CSS another time. The default size is 3 so you can make text smaller with a number below 3 and bigger with a number above 3. For example:
<font size="7">Sized Font</font>
<font size="6">Sized Font</font>
<font size="5">Sized Font</font>
<font size="4">Sized Font</font>
<font size="3">Sized Font</font>
<font size="2">Sized Font</font>
<font size="1">Sized Font</font>

Font Families
Font families could be called font styles, basically it changes the shape of the letters, numbers and punctuation of a word/sentence. If you look at the top of the post box (in the forum) at the tabs, you will see a drop-down list called Font Family, this will do just that in your posts. The default Font Family is Times New Roman and you can change that with the attribute called face="font family name" obviously replacing font family name with the name of the Font Family. Unfortunately, you can only choose a specific few that are supported by HTML. There are a list of "Web-safe" fonts here but not all of them are guaranteed safe.

Because some fonts might not be on the computer of some other people, therefore you can add more font names into the attribute as "back-up fonts" and put commas (,) between them to separate them. They are listed in priority of use, so the first font will be used, and if it doesn't work on someone's computer, the web page will try and display the next font listed and so on. For example:
<font face="Times New Roman">"Times New Roman" Font Family</font>
<font face="Lucida Console">"Lucida Console" Font Family</font>
<font face="Palisoc,Verdana">"Verdana" Font Family</font>

On the last one, because "Palisoc" isn't recognised by your computer (unless you have it installed), it will display in "Verdana" font instead.



Now you know how to format the text you put into HTML! Next time we will learn how to use Pictures, Lists and most importantly; links!
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (7 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby Straw » Sun Apr 14, 2013 7:28 pm

Isn't it better to make a .css file to edit the text?


HTML file
Code: Select all
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Using CSS file</title>
    </head>
 
    <body>
        <h1>My super site</h1>
         
        <p class="introduction">Hello and welcome on my site !</p>
        <p>For the moment, my site is a bit <em>empty</em> !</p>
    </body>
</html>



CSS file
Code: Select all
p
{
   color: blue;
   font-size: 16px;
}

h1
{
   color: red;
   font-size: 40px;
}

em
{
   color :red;
   font-size: 20px;
}

.introduction
{
   color :red;
   font-size: 40px;
}


The normal text (between <p> </p>) would be blue, the important paragraph(between <h1> </h1>) would be red a big, and the important text (<em> </em>) would be also red but smaller than important paragraph...

That's how I would do :)
User avatar
Straw
.
 
Posts: 8449
Joined: Fri Jun 17, 2011 2:35 pm
Location: France, Laval
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Multiband Compressor
Wolfenstein ET Name: #ET|Straw|
Steam Name: Mansikka
Clan Wars: 1

Re: Learning Web Design

Postby MaTT » Sun Apr 14, 2013 7:51 pm

As I said, Web Designers tend not to use those methods anymore and instead use CSS for formatting and styling. Making a separate file for CSS is a good thing to do also, it means you don't need to crowd up the main HTML file with loads of code which is great for organisation. To add CSS to the HTML, you would put the CSS code in the <head> inside <style></style> tags, but in a separate file you would take the CSS out of <style></style> tags and place it all in a dedicated file and use a <link> tag to link the file to the main HTML file.
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (7 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby Ziltoid » Sun Apr 14, 2013 8:12 pm

Straw, thanks for the tip on using a .css file for styling. Makes it way easier to style my page :) Don't have to type <font style=".."></font> and <font face=".."></font> everytime when typing a new paragraph. Saves time xD
Image

~~GOD OF MASTURBATION~~

#MattEgeFennyWorstLT

I used to have nice signatures, then Photobucket went full retard.
User avatar
Ziltoid
.
 
Posts: 2976
Joined: Sat Oct 22, 2011 5:24 pm
Location: The Netherlands
Home-Game: Wolfenstein Enemy Territory
Wolfenstein ET Name: #ET|Ziltoid
Steam Name: SaltboxMetal
Clan Wars: 0

Re: Learning Web Design

Postby MaTT » Sat Apr 20, 2013 9:31 pm

Some more important HTML stuff

So, you're getting more into HTML now which is good, but there is still much more to cover. Now it's time to learn how to make lists, pictures, and the essential part of any website; links!

So... Lists?

There are three different types of lists you can make in HTML; An Ordered list, an Unordered list, and a Definition list.
To make an Ordered list, which will include numbers counting up as you add more points, you will need the following HTML tags:

<ol> - Anything within the <ol></ol> tags are defined as part of the ordered list. You could think of this in BBcode as [list=1][/list]
<li> - This is important, it defines an item or a point in both ordered and unordered lists. In BBcode, the equivalent is [*] accept you would close <li> with the usual </li> tag.

Example:
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<ol>
<li>This is the 1st item in the list</li>
<li>This is the 2nd item in the list</li>
<li>Ducks are awesome</li>
</ol>

</body>
</html>


This code would appear as:
  1. This is the 1st item in the list
  2. This is the 2nd item in the list
  3. Ducks are awesome

To make an Unordered list, which is the most common, all you need to do is replace <ol></ol> with the following tag:
<ul> - Anything within the <ul></ul> tags are defined as part of the unordered list. You could think of this in BBcode as [list][/list]

Example:
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<ul>
<li>This is an item in the list</li>
<li>This is another item in the list</li>
<li>Ducks rule</li>
</ul>

</body>
</html>


This code would appear as:
  • This is an item in the list
  • This is another item in the list
  • Ducks rule

...and finally making a definition list. Now this works a bit differently to the other two lists in that is displays something in the list, accept, if you wish you would use a third tag to create a definition for the item in the list. This definition will be indented. Here are the tags used in the list:

<dl> - Anything within the <dl></dl> tags are defined as part of the definition list.
<dt> - This is important, it defines an item or a point in the definition list.
<dd> - Anything within these tags are defined as a definition and have the formatting that I described above, usually these are put after the <dt></dt> tags.

Example:
Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<dl>
<dt>This is an item in the list</dt>
<dt>This is another item in the list</dt>
<dd>This is a definition for the second item in the list</dd>
<dt>Duck</dt>
<dd>An awesome animal of the Anatidae family of Birds</dd>
</dl>

</body>
</html>


This code would appear as (ignore black dots, they are intended as indents):
This is an item in the list
This is another item in the list
........This is a definition for the second item in the list
Duck
........An awesome animal of the Anatidae family of Birds



...and pictures?

I'm sure you've been waiting to ask how pictures are added to HTML pages, well it's pretty simple actually but you can't move it around the page just yet, you'll have to wait for CSS (using the "padding:", "margin:" and/or "position:absolute;" with "top:", "bottom:", "left:" and/or "right:" properties) to do that. For now, we'll just add pictures. You can do that with this tag:

<img> - This tag uses different attributes to add images, the "src="" " attribute is used to link the image in. Like a few other HTML tags, this tag can be quickly closed by just using " />". The standard way of using the <img> tag is like this: <img src="" alt="" />. The "alt="" " is just alternate text to be displayed if the image cannot load.

So here's an example:

Code: Select all
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<img src="http://www.animeforum.com/dbtech/vbshop/images/gifts/misc-a_duck.png" alt="A Duck">

</body>
</html>


This would be displayed as:

Image




So... how about links?

Now, every webpage in the world and indeed ever made has a link in it, is provides navigational abilities around your website and access to third-party websites (websites that are not yours). They are very important yes, but they are very simple to make; with the <a> tag...

<a> - This tag defines that the text contained inside it is a link of some sort, although by itself, it won't even change anything. To link/change it you need to add attributes as usual, the most important attribute being "href="" ", this attribute contains the link that the text inside <a></a> will be linked to. You can also add more attributes such as "title="" " which will show a description of the link when you hover your mouse over it.

So, here's an example:
<a href="http://www.etclan.net/" title="ETernal Clan Homepage">ETernal Clan</a>
This would come out as ETernal Clan
(just without the description on mouse-over)

You can also link images:
<a href="http://www.etclan.net/" title="ETernal Clan Homepage"><img src="http://www.animeforum.com/dbtech/vbshop/images/gifts/misc-a_duck.png" alt="A Duck"></a>
This would come out as
Image

Now, you can also get a bit more advanced with the <a> tag by using "#[text]" in the "href="" " attribute and another <a> attribute "name="" ". What we're trying to do here now is make a link to the same page, but to move the screen. For example, you might start at the top of the page, you want to click a link and get the screen immediately down to the bottom of the page.

For example:
(the <br> tag is just a tag that will create a new line, pretty much what happens when you just press Enter, and you can quickly close it with "/>")

<a href="#bottom">Go to bottom of the page.</a>
<br />
<br />
<br />
<br />
....x20 <br />....
<br />
<br />
<a name="bottom">Bottom of the page.</a>

So now when you're at the top of the page and you click the link "<a href="#bottom">Go to bottom of the page.</a>", your screen will be taken to the bottom of the page where the the <a name="" > attribute is found by the link which is identified as "bottom".




So that's pretty much all the basic HTML finished. Next time, we will start with CSS which is an important part to a good webpage, it handles everything about styling on your page. If it didn't have styling it would be a very boring white page with a load of right-aligned text links and a few pictures with a white background. We will come back to HTML another time where we will start to learn the more advanced stuff, but for now we will move on to CSS!
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (7 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby Wīñd » Mon Apr 22, 2013 9:01 am

WoW !! Nice Lessons!!
Thank you MaTT and Straw!
Image

Recruiting is the best way to help a clan :rose:

Image

Image

User avatar
Wīñd
.
 
Posts: 3830
Joined: Sun Feb 10, 2013 5:15 pm
Location: N'Dranghetta HQ
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: my best weapon is recruiting .
Wolfenstein ET Name: #ET|Wind|*
Steam Name: Ulquiorra
Clan Wars: 3

Re: Learning Web Design

Postby MaTT » Sat Apr 27, 2013 7:57 pm

Beginning CSS

Well, now we've learnt the basics of HTML, we can begin to move onto the basics of a very closely connected language called CSS (Cascading Style Sheet). What is different in CSS from HTML? Well it's in the name; "Cascading Style Sheet". HTML is designed to handle the content-side of a webpage, where you add text, links, pictures and tables, while CSS is designed to handle all of the styling and positioning of a HTML page. Unlike HTML, it is impossible to make a webpage from CSS without HTML involved, this means they need to be connected together. Also unlike HTML, this language gets a little more complicated as CSS isn't as simple as adding tags.

There are three parts you use in CSS, they are called Tags, IDs, and Classes. In HTML you write in this format: <tag></tag>. The following is the formats (also known as "Syntax") of CSS:

Tags
Code: Select all
tag {
css-property: value;
}


When you define the styling for a tag in CSS, you are defining the style for a tag in HTML. For example, if I wanted to change the font colour of everything in the <p></p> tag of HTML (paragraph tag) each time it is used, I would write the following:

Code: Select all
p {
color: red;
}



IDs
Code: Select all
#ID {
css-property: value;
}


When you define an ID in CSS you will write the name of your ID with a hash (#) before it. IDs can have any name you want after the hash and it won't mess up anything, but you should set the name relating to the task it has and try not to change it when it's done as you'll have to re-name all the HTML tags that use it. For example, I want to style a menu, so I would call the tag #menu, #menu_icon or #menu-icon. When you use an ID for styling in CSS, it is unique and you can only use it once in HTML. If you want to use the styling multiple times, you would use a Class instead.

Classes
Code: Select all
.class {
css-property: value;
}


When you define a Class in CSS, you will write the name just like IDs, accept you would put a period (.) before the name instead of a hash. Classes work identically to IDs accept they can be used multiple times in HTML.



So, how do you use IDs and Classes?

Well, first of all, you need somewhere to put the CSS code. In the <head> section of your HTML page, you must add:

Code: Select all
<style type="text/css">

</style>


Inside this <style></style> tag, you can put your CSS.

SHOW | OPEN THIS IF YOU DON'T KNOW WHAT TO DO
So your HTML document should look like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>

<style type="text/css">

</style>

</head>
<body>
Hello World

</body>
</html>


Secondly, you need something to connect the HTML and CSS together, this is where I introduce you to a new HTML tag specifically for linking CSS with HTML.

<div> - This tag alone does nothing to the content inside of it. What you need to do is add certain attributes called class="" and id="". For CSS IDs, you will type the name of the ID inside id="" and it works the same for class="". The only thing you need to remember is to NOT add the Class period and the ID hash before the names in these attributes.

So, when a CSS ID or Class is defined (for example: #text) and is then linked to the HTML with the <div> tag (for example: <div id="text"></div>), anything you put inside the <div> tag will have the styling defined in the CSS ID or class. This is where it starts to get similar to HTML; since you have defined an ID or a Class now, you need to use the properties inside the CSS ID or Class to change the styling. There are 184 different CSS properties for styling, some are very simple, some can get very complicated.



To finish off, here's an example of CSS styling in use

Here is the code, see if you can analyse the code and see what is going on. If it helps, you can copy and paste it into a new HTML file and run it in your browser to see what it looks like. In this example I have used all three of CSS Tags, IDs and Classes. I am styling the heading, text and links using CSS, but this is very limited, you can do a lot more with CSS, and next time we will learn more about it!

Code: Select all
<!DOCTYPE html>
<html>
<head>

<style type="text/css">
h1 {
font-variant: small-caps;
}

#text {
color: #0040FF;
font-family: Lucida Console;
}

.link {
color: #FFBF00;
font-family: Lucida Console;
font-weight: bold;
}
</style>

</head>
<body>

<h1>CSS Example Page</h1>

<div id="text">Hello World</div>

<br />

<div class="link"><a href="http://www.etclan.net">ETernal Clan Website</a></div>

<br />

<div class="link"><a href="http://www.google.co.uk">Google!</a></div>

</body>
</html>




Next time we will have a look at some of the CSS formatting properties.
Next time I will also tell you about how you don't need to keep your CSS in the <style> tag and can have a separate, dedicated file for the CSS.
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (7 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

Re: Learning Web Design

Postby FuRious » Sun Apr 28, 2013 8:55 pm

Wow, once again awesome tuto :P
Image

Image

Image

Image
User avatar
FuRious
.
 
Posts: 8420
Joined: Fri Feb 10, 2012 9:22 pm
Location: France, Lyon
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: My Knife
Wolfenstein ET Name: #ET|FuRi@u$|
Steam Name: etfurious1
Clan Wars: 0

Re: Learning Web Design

Postby Wīñd » Sun Apr 28, 2013 10:50 pm

Yes . Very good tutorial
Thank you MaTT !
Image

Recruiting is the best way to help a clan :rose:

Image

Image

User avatar
Wīñd
.
 
Posts: 3830
Joined: Sun Feb 10, 2013 5:15 pm
Location: N'Dranghetta HQ
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: my best weapon is recruiting .
Wolfenstein ET Name: #ET|Wind|*
Steam Name: Ulquiorra
Clan Wars: 3

Re: Learning Web Design

Postby MaTT » Sun May 05, 2013 1:03 pm

More on CSS

Hello once again!
This time i'll be teaching you some more about CSS.

First of all, i'm going to teach you where else you can place your CSS, and starting with your first CSS properties; specifically, background colours and images.




So, when you have a lot of CSS (and when you are making a large webpage, you will have a lot of it), it isn't the best idea to place it in the <head> section of your HTML file. Instead, you can put your CSS in a separate file and link in to the HTML page. Here's what you need to do:

First of all, you need to create a new file and save it as style.css. You can use any name you want for the file, but this name is more commonly used. You will need .css at the end of it though. This file you can put all of your CSS code. It is important where you save this file, it has in the same place as the HTML file, otherwise linking it will be a problem.

Problem now is, when web browsers like Internet Explorer, Mozilla Firefox or Google Chrome load your webpage, all they will do is load the HTML page and not the CSS, so you need to link the CSS file you have made to the HTML page. You can do this with a new HTML tag:

<link> - With this tag, you can link to other style sheet files (CSS files). It is written in the following syntax:
<link rel="stylesheet" type="text/css" href="style.css">

This line NEEDS to be in the <head> section of the page. Basically, it defines that the link is to a CSS file, and the href="" attribute is a link to the CSS file. So if you put your CSS file in a folder called "styles", your <link> tag will look like this:
<link rel="stylesheet" type="text/css" href="styles/style.css">

For now, to keep it simple, you can put the style.css file in the same place as your index.html file.

SHOW | Open this if you don't know what to do
So your HTML document should look like this:
Code: Select all
<!DOCTYPE html>
<html>
<head>

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

</head>
<body>
Hello World

</body>
</html>





So, now you have somewhere better to place your CSS, now you need some CSS to put there. Now, You will learn about adding backgrounds.
First of all, your webpage by default, doesn't stretch to fill the whole screen, so what you can do is add the first CSS:

Code: Select all
body {
margin: 0;
padding: 0;
}


Now, the margin: property defines how much empty space there should be around an element. The padding: property defines how much empty space there should be within the border of an element. When these are both set to 0, it means that it is set to 0 pixels which again means that there is no empty space around the <body> of the page.

Now, when you saw the word "element" I used above, I am sure you thought "what is an element?". Let me explain what they are.
An "element" is basically a box. Most tags in HTML that link to CSS are elements. Let me illustrate what I mean:

illustration.png
illustration.png (963.57 KiB) Viewed 10737 times


  1. ... Inside the green box (or Green Element), is the box size (element size) of the <h1></h1> tag which we all know is the Heading tag.
  2. ... Inside the red box (or red Element), is the box size (element size) of the <p></p> tag which we all know is the paragraph tag.
  3. ... ... Inside the pink and white boxes (or pink and white Elements), is the box sizes (element sizes) of the <br /> tags (two of them) which we all know is just the blank line tag.
  4. ... Inside the blue box (or blue Element), is the box size (element size) of the <img /> tag which we all know is the image tag.

So what is the yellow box representing? You guessed it, the <body> tag. The fact about elements you need to know is that they cannot overlap; only the <body> element can overlap other elements. (to make elements overlap, there is a special CSS property for that, but we'll get onto that later.




So, onto backgrounds.
Now, you can colour the backgrounds of your webpage with CSS as well as add a background image and position it the way you want it to be.
To add a background image, you need to add to your CSS body tag the "background-color:" property which will fill the Element with the background colour you choose. For example:

Code: Select all
body {
margin: 0;
padding: 0;
background-color: #0080FF;
}


Because the body element stretches across the whole page, the background of the whole page will be blue; (This colour precisely).

If you want to add a background image, all you need to to is use the "background-image:" property, accept linking to an image works a bit differently to what you would expect. First of all you will need an image big enough to fill the screen, you can make one, or if you have the rights then you can use one someone else has made. See the example of how it should be:

Code: Select all
body {
margin: 0;
padding: 0;
background-image: url('path_and_picture_name.png');
}


If you have a picture that isn't big enough, or isn't meant to be using the whole background, you can use certain repeating options. Using the "background-repeat:" property, you can repeat how many times an image will repeat itself. For example:

Code: Select all
body {
margin: 0;
padding: 0;
background-image: url('path_and_picture_name.png');
background-repeat: repeat-x;
}


Here is another illustration to demonstrate what options there are:
illustration2.png
illustration2.png (100.25 KiB) Viewed 10737 times


As you can see...
  • no-repeat - stops the default behaviour which is to repeat an image in both X and Y.
  • repeat-x - repeats the image in the X-axis (West to East) and not in the Y-axis (South to North).
  • repeat-y - repeats the image in the Y-axis (South to North) and not in the X-axis (West to East).
  • repeat - typically you don't need to use this value as it repeats an image by default.


If you have a large background image that cuts off the page, and you want to show the right side of the image and not the left (for example), or you have a small image that you don't want to repeat but don't want it showing in the top, left-hand corner (default) (for example) you can use the CSS property "background-position:" which will position your image where you want on the page. For example:

Code: Select all
body {
margin: 0;
padding: 0;
background-image: url('path_and_picture_name.png');
background-repeat: no-repeat;
background-position: right top;
}


The syntax of background-position is:
background-position:X-axis Y-axis;

...so you can use "left", "center", and "right" for the X-axis values.
...and you can use "top", "center", and "bottom" for the X-axis values.
..if you want to be more precise with the positioning, you can also use pixel values, for example:

Code: Select all
body {
margin: 0;
padding: 0;
background-image: url('path_and_picture_name.png');
background-repeat: no-repeat;
background-position: 100px 50px;
}


(you must use "px" to represent pixels in CSS), this will align it 100 pixels right from the left-side and 50 pixels down from the top.

There are a couple other CSS background properties, but i'll let you find out about them. They are "background-attachment:" which either fixes the background in position at the top of the page or stays in position when you scroll down, and "background:" which basically condenses all of the "background-" properties down into one long property.




Next time, we'll go over some more CSS. Also tell me what you would like to learn, what you are stuck on doing, what you want to do or how I am doing with these posts. Are they easy to understand? Too challenging maybe?

With regards,
MaTT
Image
Image Image Image Image Image Image
The Most Astounding Fact || Window on the Universe
Image
#ETernal Clan Founder - Contact me
Since 13/4/2011 (7 Years)
User avatar
MaTT
.
 
Posts: 3805
Joined: Fri Jun 17, 2011 12:07 pm
Location: England, East Sussex
Home-Game: Wolfenstein Enemy Territory
Favourite Weapon: Giulietta
Wolfenstein ET Name: #ET|TitaN*|
Steam Name: Mattipoika
Clan Wars: 0

PreviousNext

Return to Hardware/Software

  • Advertisement