This is article about editing and customizing your web page into more nicer that it’s it in the default form. There are various ways to edit your page and this is only one way to do it.
What is style sheet?
“Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents” (link). This means that with this weapon of your use you’re able to manipulate the page itself to do different various thinks. There are three ways to use this, but I recommend using the first I show. The other two should be used in text if you want to highlight text (making it italic or bold, different spacing or color) to specify one or couple words meaning.
1. style.css file
This what you would like to use editing the whole body element or any whole element. What you have to do to make this happen, you have to make couple thinks to your part you want to edit.
- Make a link to this style.css file (located in head-element)
- add <div id=”text here”> and </div> element to part you want to edit
- make style.css file and save it to same dictionary where the other files are.
I’m going to show you what you need to do next in your web page files. All the files should be located in your public_html dictionary or else this won’t work. This is what you should add to your header first to make link between these two files. I add more material to this, because you should see it in it’s right using form.
<!doctype html>
<html>
<head>
<title> Test Page</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" text="text/css" <!--COMMENT:this is the link part-->
</head>
</html>
Next what we do, we edit the body part. What we do it, we basically add <div id=”text here”> -element to it. What that element does it gives one special attribute to the are you choose. You can special edit that area and make it more customize looking. Remember that you have to name it and the name it given into that one part “text here” . I recommend using simple names that you remember. Example of using <div id=”text here”> -element
<body>
<div id="example"> <!--COMMENT:here you add one special id -->
<h1>Hello World</h1>
<p> This is the part where your text is located.</p>
<p> There can be massive amount of text and it's sometimes hard to edit.</p>
</div> <!-- COMMENT:here the div-element ends -->
</body>
Now we are able to make that new file style.css . You are able to use of course any other file name you wish, but remember that you need to use that specify filename you have linked these two pages. Example of style.css
h1 {color: #e24047;
font-family:jokerman, fantasy;
font-size: 56px ;
text-align:center;
border:ridge 2px white; /*COMMENT:gives borders*/
border-radius:50px; /*COMMENT:makes corners more round like*/
background-color:black
}
p {font-family:"britannic bold", "myriad web pro";
font-size:14px
}
#example {margin:auto; /*COMMENT:All text goes middle*/
border: solid 4px white;
padding:25px;
border-radius:45px;
box-shadow:8px 8px 8px 8px black; /*COMMENT:makes shadows around corners, more lively*/
background-color:rgba (203,16,43,0.8); /*COMMENT:backround for the borders*/
}
I recommend using this site to get some patterns and colors to your site (link). This is one way to edit your site. I know this is kind a hard typing work but it’s easy to modify now. As you can see there are various ways to edit your site. To find out more ways to customize I recommend using search engines.
2. style-element
If you need only to make small changes, like you are ordered to make raw versions of web server and sent them to all users or you want only to edit h1-element (headline). For this <style> -element is easy to use. Mainly you add it to the header once again. I show you example
<!doctype html>
<html>
<head>
<title> Test Page</title>
<meta charset="utf-8">
<style type="text/css">
h1 {color:rgb(135,54,195);}
</style>
</head>
</html>
As you can see this is much more faster, but then again I think that you should still only use style.css file to customize your site. Not only it’s more time taking but then again it’s much more cleaner code that you have created.
3. Using span-element straight to the text
Fastest way to quick edit is to straight add span-element to the part what you want to edit. I’m going to show you example
<body>
<h1>Hello World</h1>
<p> This is the <span style="color:blue; font-size:1.5em;> part</span> where your text is located.</p>
<p> There can be <span style="letter-spacing:0.2em; font-weight:bold; massive</span> amount of text and it's sometimes hard to edit.</p>
</body>
Quickest way to use and it’s recommend if you need to do something specific only for one word.
Other styling ways
There is also this pre-element if you need only to play with the text. I mean that if you need to have 2-4 spaces between two words you need to use every spacing you want. If you want to do this quickly, use pre-element. I show you example
<body>
<pre>
Lets's try p re -element
ca n y u o see th e difference
between pre and " "?!?
</pre>
</body>
Little list about similar elements. Once again you are available to find better list from search engines but here is couple of them. Remember end tags (same as starting tag except “/”-mark)
- <address> , makes text italic like
- <blockquote> , makes quote more box-like
use <cite> to tell who is author, book name, year - <hr>, makes horizontal line *No need to end tag
- <mark>, makes text highlighted
- <meter>, makes graphical representation about something. Like
<meter value=”70″ min=”0″ max=”100″> 70% </meter> - <progress>, makes graphical represtaion about some kind of process. Like
<progress value=”60″ max=”100″ > 60% </progress> - <time> , various ways to use
<time datetime=”2013-12-24″> December 24th 2013 </time>
<time>2013-12-24</time>
<time pubdate datetime=”2013-12-24″>24.12.2013</time> - <!–COMMENT:this is comment that won’t show at site –>
Background image
To add custom background you need to do this. First make that background (take a picture or create it using for example photoshop) and add it to public_html dictionary. Then go to your style.css and type this
body {background-image:url(insert that images name here.jpg);
background-repeat:no-repeat; /*other: repeat-x, repeat-y, repeat */
background-size:cover; /*other:50%, auto 100px, contain, 600px 300px*/
background-position:center; /*other: top, bottom, left, right, top top, top left... */
background-attachment:scroll; /*other: fixed, inherit */
Making favicon.ico
Favicon?? Well it’s that little margin/logo/image in the URL-bar or in browsers tab, like in here WordPress it that “W”-logo that has blue circle and white circle around it. To make these, you need to make logo/icon that is about 16px/16px, 32px/32px or 64px/64px size about. Then add it to dictionary public_html and you have link it between index.html and other pages. Once again you need to make link into head-element. Also you have to save by name “favicon.ico”.
<head>
<link rel="icon" type="image/x-icon" href="favicon.ico" >
</head>
**Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. GNU License 3 (link)**
– Tuomas Törmä
Sources
- Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.
Update1,01 (Some fixes to the text, missing content marks added)
Tuomas Törmä 