Scribd Logo
Upload

Welcome to Scribd!

  • 41 views

    CSS How To

    Uploaded by

    scribdresort
    The document provides an overview of CSS (Cascading Style Sheets) and how to implement styles through different methods. It discusses using selectors and declarations to style elements, commenting code, and the different ways to insert CSS - externally, internally, and inline. It also covers using classes and IDs to extend CSS by applying the same styles across elements, with classes allowing styles to be used on multiple elements and IDs targeting single unique elements. The cascading nature of multiple styles is also summarized.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd

    CSS How To

    Uploaded by

    scribdresort
    41 views8 pages
    The document provides an overview of CSS (Cascading Style Sheets) and how to implement styles through different methods. It discusses using selectors and declarations to style elements, commenting code, and the different ways to insert CSS - externally, internally, and inline. It also covers using classes and IDs to extend CSS by applying the same styles across elements, with classes allowing styles to be used on multiple elements and IDs targeting single unique elements. The cascading nature of multiple styles is also summarized.

    Original Title

    CSS how to

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of CSS (Cascading Style Sheets) and how to implement styles through different methods. It discusses using selectors and declarations to style elements, commenting code, and the different ways to insert CSS - externally, internally, and inline. It also covers using classes and IDs to extend CSS by applying the same styles across elements, with classes allowing styles to be used on multiple elements and IDs targeting single unique elements. The cascading nature of multiple styles is also summarized.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    41 views8 pages

    CSS How To

    Uploaded by

    scribdresort
    The document provides an overview of CSS (Cascading Style Sheets) and how to implement styles through different methods. It discusses using selectors and declarations to style elements, commenting code, and the different ways to insert CSS - externally, internally, and inline. It also covers using classes and IDs to extend CSS by applying the same styles across elements, with classes allowing styles to be used on multiple elements and IDs targeting single unique elements. The cascading nature of multiple styles is also summarized.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 8

    Coding

    Selectors and Declarations You code CSS by declaring a set of rules. A rule can be as simple as this:

    H1 { color: blue }
    This means that all text surrounded by <H1></H1> will be blue. Rules are made of up of selectors and declarations. In the above example, H1 is the selector, the rest is the declaration and consists of a property (color), and a value (blue). Any HTML tag can be used as a selector. Classes and ID's CSS also enables you to make up your own classes. This means that, for a given HTML tag, you can apply different formatting depending on its class. Media Types You can define a separate style sheet for different media types. The names of the different media types are:

    all aural braille embossed handheld print projection screen tty (for media using a fixed-pitch character grid) tv

    Commenting your code You should always comment your code. The way to make comments within a style sheet are by using /* at the start of the first line, and */ at the end. Example: /* this is a comment */

    Implementing
    There are 4 ways of implementing CSS.

    Inline Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the <P> tag), you only apply the style to the instance you want the style to apply to. For example:

    <p style="color:#ff9900">CSS tutorial.</p>

    Embedded

    You embed CSS information into an HTML document using the 'style' element. You do this by embedding the CSS information within <style>...</style> tags in the head of your document. For example, place the following code between the <head>...</head> tags of your HTML document:

    <style type="text/css" media=screen> p {color:#ff9900;} </style>


    Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

    External Style Sheets An external style sheet is a separate file where you can declare all the styles that you want to use throughout your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place. For example: 1. Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).

    2. p {font-family: georgia, serif; font-size: x-small;} hr {color: #000000; height: 1px }

    1. Add the following between the <head>...</head> tags of all HTML documents that you want to reference the external style sheet.

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

    Importing Style Sheets You can use the @import rule to import rules from other style sheets. Add either of the following between the <head>...</head> tags of all HTML documents that you want to import a style sheet into.

    @import "imported_style_sheet.css"; @import url("imported_style_sheet.css");

    Exercise
    In this excercise, we will create two files; an HTML file, and a CSS file. We'll then link the two files together. 1. Create an HTML document using the code below, and save it as 'cooltafe.html':

    2.<HTML> 3. <HEAD> <TITLE>TAFE college</TITLE> 4. </HEAD> 5. <BODY> 6. <H1>TAFE college is cool</H1> 7. <DIV CLASS="box">

    8. <P>Well, it certainly helps if you have 9.a sense of humour!</P> 10. </DIV> 11. </BODY> 12. </HTML>
    (Note: TAFE college is a way cool learning institution... ;o)

    13. Create a new file called, 'csstalk.css' and type the following:

    14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32.

    body {align: center; background: #000000} p {font-family: cursive, serif; font-size: 24px; line-height: 36px; color: #ffffff} h1 {position: absolute; left: 100px; top: 150px; color: #00cc00; font-family: verdana, arial, sans-serif; font-size: 38px} div.box {position: absolute; left: 380px; top: 150px; width: 200px; height: 200px; layer-background-color: #cccccc; background-color: #cccccc; background: #cccccc; padding: 15}

    1.

    View the HTML page in your browser. It should look like this:

    2.

    Finally, add the following line of code between the </TITLE> tags and </HEAD> tags in the HTML file.

    <LINK REL=stylesheet TYPE="text/css" HREF="csstalk.css">


    Save the file and refresh your browser. It should look like this:

    Summary
    That almost wraps up this CSS tutorial. Today we learned that CSS stands for Cascading Style Sheets and that it is used for applying styles to web pages. We learned how to code and implement CSS using the "inline", "embedded", and "external" method. We finished by creating an example using the "external" method.

    CSS How To...


    When a browser reads a style sheet, it will format the document according to it.

    Three Ways to Insert CSS


    There are three ways of inserting a style sheet:

    External style sheet Internal style sheet Inline style

    External Style Sheet

    An 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");}


    Do not leave spaces between the property value and the unit (such as margin-left:20 px). Correct way: margin-left:20px

    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 color and the left margin of a paragraph:

    <p style="color:sienna;margin-left:20px">This is a 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.

    Multiple Styles Will Cascade into One


    Styles can be specified:

    inside an HTML element inside the head section of an HTML page in an external CSS file

    Tip: Even multiple external style sheets can be referenced inside a single HTML document.

    Cascading order
    What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: 1. 2. 3. 4. Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)

    So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

    Using Style Classes and IDs


    Classes and IDs Help Extend Your CSS

    By Jennifer Kyrnin, About.com Guide

    See More About: beginning web design beginning css There are many ways to apply styles across a document, but often you want to use a style onsome of the tags in a document, but not all instances of the tag. Or, you may want to create a style that you can apply across several tags in a document, without repeating the style rule. To do this, you use the class and id HTML attributes. These attributes are global attributesthat can be applied to nearly every HTML tag. Class The class selector allows you to set multiple styles to the same element or tag in a document. For example, you might want to have certain sections of your text called out in a different colors from the rest of the text in the document. You would assign your paragraphs with classes like this: <style type="text/css"> p.blue { background-color: #0000ff; } p.red { background-color: #ff0000; } </style> Then, when you want to call the various classes you would use the class attribute within the paragraph (<p></p>) tag. Any tag that did not have a class attribute would be given the default style for that tag. For example: <p class="blue"> This paragraph would have a blue background. </p> <p> And this paragraph would default back to the normal style. </p> <p class="red"> And this paragraph would have a red background color. </p> If you want to use a single class across multiple HTML elements, simply remove the HTML element from the beginning of the style call (be sure to leave the period (.) in place): <style type="text/css"> .blue {background-color: #0000ff;} .red {background-color: #ff0000;} </style> These two classes are then available to any element that needs them: <p class="blue"> This paragraph would have a blue background. </p> <h2 class="blue">And this h2 would also have a blue background.</h2> ID The ID selector allows you to give a name to a specific style without associating it with a tag or other HTML element. You write an ID code like this:

    <style type="text/css"> #indent1 { text-indent: 10px; } </style> You associate an ID tag the same way you associate classes, within the element that should have that style: <h3 id="indent1"> You can give your ID tags any grouping of letters and numbers that you would like. It's a good idea to give your ID tags names that you will remember and understand a few weeks or months later. Keep in mind that HTML standards require that the ID must be unique. Note: One of the trickiest things about CSS is that it requires the use of formerly optional ending tags (as does XML). For example, if you have a style applied to a paragraph tag <p>, the browser may not know where to end that style if you do not include the ending tag </p>.

    You might also like