Scribd
Upload
57 views

What Is CSS?: Specify A Background Color

CSS stands for Cascading Style Sheets and is used to specify the appearance and layout of webpages. There are three types of stylesheets: internal, external, and inline. Internal stylesheets are defined within <style> tags in the head section, external stylesheets are linked via <link> tags and stored as separate files, and inline stylesheets use the style attribute within individual tags.

Uploaded by

Muhammad Mujahid
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
57 views

What Is CSS?: Specify A Background Color

CSS stands for Cascading Style Sheets and is used to specify the appearance and layout of webpages. There are three types of stylesheets: internal, external, and inline. Internal stylesheets are defined within <style> tags in the head section, external stylesheets are linked via <link> tags and stored as separate files, and inline stylesheets use the style attribute within individual tags.

Uploaded by

Muhammad Mujahid
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 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.

You might also like