You are viewing our Forum Archives. To view or take place in current topics click here.
Tutorial on CSS Editing // Only Tutorial // Updated Daily.
Posted:

Tutorial on CSS Editing // Only Tutorial // Updated Daily.Posted:

cigg
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
CSS Editing!



What.... exactly is a CSS?

    [ Register or Signin to view external links. ] CSS stands for Cascading Style Sheets.
    [ Register or Signin to view external links. ] Styles are added & Updated to all HTML to solve problems.
    [ Register or Signin to view external links. ] All "Styles" define Direction Display to .HTML elements.
    [ Register or Signin to view external links. ] External styling sheets (Backgrounds) are stored via CSS files.
    [ Register or Signin to view external links. ] External styling sheets can save time & work.



Style issues & Problems :

HTML was intended to define the content of a document, like:

<h1>Here is your "Header/Title"</h1>

<p>This is your Paragraph/Announcement</p>


All browsers support CSS Coding now.



Examples :

[ Register or Signin to view external links. ]

<html>
<head>
<link rel="stylesheet"
type="text/css" href="ex1.css" />
</head>

<body>

<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>

<p>This paragraph has a left margin of 50 pixels</p>

</body>
</html>


_________________________

[ Register or Signin to view external links. ]

body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}


PREVIEW :


[ Register or Signin to view external links. ]



The HTML file below links to an external style sheet with the <link> tag:

<html>
<head>
<link rel="stylesheet" type="text/css"
href="ex2.css" />
</head>

<body>

<h1>This is Title (TTG)</h1>
<hr />

<p>You can see that the style
sheet formats the text</p>

<p><a href="TheTechGame.com"
target="_blank">Click here for Link</a></p>

</body>
</html>




This is the style sheet file (ex2.css):

body {background-color:tan;}
h1 {color:maroon;font-size:20pt;}
hr {color:navy;}
p {font-size:11pt;margin-left:15px;}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}




The result is in the frame below:

[ Register or Signin to view external links. ]



CSS Syntax :

A CSS rule has two main parts; a selector, and one or even more declarations;

[ Register or Signin to view external links. ]

    [ Register or Signin to view external links. ] CSS declarations always ends with a semicolon, and declaration groups are surrounded by curly brackets;
    [ Register or Signin to view external links. ] The selector is normally the HTML element you want to style.
    [ Register or Signin to view external links. ] Each declaration consists of a property and a value.
    [ Register or Signin to view external links. ] The property is the style attribute you want to change. Each property has a value.


p {color:red;text-align:center;}

To make the CSS more readable, you can put one declaration on each line, like shown here:

p
{
color:red;
text-align:center;
}





The id and class Selectors :

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

    [ Register or Signin to view external links. ] The id selector is used to specify a style for a single, unique element.
    [ Register or Signin to view external links. ] The id selector uses the id attribute of the HTML element, and is defined with a "#".
    [ Register or Signin to view external links. ] The style rule below will be applied to the element with id="para1":


#para1
{
text-align:center;
color:red;
}


NOTICE [ Register or Signin to view external links. ]

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

    [ Register or Signin to view external links. ] This allows you to set a particular style for any HTML elements with the same class.
    [ Register or Signin to view external links. ] The class selector uses the HTML class attribute, and is defined with a "."
    [ Register or Signin to view external links. ] In the example below, all HTML elements with class="center" will be center-aligned;


.center {text-align:center;}


You may also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned;

p.center {text-align:center;}




NOTICE : [ Register or Signin to view external links. ]



[ Register or Signin to view external links. ]



External Style Sheet

A external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section;

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


An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below;

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}


[ Register or Signin to view external links. ]




Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this;

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>




Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the colour and the left margin of a paragraph.

<p style="color:sienna;margin-left:20px">This is Your Paragraph.</p>




Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For Example, an external style sheet has these properties for the h3 selector;

h3
{
color:red;
text-align:left;
font-size:8pt;
}


And an internal style sheet has these properties for the h3 selector;

h3
{
text-align:right;
font-size:20pt;
}


If the page with the internal style sheet also links to the external style sheet the properties for h3 will be;

color:red;
text-align:right;
font-size:20pt;


