Advantages Of Using Css In Web Design Computer Science Essay

Published:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

What is CSS (Cascading Style Sheet)? Cascading Style Sheet or usually called CSS is a web design program code that allows separating the content of the web and the design structure that build the web itself. CSS is also known as the lightest size of code to build a website.

When CSS were introduced in late 1996, they represented an exciting new opportunity. They enabled much more sophisticated page design (typography and layout) than web developers had been used to, and they helped manage the complex tasks of developing and maintaining sites, and keeping them up to date. They also greatly simplified the process of making web pages accessible to as many people as possible, regardless of the device they use to read a page, and regardless of any disability they might have. Now, CSS is using by a worldwide to create an interactive and cool websites.

CSS is a recommendation of the World Wide Web Consortium (W3C). W3C is founded by Tim Berners-Lee. It exists to enhance World Wide Web Power and keep the style and format of the web on its track. CSS is standard application in the web design to make the content of the web is placed different with it design (appearance). At the moment, there are 3 recommendation that has released by W3C; CSS1, CSS2 and CSS3 (still on development). CSS is designed primarily to enable the separation of document content from document presentation such as page layout, page scheme and page theme. This separation can improve content accessibility; provide more flexibility and control of the web pages. So, with this ability, CSS will allow to make a light-size web with sophisticated design and user friendly interface.

Web pages should separate content from appearance.

As a developer this means that the information in a web site should go into HTML files, but HTML files should not contain information about how that information is displayed. And that information will be displayed in web page with CSS support. Using CSS in a webpage will convey a lot of advantages. The traditional HTML approach was to "hardcode" all of the appearance information about a page. With CSS, the appearance information will be entered once. It will make much easier control of design more than hundreds web pages. Another major advantage involves the management of large, sophisticated sites. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.

With CSS's compatibility, web page can be more like modern web style called web 2.0. Web 2.0 is web style that has format with clear design and modern characteristic. The CSS code will support this web style, in order to make a better styling of a website. Benefits of using CSS , such as ; Web will become lighter in size, modern in style, have a flexible user interface and of course it can save a lot of time and energy with simple design programming of CSS. Nowadays, web design with basic of web 2.0 is a must. Web 2.0 is search engine friendly, easy accessible for user (visitor) and lighter in size if it's going to be compared with previous technology, HTML. One of the main component cores of Web 2.0 is CSS. CSS can support the web design structure that can make web code fewer than with common HTML code structure. CSS helps many web developers to create their web easily, starting from the coding till the design work. CSS actually is the easiest application to create a great web design that particularly recommended by W3C for a website. CSS is the most accessible web application that can be easily accessed by user. It makes the web will be more interactive with user. But unfortunately, CSS can make server full of data. Besides that, if the CSS is not compatible with the web browser, it will draw an element that already declared in wrong position or wrong target. If it just for the position, it takes a bit consequence, but if it goes to the text or different conventions of writing, it will be a big mistake.

CSS will does some work to make the browser draw a page that connects with CSS according to the command inside the CSS. CSS will "suggest" the browser to draw a page, not "force" the browser. It's because certain browser will not obedient with the CSS command. Every Cascading Style Sheet (whether it is contained in a .css file, or embedded in the head element of an HTML document) is a series of instructions called statements. A statement does two things, identifies the element that effected by CSS and tells the browser how to draw the page in browser. The part of a statement which identifies page elements is called a selector. Selectors select page elements. The part of a statement which tells a browser how selected elements should be drawn is called the declaration. The example of the declaration,

body {

font-family: Arial;

font-color: red;

}

statement-structure.jpg

From the code above, "body" is the selector while "font-family" and "font-color" is the declaration. It will select the tag <body> in HTML document and draw the <body> tag according to the declaration.

Component of CSS (Main Core)

CSS has two different structures that make it work on webpage. These two different things included in one group called statement. Two main statements of CSS consist of selector and declaration. Main function of declaration is to declare the style format of an element in web pages. Selector has the function to selects one or more element in a webpage.

