Scribd Logo
Carica

Benvenuto in Scribd!

  • What Is CSS?: Specify A Background Color

    Caricato da

    Muhammad Mujahid
    29 visualizzazioni3 pagine
    CSS is a language designed to specify the overall appearance of webpages. You can specify a background color for a webpage, a table, a form element, a paragraph. External stylesheet definitions are placed in a separate file.

    Descrizione originale:

    Titolo originale

    css

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    DOC, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    CSS is a language designed to specify the overall appearance of webpages. You can specify a background color for a webpage, a table, a form element, a paragraph. External stylesheet definitions are placed in a separate file.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    29 visualizzazioni3 pagine

    What Is CSS?: Specify A Background Color

    Caricato da

    Muhammad Mujahid
    CSS is a language designed to specify the overall appearance of webpages. You can specify a background color for a webpage, a table, a form element, a paragraph. External stylesheet definitions are placed in a separate file.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato DOC, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    What is CSS?

    CSS stands for Cascading Style Sheets. It is a language designed to specify the overall appearance of webpages as well as the appearance

    and structure of the text and elements such as images and buttons on webpages and their layout. Styles can be specified with CSS using

    internal style sheet definitions which are placed right into HTML/XHTML code or in external files.

    What can be done with CSS?

    • Specify a background color - You can specify a background color for a webpage, a table, a form element, a paragraph,

    and more.

    • Specify a common style for one tag or a set of tags. - For example, you can specify that all text declared with the

    <h2> tag should be blue or that all text declared with the <p> (paragraph) tag should be bold and in a Courier font.

    • Specify the distance between elements - For example, you can specify how much distance between the top most

    point of a page and the first element that appears on it there should be or the line spacing in a paragraph.

    • Specify the appearance of links - For example, you can specify that an unvisited link should be blue and not

    underlined, when the user moves the mouse over a link it should have a gray background and be underlined, and visited

    links should be green.

    • Specify multiple styles for various webpages - You can have one stylesheet definition that can be used on several

    webpages instead of redefining the style on each individual page. For example, if you want the links on several of your

    pages to be green, you can specify this in one external stylesheet definition, and upload it to the pages where you want

    this particular style to take effect. Once you want to make a change to the stylesheet definition, you can do so in the

    stylesheet, and the changes will appear automatically on all the pages that the stylesheet has been uploaded to.

    Al

    The three types of stylesheets

    There are three types of stylesheets:

    • Internal - Placed right on the page whose interface it will affect.

    • External - Placed in a separate file.

    • Inline - Placed inside a tag it will affect.

    Creating an internal stylesheet

    Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style>

    tag and goes in the head section of an HTML document.

    The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".
    Syntax:

    <style type="text/css"> styles go here </style>


    Example:

    <html> <head> <style type="text/css"> p {color: green} </style> </head> <body> <p> The text in this paragraph will be green.

    </p> <p> This paragraph too. </p> </body> </html>

    The above stylesheet definition specifies that all text declared with the <p> tag should be green.

    Output:

    The text in this paragraph will be green.

    This paragraph too.

    NOTE: There are some old browsers still in use that do not support styles. Such browsers will ignore the <style> tag and will display the

    content within it on a webpage. You can prevent this by placing HTML comments within the <style> tag:
    Example:

    <html> <head> <style type="text/css"> <!-- p {color: green;} --> </style> </head> <body> <p> The text in this paragraph will be

    green. </p> </body> </html>

    Creating an external stylesheet

    Use an external stylesheet when you want to apply one style to many pages. If you make one change in an external stylesheet, the change

    is universal on all the pages where the stylesheet is used.

    An external stylesheet is declared in an external file with a .css extension. It is called by pages whose interface it will affect. External

    stylesheets are called using the <link> tag which should be placed in the head section of an HTML document. This tag takes three

    attributes.

    Attributes of the <link> tag:

    • rel - When using an external stylesheet on a webpage, this attribute takes the value "stylesheet"

    • type - When using an external stylesheet on a webpage, this attribute takes the value "text/css"

    • href - Denotes the name and location of the external stylesheet to be used.
    Example:

    <html> <head> <link rel="stylesheet" type="text/css" href="style1.css" /> </head> <body> <p> The text in this paragraph will be

    blue. </p> </body> </html>

    Output:

    The text in this paragraph will be blue


    The code from style1.css:

    The <font> tag

    The <font> tag is used to set text size, font type, and color. It takes three attributes - size, face, color.
    Attributes of the <font> tag

    • size - Takes a numerical value (1 (smallest) - 7 (biggest)) specifying the size of the text.

    • face - Specifies the font of the text. Many possible values including Times New Roman, Georgia, and Courier New.

    • color - Specifies the color of the text.


    Example:

    <font face="Goergia" color="green" size="4"> The font of this text will be Georgia, it will be green, and a size of 4. </font>

    What are frames?

    In HTML, frames are a way to display more than one webpage in the same window. Each of these pages will be called a frame. The main

    page will not have any content on it, but will contain a 'frameset' that will consist of these frames.

    The <frameset> tag

    The <frameset> tag specifies that a page will be composed of frames.


    Attributes of the <frameset> tag

    • rows - denotes that the frames should appear in rows

    • cols - denotes that the frames should appear in columns

    • border - a numeric value which sets the size of the border between frames

    • noresize - prevents the user from changing the intended size of your frames. Takes the value "noresize"

    The <frame> tag

    The <frame> tag denotes a frame in a frames page.


    Attributes of the <frame> tag

    • src - denotes the file that will appear in the frame.

    • name - denotes the name of the frame.

    NOTE: The <frame> tag has no end tag.


    <frameset rows="50%, 50%"> <frame src="frameone.php" name="frameOne" /> <frame src="frametwo.php" name="frameTwo" />
    </frameset>

    In this example, there is a frameset with two rows. The first row is set to 50% of the height of the browser window, and the second row is

    set to 50% as well.

    p {color:blue}

    NOTE: The <style> tag is NOT used in an external stylesheet, and neither are HTML comments.

    Creating an inline stylesheet

    Use inline stylesheets when you want to apply a style to a single occurence of an element.

    Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the styleattribute.
    Example:

    <p style="color:gray">This text will be gray.</p>

    In this example, we are using the stylesheet command color to denote that the text in a paragraph will be gray.

    Output:

    This text will be gray.

    Potrebbero piacerti anche