The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.



[ Register or Signin to view external links. ]



CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:



[ Register or Signin to view external links. ]

body {background-color:#b0c4de;}


The background color can be specified by :

    [ Register or Signin to view external links. ] name - a color name, like "red"
    [ Register or Signin to view external links. ] RGB - an RGB value, like "rgb(255,0,0)"
    [ Register or Signin to view external links. ] Hex - a hex value, like "#ff0000"


In the example below, the h1, p, and div elements have different background colors:

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}


Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:

body {background-image:url('paper.gif');}




Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}


DO NOT USE LIKE CODING BELLOW:

body
{
background-image:url('gradient2.png');
}




Background Image - Set position and no-repeat

[ Register or Signin to view external links. ] When using a background image, use an image that does not disturb the text.

Showing the image only once is specified by the background-repeat property:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}


In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property;

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}




UPDATED!


Last edited by cigg ; edited 7 times in total

The following 4 users thanked cigg for this useful post:

liqour_man (09-12-2010), tracti0nz (09-11-2010), WCDT- (09-11-2010), iiLagZz_x (09-11-2010)
#2. Posted:
EzMoneY
  • Gold Member
Status: Offline
Joined: Apr 06, 201014Year Member
Posts: 8,517
Reputation Power: 2121
Status: Offline
Joined: Apr 06, 201014Year Member
Posts: 8,517
Reputation Power: 2121
amazing post. this will help me out alot.
#3. Posted:
SuperNewb
  • TTG Senior
Status: Offline
Joined: Jun 26, 200915Year Member
Posts: 1,487
Reputation Power: 67
Status: Offline
Joined: Jun 26, 200915Year Member
Posts: 1,487
Reputation Power: 67
Wow great tut, Might wana make it more attractive and easir to read for people like me tho
#4. Posted:
iiLagZz_x
  • Powerhouse
Status: Offline
Joined: Aug 18, 201014Year Member
Posts: 466
Reputation Power: 20
Status: Offline
Joined: Aug 18, 201014Year Member
Posts: 466
Reputation Power: 20
nice tut. very good advice
#5. Posted:
cigg
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
iiLagZz_x wrote nice tut. very good advice


Thank man, I will be Updating this Daily.
So, Look for more coming!

SuperNewb wrote Wow great tut, Might wana make it more attractive and easir to read for people like me tho


I think it's pretty simple, CSS starting.
But, Thank's for the comment.

TTGxEzMoneY wrote amazing post. this will help me out alot.


Thank's you a-lot & Your welcome.
#6. Posted:
WCDT-
  • Retired Staff
Status: Offline
Joined: Nov 13, 200915Year Member
Posts: 3,560
Reputation Power: 1380
Motto: that dumb jerk james done lost his dang mind
Motto: that dumb jerk james done lost his dang mind
Status: Offline
Joined: Nov 13, 200915Year Member
Posts: 3,560
Reputation Power: 1380
Motto: that dumb jerk james done lost his dang mind
Very detailed post that seems to have helped out members too bad its pretty much latin to me
#7. Posted:
cigg
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
WCDT wrote Very detailed post that seems to have helped out members too bad its pretty much latin to me


Lol, You don't understand "CSS".
It's cool. This is the Basic's anyway.
#8. Posted:
cigg
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
Status: Offline
Joined: Sep 01, 201014Year Member
Posts: 1,121
Reputation Power: 60
Updated Today. Check it out.
Updated Daily as it will be.
#9. Posted:
Fiberzz
  • TTG Destroyer
Status: Offline
Joined: Mar 22, 201014Year Member
Posts: 7,847
Reputation Power: 366
Status: Offline
Joined: Mar 22, 201014Year Member
Posts: 7,847
Reputation Power: 366
i love this and it helped me out a bunch

keep updating this daily and its sticky worthy
#10. Posted:
tracti0nz
  • TTG Addict
Status: Offline
Joined: Jul 22, 201014Year Member
Posts: 2,476
Reputation Power: 109
Status: Offline
Joined: Jul 22, 201014Year Member
Posts: 2,476
Reputation Power: 109
nice post mate keep it up

-Tracti0nz
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.