Component of CSS (Selector)

CSS has several selectors component; there are class selector, ID selector, pseudo element selector, descendant selector, link pseudo class selector, dynamic pseudo class selector, language pseudo class selector, child selector, first-child selector and adjacent sibling selector. Each selector has its own rule when it will be applied on web page.

Class selector is selector that using .(dot) rules to assigns one or more element in webpage. Class selector can make a new element one webpage. This element will be standalone from other class selector.

The second is, ID selector, ID selector is a selector that using id rules to assigns one or more element in webpage. ID selector known as the most eligible selector to make a appearance format. It because ID selector can assigns an element or makes a new different element. This new element will be globally affecting the webpage.

The third is pseudo element; the pseudo element is rule that control the behavior of links in webpage. Pseudo element consist of four main types there are, :active(for on-click link), :hover(for on-hover mouse link), :link(for normal link) and :visited(for visited link). Each type will control different conditions of links.

The fourth is descendant selector is selector that inheritance with another selector. This selector will match the selector in CSS file with declaration in HTML files. Actually, in descendant selector, there are two different selectors, that the first one will be the parent selector of other. This selector will match the parent selector first then it goes to match the child selector. So, the selector will be descendant.

The fifth is link pseudo class selector. This selector selects link element on the web. Its particularly change the displayed common link on the webpage. This selector has the following forms; a:link (to change the displayed the static link on webpage), a:active (to change the displayed link for active links), a:hover (to change the displayed link for hover links), a:visited (to change the displayed link for visited links). With this type of selector, links on webpage can appear differently in different states.

The sixth is dynamic pseudo class selector. This selector selects the dynamic state of links. This selector is the same as the previous selector, link pseudo class selector. But the different is dynamic pseudo class selector is added by a new state called a:focus its exist for declaring link state for keyboard focus.

The seventh is language pseudo class selector. This selector selects an element basis on their human language encoding. To specify the language of an element in HTML 4.0, use the lang attribute in the following way. If a paragraph is in a particular language, this is encoded as <p lang="language code"> where language code is usually a two character standard code for common languages. For example, French has the language code "fr", while Chinese the code "zh". The above examples would be <p lang="fr"> and <p lang="zh">, for French and Chinese respectively.

The eight is child selector. This selector selects only the child element of a parent element. Example, to select <strong> tag after the <div> tag. Then declared the format of style this selector. This selector will select all the <strong> tag all over the <div> tag.

The ninth is first-child selector. This selector similar to child selector. But this selector only selects the first child of the parent element. Example, to select <strong> tag immediately after the <div> tag. So it will only select the <strong> tag that placed just after the <div> tag.

The tenth is adjacent sibling selector. This selector selects only the adjacent element that structured on the webpage. Example, to select <em> tag that placed right after the <strong> tag. So this declaration will only select the <em> tag that adjacent with <strong> tag.

Component of CSS (Declaration)

CSS has declaration component. Declaration creates the style format for the selected element by selector. In style sheet, usually declaration containing some functions or properties that will particularly changed the displayed element. Declaration of CSS can grouped by some categories, there are, text style property, text layout property, background property, border property, margin property, padding property, page layout property, element type property and user interface property. Each property will format a particular element that has been selected by selector.

The first is text style property. The text style properties affect how text appears on a page. While appearance based HTML gave some control over font, font color, font size and font weight, CSS extended these, and gave much more sophisticated control. CSS2 revision 1 provides the following text-style properties:

color

font-weight

font-family

font-size

font-variant

font-style

text-decoration

text-transform

The second is text layout property. This group of properties specifies how text itself is laid out on a page. These are properties specific to text, providing control over things like line height and letter spacing. In conjunction with the page layout properties (which apply to elements and their position on a page more generally), they provide quite sophisticated layout of web content. At present, though, CSS does not provide the level of page layout as found in page layout applications such as Quark Express and PageMaker. As it is often said, CSS is not desk top publishing for the web. While text appearance controls in HTML are very limited, CSS provides control over traditional typographic elements such as letter spacing (kern), word spacing (track) and line spacing (leading).

