You are here: » Home » Posts filed under CSS Tutorial

Create a WebSite with CSS - Final part

11:12 AM Huong Giang


This is the final part of creating a website with css.

Here we are going to discuss about creating a footer for our website.



From line 48 to 52 is a round cornered line. We discussed about this earlier, here is the same thing.

The footer start on line 54 and ends on line 57, the first
ending tag. The second
ending tag is for the wrapper that centred the page.

Here is the footer's css code:



The End.

We finished building the website. Now you'll probably say that is more work then making a website without css. For a small website you are right, but for a bigger website I'm telling you that css is the key to your success.


[Read More...]


Create a WebSite with CSS - Part II

10:02 AM Huong Giang


Here we are going to discuss about creating a css menu for your website and formatting the website's content.

For the menu we used an unordered list.


As you can see there's nothing new in the HTML code. So let take a look at the CSS code.


- line 44 - "#menu ul{.... " we add style to all
    tags that are included in the HTML element that has the <<id="menu">>


    - line 48 - display property - in our case "display:block" makes a HTML element to take up the full width available and has a line break before and after it. The opposite   is  "display:inline" which makes a HTML element to only take up as much width as necessary, and does not force line breaks. 

    This property can also hide HTML elements, "display:none".


    - line 50 - the same thing as on line 44, but for the tag.


    - line 53 - text-decoration property - we used it with the value none to remove the underline from links. Other values for this property are: overline; line-through; underline; blink.


    - line 55 - color property - tells the browser the text color of that element.


    - line 57 - the same thing as on line 50. The style here, being applied to the "hover" state of the link. When you put your mouse over the link it will be underline.


    Here we have the content, on line 34 is id="content_1" for the first page, on the second page id="content_2" and so on. 

    STOP! when we create a website to launch online we will use only id="content". I've made id="content_no." just for you so you can see that are different pages. 
    A real website, you would have a different content for every page so you don't have to use different ids.

    on line 46 there are two end tags (
    ). One is for content and the other for the
    with the middle ID.


    As you can see we have style for every page. When creating a real website you don't need to use Ids for every page as the whole website should be formatted the same.
    [Read More...]


    Create a WebSite with CSS - Part I

    10:51 AM Huong Giang



    We are now going to create our first website with css, so open up your code editor and let's write some code.

    In this tutorial I presume that you have read the HTML Tutorial and I will not explain every tag.

    If you don't understand something please email me at emil.hossu [at] gmail [dot] com

    You can download a zip archive of the website that we will create here.



    - as you can see on line 4 we have link to an external CSS file, href="css/style.css". The link is "css/style.css" because the file is in a subdirectory called css.

    TIPS: I recommend that you create a directory structure for your website because this will be good for your website search engine optimization (SEO).

    - on line 7 we have a
    tag that is going to center our website.

    - on line 8 we have a tag for the page width, that is 950px, as you can see below.

    - from line 10 to 14 is the header.


    - on line 14 is a comment. CSS comments start's with "/*" and end's with "*/".


    - line 16 -  position property - allow you to position an element. In our case it has the value relative, which position a HTML Element relative to its normal position. This property has three more values: static which is default, fixed and absolute. The fixed value makes the element positioned relative to the browser window, a good example is the fixed background you can see on some pages. Absolute value makes the HTML element positioned relative to the first parent element that has a position other than static.


    - for the rest of the lines, I think, you understand what they do.


    - on line 12 is the logo, which is set as a background image with css.



    - line 26 and 27 - margin property - this property clears an area a round an element, outside the border. This property can be: margin-bottom, margin-left, margin-right, margin-top.


    - line 30 - we set the logo image with the background property. For our background property, we have the following values: url("path to the image"); position which is upper left corner (0 0), in our case, and the "no-repeat" value.





    - to create the line with round corners I used four
    tags. One that includes all div tag, two div tags for corners and one for the middle.

    - I've made this drawing so you can understand better.


    All images were built with GIMP programme, for more information about GIMP visit Web Building Tools in the left menu.

    - the blue background corresponds to class "line";

    - the left green "CORNER" corresponds to class "left_line";

    - the middle purple "MIDDLE" corresponds to class "middle_line";

    - the right green "CORNER" corresponds to class "right_line";



    - line 111 - padding property - does the same thing as the margin property but inside the border of the HTML element.
    [Read More...]


    Building My First WebSite - CSS Tutorial

    12:51 AM Huong Giang


    Before Creating a WebSite with CSS you should have some knowledge of HMTL.

    So if you haven't read my tutorial about HTML, you can click on Building a WebSite with HTML now.


    1. What does CSS mean?

    CSS stands for Cascading Style Sheets.

    2. What does CSS do?

    CSS defines how to display HTML elements, adds style to this elements.

    3. How do we write CSS code?

    To write a line of CSS code you need three things: a HTML element, a property and a value for that property.

    Here is an example: h1 { color:red; }.  => Some H1 text.


    4. How to include CSS in our WebSite?

    There are two ways to include styles in your WebSite. The first method is to save your styles in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a WebSite, just by editing one single file! Or you can write your CSS code directly into the HTML page.


    Here are some example of Ways To Include CSS in a HTML page.

    This code must be placed between the  tag.

    Link to external file.



    There are two ways to add style to HTML elements if we use external css file. You can use the attribute class or id.

    1. ID atribute is used to specify a style for a single, unique element. We define it with a "#".

    2. CLASS atribute allows you to set a particular style for any HTML elements with the same class. We define it with a ".".


    Write code direct in page.


    Inline style. Add style directly to specific HTML element.




    As you can see, on the first line is the attribute "style" which value is the CSS code, the CSS property (font-size) and its value (16pt), the HTML element here being the tag.

    Now we know what CSS means, how to write a CSS code line and how to add CSS to your website, so click on Building a WebSite with CSS to move forward.



    [Read More...]


    Subscribe to: Posts (Atom)
    Widget By Devils Workshop
     

    Link Liên kết

    Thông tin liên hệ

    YH: huonggiangdhtn
    Skype: tthuonggiang
    Return to top of page Copyright © 2010 | joomla extensions jw-extension.net