Scribd Logo
Upload

Welcome to Scribd!

  • Tutorial CSS

    Uploaded by

    drmicroso
    40 views7 pages
    Programação WEB

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Programação WEB

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    40 views7 pages

    Tutorial CSS

    Uploaded by

    drmicroso
    Programação WEB

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 7

    MERU UNIVERSITY COLLEGE OF SCIENCE AND TECHOLOGY

    COMMUNICATION AND INFORMATION TECHNOLGY (CIT) DEPARTMENT

    UNIT ASSINGMENT

    Student: Reg. No: Course: Unit Name: Unit Code: Assignment: Lecturer:

    Gibson Macharia Maina CT592-0040/2011 Bachelor of Science (Computer Technology) Internet BCT2106 CSS Mr. Abkul Orto

    CSS
    CSS is a W3C (World Wide Web Consortium) technology called Cascading Style Sheet that allows document authors to specify the presentation of elements of web pages(e.g. fonts ,spacing ,colors ) by separating the presentation from the structure. Structure deals with the content of the web page as defined by its HTML code while presentation deals with how the page will be displayed or the formatting effects on it. Although HTML offers some presentation features like bolding, aligning, coloring e.t.c. the features are not full blown and flexible hence the World Wide Web consortium came up with CSS as solely a presentation technology and dedicated HTML for web page content structuring and definition. CSS is supported by almost all modern browsers that support HTML 4 apart from internet explorer which supports it from its version 6 user agents and above.

    USING CSS
    As already said CSS is used to primarily define how elements of a web page should look like when rendered in a browser. We achieve this by incorporating it in our HTML codes because it works hand in hand with HTML to author a full brown web site. There three main ways of incorporating CSS with HTML. By use of: Inline style sheets Embedded style sheets External style sheets

    Inline Style Sheets


    In this form of incorporation style sheet properties i.e. fonts, colors etc are appended directly in the HTML elements they are meant to present as shown in following code.

    The above code renders as follows.

    When using inline style sheet we use the HTML attribute Style as the declaration of a style sheet in the element (tag) which we want to be modified by the CSS, in our case, the paragraph <p> element. The rules are simple, the style attribute must be followed by an equals sign (=) which is then followed by the CSS property e.g. Font-size, followed by a colon and the value you want to apply to the property. Both the property and its values must be enclosed in double quotes. You can also apply multiple properties to the same element by separating them with a semi-colon as in line 9 in the code above.
    CSS declaration 1st property and its value

    2nd property and its value

    As evident from above font-size is a CSS property that defines how the content (the sentence starting with This text) will appear when displayed in terms of its font size while color is the property that defines the color of the content. Note that the color value is given in hexadecimal equivalents which in our case make light blue be written as #6666ff. Due to that inline style is declared in every element where presentation is to be modified, it gets the power to override all the other style declarations (embedded and external) but at the same time increasing redundancy as the user has to type the style in every tag/element.

    Embedded Style Sheets


    These style sheets came to make the of writing style sheets easier by giving a way of writing a single style that applies to many elements as opposed to inline where a style applies to a single element. They are also incorporated to HTML code by embedding them in the code but this time as a block in the head section as shown below.
    <HTML> <head> <title> Embedded Style Sheets </title> <style type="text/css"> p h3 {font-size:15pt; font-family:monotype corsiva} {color:purple}

    .special{font-weight:bold;text-decoration:underline; color:blue} </style>

    </head> <BODY> <br><h3><u>Compare the following pieces of text to understand CSS. This is already purple according to the css</u></h3> <p>This is a paragraph defined with a paragraph element/tag and according to the dictations of the embedded style sheet, it should have a font size of 15 points and a font face of Monotype Corsiva. <h5 class="special">This text is presented using the .special selector of the style sheet. It should be bold, Underlined and blue.</h5> </BODY> </HTML>

    As stated earlier, embedded style sheets are more flexible than inline because 1 style sheet can apply to more than 1 element. For it to apply to multiple elements it must have a way of selecting the elements. This is achieved by defining the element it should apply to, followed by the properties you want to apply to but first you must declare that you are using CSS as shown below.
    Declaration of CSS Selector p and its properties

    A unique selector special

    End of style

    A selector is a special piece of text that uniquely identifies the elements to apply the properties to. In our case the p and h3 selectors dictates that the properties in curly braces should be applied to all paragraph <p> and h3 <h3> tags/elements in the body. Note that every selector has its properties in curly braces following it. For example the properties of the p selector dictate that every paragraph element should have a font size of 15 points and a font type monotype corsiva which displays text in a slanted manner. The h3 selector defines that every h3 element should be purple in color. The .special selector is a unique selector since it does not apply to any specific tag (no <.special> tag available in html) but it can apply to any tag by calling it with a HTML attribute called class. E.g. <ul class= special> Any name can be used for these types of unique selectors as long as they start with a dot(.) in the css. Multiple properties can be combined in a single selector by separating them with semi-colons (;) in the curly braces as with the p selector above. Embedded selectors are advantageous in that the author can modify the appearance of a page from a central point but still redundant when it comes to multiple pages where the author has to copy paste the style to all the other pages. The better option is the External style sheets.

    External Style Sheets


    These are simply embedded styles which have been saved in an external file rather than the HTML document. You apply the style sheet to your page by referring to it in the HTML code. For example, the above embedded style sheet can be turned to an external style sheet easily by putting its contents starting from selector p in a text editor and saving the file as styles.css or any other name. From there you can reference to the style sheet from HTML code by use of the link element which has 3 attributes as shown.

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

    The Rel attribute specifies the browser relationship with the file while the type attribute specifies the type of MIME (Multipurpose Internet Mail Extensions) which in our case is text/css. The third attribute href specifies the location of the external style sheet on the disk. I have use relative address of the location because my external style sheet file is in the same directory as my html file. Use absolute if yours are not in the same directory. When the html file is rendered, the output will be the same as that of our embedded example but this time we will have achieved more flexibility as we can now incorporate the style sheet to any of our pages and also we can modify the appearance of our web site from a central point using the external style sheet.

    CSS Properties
    CSS has many properties that you can use to make professional looking pages. Since they are vast I will only highlight on how they are grouped and give you the links to where you can get the information from. The following are the groupings.

    Font Properties

    Font Family Font Style Font Variant Font Weight Font Size Font

    Color and Background Properties


    Color Background Color Background Image Background Repeat Background Attachment Background Position Background

    Text Properties

    Word Spacing Letter Spacing Text Decoration Vertical Alignment Text Transformation Text Alignment Text Indentation Line Height

    Box Properties

    Top Margin Right Margin Bottom Margin

    Left Margin Margin Top Padding Right Padding Bottom Padding Left Padding Padding Top Border Width Right Border Width Bottom Border Width Left Border Width Border Width Border Color Border Style Top Border Right Border Bottom Border Left Border Border Width Height Float Clear

    Classification Properties

    Display Whitespace List Style Type List Style Image List Style Position List Style

    Units

    Length Units Percentage Units Color Units URLs

    To get more information about these properties and their possible values simply click on any of the links above or go to: 1. http://htmlhelp.com/reference/css 2. http://www.w3schools.com/css/css_intro.asp

    You might also like