The text layout properties are:

letter-spacing

word-spacing

line-height

vertical-align

text-indent

text-align

direction

unicode-bidi

The third is background property. Background properties affect how the background of an element appears. Unlike with standard HTML, with CSS, any element can have a background image or color. Background images can repeat vertically, horizontally, both (the traditional tiling effect of background images in the <body> of HTML pages) or not at all (enabling easy "watermark" effects.) The way the background changes when scroll a page can also be determined with CSS. A background image can either scroll while the page scrolls (traditional HTML appearance) or remain fixed while the text scrolls. In short, CSS goes far beyond the background attributes of HTML.

The background properties are

background-color

background-image

background-attachment

background-repeat

background-position

background

The fourth is border property. Using cascading style sheets any element may have a border, of varying widths, colors and styles. Elements can even have every border (top, left, bottom, right) a different style, width and color.

The border properties are:

border-width

border-top-width

border-right-width

border-bottom-width

border-left-width

border-color

border-style

border

border-top

border-right

border-bottom

border-left

The fifth is margin property. With cascading style sheets, any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:

margin

margin-top

margin-left

margin-bottom

margin-right

The sixth is padding property. With cascading style sheets, any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:

padding

padding-top

padding-left

padding-bottom

padding-right

The seventh is page layout property. One of the most significant limitations of HTML has been the inability to lay pages out in the same way they are laid out on paper. It can be possible, although not always, to lay out pages using tables and transparent 1 pixel gifs, but this both violates our principle of separating content from appearance, and is guaranteed to cause maintenance headaches until the end of time, as new browser versions fail to lay out the pages exactly as they worked in older browsers.

The eight is element type property. Delved deeply into HTML, there are a numbers of different types of element. The main types are inline, block and list item. By default, all elements are one of these types. For example, a paragraph is a block element, while a link is an inline element. With CSS, style sheet can redefine the display type of an element.

The element type properties are:

display

white-space

list-style-type

list-style-image

list-style-position

list-style

CSS 2 introduced a number of new properties which control how tables and their captions are drawn.

border-collapse

border-spacing

caption-side

empty-cells

table-layout

The ninth is user interface property. CSS2 introduced user interface properties, which allow the shape of the cursor to be set based on the object that it is hovering over, and to define the outline of an element. When the cursor is inserted in a field, and keystrokes will be directed to that field, it is said to have the focus. It is usual for some kind of outline to indicate this fact. CSS2 also introduced a series of color keywords which refer to system values such as the color of window borders. Lastly, CSS2 introduced the system font concept, which allows to specify fonts based on those used by the system for various kinds of object, such as menu items and the default text for window items.

Component Values of CSS

CSS has its own value to declaring the style and control the look of the element. This value will placed inside the declaration code of CSS. It will instruct the selector to do the style that has been received by declaration. There are five main values that exist on CSS.

The five main values of CSS are;

Length values

Percentage values

Color values

Keyword values

Shape values

The first value is length values. Length values can be positive or negative, have a numerical value, and must be followed by a unit of measurement. Note that while length values can be either positive or negative, several properties cannot have negative length units.

There are two basic kinds of length unit, relative and absolute. Absolute units should be used only when the physical characteristics of the output device are known. This means that units like points and pixels should be avoided for monitors (because points and pixels are relative value (Macintoshes default to 72 dpi, Windows to 96 dpi, or screen sizes). To get better measurement use relative length values.

The units of measurement are explained below,

Name

Abbreviation

Explanation

Relative?

em

Em

The height of a font

Yes

ex

Ex

The height of the letter x in a font

Yes

pica

Pc

1 pica is 12 points

No

Point

Pt

1/72 of an inch

no

Pixel

Px

One dot on a screen

no

millimeter

Mm

Printing unit

no

centimeter

Cm

Printing unit

no

Inch

In

Printing unit

no

The second is percentage values. Instead of using a unit of measurement many properties can also take percentage values. Remember that an element is contained within another element (for example, a <paragraph> will be inside the <body>). Usually percentage values specify a percentage of the parent.

For example, specifying a width property with a percentage value means the width of an element will be the given percentage of the element which contains it. For instance, p {width: 75%} means that paragraphs will be 75% the width of their container. Often this will mean the body element. Percentages are very valuable with positioning, as when a user resizes their window, the same basic layout can be achieved for the new window size. The form of a percentage unit is a positive or negative sign (no sign means positive units), followed by a number, followed by the percentage sign: %. For example -25%, +15% or 15%.

The third is color values. Backgrounds, text and borders can be assigned colors. Color values can be specified in one of three ways:

color keywords

hexadecimal colors

rgb colors

Hexadecimal RGB colors

For whatever reason, the original web palette (now sRGB) used hexadecimal numbers (base 16 not base 10 numbers) for specifying colors. In short, these RGB colors are specified as a combination of Red Green and Blue. There can be 256 different hues of each color, (from 00 to ff - that's 0 to 255 in human speak).

CSS allows specifying colors using this method, in the following forms:

1) The # symbol, followed by three hexadecimal numbers in the range 00 to ff. For example, #ffcc11. This is the way HTML developers know how to specify color. In this example, the red value is ff, the green value is cc and the blue value is 11.

2) The # symbol followed by three hexadecimal numbers, this time using a single digit. For example, #fc1.

Decimal RGB colors

Because humans are generally more comfortable counting to base 10 than base 16, CSS lets us use decimal rgb values. The color gamut (the total range of colors) is exactly the same. There are two forms of this value, a numerical and a percentage form. They are interchangeable.

1) The numerical form of the color value is the following rgb(255, 255, 0). There are three numerical values, in the range from 0 to 255, one each for red, green and blue.

2) The percentage form of the rgb color value replaces the values in the range from 0 to 255 with a percentage value from 0 to 100%. For example, the above value would be written rgb(100%, 100%, 0%).

To recap, the following values are all equivalent:

green

#00ff00

#0f0

rgb(0, 255, 0)

rgb(0%, 100%, 0%)

The fourth is URL values. Background images and list item images are specified with a URL. This url can be either absolute (that is, the full URL, e.g http://www.wiswakarma.com) or a relative path. URLs have a straightforward form:

url(the url)

So, Absolute URLs are written like this:

url(http://www.wiswakarma.com/images/main.gif)

Relative URLs, similarly, are written:

url(../images/main.gif)

The fifth is keyword values. Many different properties can take keyword values. A keyword value is simply a single word that is translated into a numerical value by a browser. The keywords available for a specific property will be appropriate to that particular property.

Some keyword values are relative (to the parent element). For example,

bold and bolder for font-weight

small and smaller for font-size

The sixth is shape values. The uncommon shape value (it is only used currently for the clip property, introduced as part of CSS2) defines a shape. At present, there is simply a rectangle shape. The form of the rectangle shape is:

rect( top left bottom right )

Each of top, left, bottom and right can be either a length value, or the keyword auto. auto means, at least in the clipping context, that the value of this position of the clip is the same as that of the element itself.

ADVANCED CSS

Cascades and Inheritance

What is Cascade and inheritance? Both are crucial point on coding web pages with CSS design programming

Cascade

A single style sheet associated with one or more web pages is valuable, but in quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites, especially sites managed by more than one person (perhaps several teams who may never communicate) single style sheets don't provide the ability to share common styles, and extend these styles where necessary. This can be a significant limitation. Cascading style sheets are unlike the style sheets using word processors, because they can be linked together to create a hierarchy of related style sheets. This process of linking is called cascading.

Inheritance

Any HTML page comprises a number of (perhaps a large number of) elements - headings, paragraphs, lists, and so on. Often, developers use the term "tag" to refer to an element, making reference for example to "the p tag". But the tag is simply the <p></p> part of the element. The whole construction of <p>This is the content of the paragraph</p> is in fact the <p> element. What many web developers don't realize (largely because it wasn't particularly important until style sheets came along) is that every element is contained by another element, and may it contain other elements. The technical term for this is the containment hierarchy of a web page.

At the top of the containment hierarchy is the <html> element of the page. Every other element on a web page is contained within the <html> element, or one of the elements contained within it, and so on. Similarly, many elements will be contained in paragraphs, while paragraphs are contained in the <body>.

descendent selector.jpg

figure: the HTML containment hierarchy

With cascading style sheets, elements often (and with CSS2 can always be forced to) inherit properties from the elements which contain them (otherwise known as their parent elements). This means that if given the body of the page certain properties (for example font and color) then every element within the page will inherit these properties- there is no need to set the font and color again for each element, such as list items or paragraphs. By assigning a property to an element, override the inherited property.

Generated Content

Just for remind, CSS has the main function there is separate appearance from content. Now if CSS include the generated content, doesn't it makes the appearance will mixed with the content? Firstly, some kinds of generated content already exist in CSS1. Think about bulleted and numbered lists. These add numbering or bullets, so they do generate content to an extent. CSS2 adds more powerful ways of generating content.

There are two aspects to generating content with CSS2.

Where the content is to be inserted?

What the content to be inserted is?

Where is the content to be inserted?

The :before and :after pseudo classes are appended to selectors, and allow the insertion of generated content before or after selected elements. For example, to put something before all headings of level 1. The pseudo element selector to do this is h1:before.

What content is to be inserted?

To do these use a new property content. The content property allows defining the content that is to be inserted before or after selected elements. Content can comprise

strings of text

images and other resources

counters

keyword defined elements

the result of the unique attr() function

Each content of this property contain some values that will make the browser draw the webpage in certain manner.

Content

strings of text

Surprisingly, using this value will insert a string of text before or after the selected element. For example, to generate the content "Chapter" before every heading level 1.

h1:before

{content: "Chapter "}

Place the string of text to be generated between double quote marks.

counter and counters

counter values are more than a little involved. Think of them as super-charged versions of numbered lists. Counters have a name, and a style. Create a counter using the counter function, then use them in conjunction with the content property to insert markers into a document. This isn't quite as confusing as it initially seems.

There are two forms of the counter function, the counter form and the counters form. The counter function has the form counter(identifier, list-style). The identifier is the name of the counter whose value to insert, while the (optional) list-style specifies what style of counter (for instance lower-roman.) These styles are the same as those for elements of type list-style. When the browser encounters a counter function, it determines the value of that counter at this point of the document, then inserts it into the document in the nominated style.

The counters form is very similar, but allows for multiple counters to be inserted simultaneously. The form is counters(identifier, string, list-style). This returns all counters with the name specified by the identifier at this point of the document in the given list style, separated by the string.

Keyword defined elements

At the moment, keyword values are limited to allowing the insertion of various types of quote marks.

open-quote places the open quote string as defined by the quotes property for the elements

close-quote places the close quote string as defined by the quotes property for the elements

no-open-quote does not insert any content, but increments the level of nesting of the quotes

no-close-quote does not insert any content but decrements the level of nesting of the quotes

Basically it works like this. The content property with a keyword value to define, for example, that there should be an opening quote before a certain element. Use the quotes property to define what type of quote marks have to be appearing. If the value doesn't defined yet, for the quotes property, the default is up to the user agent. This means that it may put in some sort of quote mark just because have given content the value of open-quote, but it may not be exactly what it should display.

The attr() function

The last possible value for content, and unique to the content property is the attr() function. This returns the value of a named attribute of the selected element. The returned value is then inserted as a string. For example, with a link, the title of the link could be inserted after the link in the following way.

a:after {

content: attr(title)}

This might be used in conjunction with a @media rule to specify that only when printing a page, the URL should be inserted after the link.

@media print

{a:after{

content: attr(href) }}

Quotes

The actual quotation marks that will be drawn are defined by the new quotes property. This property allows different quotation marks to be created for different elements (for example when quoting different languages the correct quotation marks for that language will be inserted automatically). The quotes property specifies the quote marks to be used for different levels of quotation. It is used in conjunction with a keyword value for the content property above. When content takes a value of open-quote and close-quote, the open and close quotes inserted are those defined by the quotes property.

Counter and counters properties

counter

Counters are sophisticated and powerful, and not surprisingly more than a little complex. But be not afraid, a little thinking and they are manageable. Here's how they work. Counters are used exclusively by the content property to insert numbering (e.g. "1.5") before or after an element.

counters

The last thing about counters is a little more involved again. Think about lists in HTML. These can contain other lists, which can contain others, and so on ad infinitum. It's not possible in advance to know how many levels there will be. Fortunately those smart people at the W3C thought of this, and provide a solution. It's a little tricky, but not rocket science. Counters have a particular "scope". When a counter is created its scope is the level at which it was created, and all that level's children. However, where a counter of the same name is created inside the scope of the initial counter, then this is treated as a separate counter, which now takes over the counting.

counter-reset

The counter-reset property sets the value of a named counter. Property counter-reset takes the name of the counter to reset. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, to which it sets the value of the identified counter.

counter-increment

The counter-increment properties increment the value of a named counter by a certain amount. counter-increment takes the name of the counter to increment. Counter names are identifiers, and comprise letters, numerals and hyphens. They cannot, however, begin with numerals or hyphens. It also takes an optional integer, by which it increments the value of the identified counter. If no integer is specified, the counter is incremented by one.

Media

An important assumption underlying CSS1 was that web pages were viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media has their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV. CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Style sheet can have different parts for printing, handheld devices, monitors and so on. Additionally, different style sheets can be imported depending on the medium used for browsing.

Printing

CSS2 introduced a mechanism for closer control over printing web pages that are styled using style sheets. There are two aspects to consider with printing. The page and the contents of the page. For the page, consider what size it is, whether it is oriented as a portrait or landscape, what printing marks might be required, and what margin it has. For the content, consider about where pages break, and what is done with widow and orphan lines of text. In CSS2, the page properties are defined by the @page rule, while several new properties help control page breaking

The @page rule

At the heart of printing in CSS2 is the @page rule. This is similar to the @media rule. The @page rule defines a context for printing. Essentially it describes the paper sheet that the web page is going to be printed on. Properties @page rules work very much like the standard statements of a style sheet, though they take properties specific to pages that no other statement can use, and can also have margins specified using the familiar margin properties. The properties of a page can be applied to every page, or differently to left and right hand side pages. When printing for bound publications, the margins on the left and right hand sides are usually different to take into account the center binding.

To specify properties for every page, the @page rule has the form @page {/* properties declared here */}

To specify the properties for left hand side pages, the @page rule has the form @page:left {/* properties declared here */}

To specify the properties for right hand side pages, the @page rule has the form @page:right {/* properties declared here */}

Named pages

@page rules can be named, which, in conjunction with the page property, allows particular elements to be printed on particular kinds of pages (that is pages set up in a particular way). For instance, it's easy to set up a @page rule for printing figures. Suppose to print any figures in landscape format. Create set up a named page like this,

@page figures {

size: landscape }

The name of a page is simply placed after the @page keyword and before the properties for the rule. Below the page property tells the browser which @page rule to use to print an element.

Page specific properties

There are two sets of properties associated with how pages will actually be printed.

Those that relate to the printed page itself, that is the margin properties. These can only be applied to @page rules. Here will refer to these as page properties.

Those that relate to how the content is displayed within those pages. These properties are the page-break-before, page-break-after, widows and orphans properties. These can be applied to any elements.

Linking and Embedding CSS to Web Page

If a style sheet contains the information to tell a browser how to draw a particular page, how does a browser know whether it should use a style sheet, and where to find it ?. There are two ways that a style sheet can be associated with an HTML document.

First, the style sheet can be embedded in the head of an HTML document. This way might not be the best way to placing CSS file. Embedding style sheet on the <head> tag of HTML document can lose all the advantages of using CSS. The content is not really separated from appearance, because if using this way, the content will mix on the single webpage.

The second way, the preferred way of associating web pages with style sheets is to place a link in the head of the HTML file to the style sheet. With this link, when the browser begins reading the page, it sees the style sheet link, and downloads the style sheet, then uses the style sheet to draw the page.

Embedding style sheet

Style sheets can be embedded into the <head> element of HTML documents. Quite simply, the style sheet itself is placed inside a <style> element like this:

<style type="text/css"> </style>

As explained above, embedding is not the best use of style sheets as it means lose one of the major advantages of CSS - the ability to modify the appearance of a whole site by making changes to a single file. On the other hand, however, embedding is commonly used by applications such as Dreamweaver and GoLive which make use of the page layout aspects of CSS.

Linking style sheet

The web page links to the style sheet. The style sheet has no knowledge of the pages which are linked to it. To link a web page (HTML document) to a style sheet, place a link to the style sheet in the head of the document, using the following syntax:

<link rel="stylesheet" type="text/css" href="http://www.wiswakarma.com/style/style.css" />

Take a look at each attribute briefly.

rel="stylesheet"

This says that it is a forward link, and tells the browser what to expect at the other end, namely a style sheet.

type="text/css"

Theoretically, style sheets might be written using any number of languages. The style sheets in here are Cascading Style Sheets (CSS). Extensible Style Language (XSL) is another that may become important. This attribute tells the browser what format it is going to receive the style sheet in. The content type is necessary.

href="http://www.wiswakarma.com/style/style.css"

This tells the browser where to locate the style sheet. This can be either a relative or absolute url. The relative url is relative to the HTML document, unlike URLs within style sheets which are relative to the style sheet. The " />" closing of this element is the correct way of closing an empty element in XHTML 1.0.

There are recommendations of how using CSS properly. These recommendations are built by W3C. W3C provide this recommendation to get the webpage code goes correctly. The webpage can be tested to check whether the code inside it has right and proper structured using validation facilities that provided by W3C. This validation will check both HTML and CSS code inside the webpage. If it found the webpage's code error then it will suggest the right code for the webpage.

There are plenty advantages of designing a website with CSS. If a large website that need constant update design, and it's created without using CSS, it will spend so much time and the design result will be not the same good as if it worked with CSS. So, to make the best result of designing a website, it will better use CSS design code, because it will enhance the web page appearance, improve its flexibility and it will be saving a lot of time.

Data Sources

CSS Tutorial < http://westciv.com >

CSS Tips < http://dynamicdrive.com/style >

HTML Expert < http://rosihanari.net >

Web Design Influences < http://webdesign.org >

Figure < http://wiswakarma.com >

Writing Services

Essay Writing
Service

Find out how the very best essay writing service can help you accomplish more and achieve higher marks today.

Assignment Writing Service

From complicated assignments to tricky tasks, our experts can tackle virtually any question thrown at them.

Dissertation Writing Service

A dissertation (also known as a thesis or research project) is probably the most important piece of work for any student! From full dissertations to individual chapters, we’re on hand to support you.

Coursework Writing Service

Our expert qualified writers can help you get your coursework right first time, every time.

Dissertation Proposal Service

The first step to completing a dissertation is to create a proposal that talks about what you wish to do. Our experts can design suitable methodologies - perfect to help you get started with a dissertation.

Report Writing
Service

Reports for any audience. Perfectly structured, professionally written, and tailored to suit your exact requirements.

Essay Skeleton Answer Service

If you’re just looking for some help to get started on an essay, our outline service provides you with a perfect essay plan.

Marking & Proofreading Service

Not sure if your work is hitting the mark? Struggling to get feedback from your lecturer? Our premium marking service was created just for you - get the feedback you deserve now.

Exam Revision
Service

Exams can be one of the most stressful experiences you’ll ever have! Revision is key, and we’re here to help. With custom created revision notes and exam answers, you’ll never feel underprepared again.