Learn The Basic Of Cascading Style Sheet (css)

Cascading Style Sheets

(CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.

This article will anwser about ;

  • Cascading Style Sheet
  • Definition Syntax
  • Why Use Css Style
  • Learn How To Applying Css To Html And Xhtml
  • Related Article

Masterclass-in-HTML5-and--006_20130812000748821_201308120012576021560248539

  • Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL.
  • CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.
  • This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
  • CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed.
  • While the author of a document typically links that document to a CSS file, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified.

Syntax

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

CSS is one way of describing the “style” — the colors, fonts, layout, and other “presentation” aspects of a document

Why use CSS?

Why would I want to use CSS rather than something else?”

  • CSS is a powerful tool that gives web designers flexibility and modularity in the presentation layer of a web site.
  • CSS allows you to have every format rule defined for later use (here “format” means how things appear).
  • So if you are writing a large website and you want a consistent appearance for every title, sub-title, how examples of code appear, how paragraphs are aligned, (I could go on, CSS covers a wide range of presentation options) then CSS is the way to go.
  • Let’s say you have a 1200 page website that took you months to complete. Your current boss gets a promotion and another person fills his place. Your new boss says to change the font, the size, the background, the appearance of tables, etc. everywhere on your 1200-page site to comply with some new corporate policy. If you engineered your site appropriately with CSS, you could do this by editing one linked CSS file that has all your appearance (format) rules in one place. Or you could do it the hard way, and hammer the appearance changes on each and every one of your 1200 HTML pages. By using CSS, changes can be made fast and easy simply by editing a few rules and lines in the global stylesheet. Before CSS was used, these changes were more difficult, expensive, and very time-consuming.

Some server-side template systems can largely be used for the same purpose. Unlike CSS, however, they most often separate the structure from the content and not the presentation from the structure, making it much more difficult for users who wish to disable or ignore styling to do so.

“where should i start learning this css skill ?”

“Could you show me step-by-step learning the css from zero?”

  • Guys,i suggest you learning Applying the Css to Html and Xhtml

CSS can be applied to HTML or XHTML using three methods:

  • linked
  • embedded
  • inline

In the linked method, the CSS is stored in a separate file, instead of directly in the HTML page. In the embedded method, CSS is stored as part of the HTML page, in the header section. In the inline method, CSS is stored directly in the style attributes of the HTML tags, as

<div style="font-weight:bold">Bold Font</div>

The embedded and inline methods do not require having a separate file. The inline method saves you the trouble of considering what CSS classes your document should have.

For a larger site, in which many web pages share the same styling, and in which the styling should be customizable by the user, the linked method is the only viable option.

The methods are treated in detail in the following sections.

LINKING

With linked CSS, CSS rules are stored in a separate file. To refer to that file from the HTML page, add the link element (and its closing element within XHTML) to the head element, as shown in the following example, which assumes that the stylesheet is stored in the file named “style.css”.

Example Web Page
 	css" href="style.css">

The link element in the example has three attributes. The first, rel, tells the browser the type of the target of the link. The second, type, tells the browser what type of stylesheet it is. And the third, href, tells the browser under which URL to find the stylesheet. In the example, the URL is relative, but it can also be absolute.

The “style.css” with a single rule contains only the following text:

p { font-weight:bold; }

This tells the browser that the text in the paragraph (p) element should be rendered as bold.

Example rendering:

Text that will be formatted.

The source code for the complete HTML document is thus as follows:

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Example Web Page

Embedding

Dynamically generated webpages may need to use embedded CSS but this should be kept to a minimum. Even in dynamic pages any CSS that is common to multiple pages should generally be moved to a linked stylesheet.

  • Embedded CSS is CSS that is located in the header of the HTML document that requires styling. For example we would like the text in this HTML document to appear bold.
<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Example Web Page

Text that will be formatted.

The CSS must be placed in the document’s header section:

  <head>
   <title>Example Web Page</title>
   <style type="text/css">
    p {
     font-weight:bold;
    }
   </style>
  </head>

The CSS is contained in a style element. Setting the element’s type attribute to text/css tells the browser that the enclosed sheetstyle is written in CSS and should be used to format the page.

  • If the attribute type is missing or set to an unrecognized value the CSS will not be applied to the page.

The little bit of CSS in this example tells the browser to make all the text found in any paragraph (p) elements bold. The text on the page would look like this:

Text that will be formatted.

Here is the complete document including the CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<title>Example Web Page</title> 
<style type="text/css"> p { font-weight:bold; } 
</style> 
</head> 
<body>
 <p> Text that will be formatted.
 </p> 
</body> 
</html>

Remember, you should use linked stylesheets in preference to embedded stylesheets whenever possible; this allows you to most easily replace the general style information without having to keep track of styles within the various documents and files.

Inlining

Inline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into the style attribute within HTML or XHTML 1.1.

For example

 <div style="font-weight:bold; color:blue;">Bold Font</div>

is rendered as:

Bold Font

As mentioned, you should in general prefer linked CSS to inline CSS.

Advertisements

About Aoqy

Hye guys,i would like to share about me and hired me if you would to do project with me.Overall,i like everything about design.anything as long i could create for you very soon.I just hope that i could help many people about development about thier company.So on my site is all about guide and how to develop more easier way to let your project much easier.so find out more .Many thanks
This entry was posted in Freelancer Course and tagged , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Learn The Basic Of Cascading Style Sheet (css)

  1. Pingback: Activity Developing Small Project With Client’s For Web Designer | 1stFreelancing

  2. Pingback: How To Create Dropdown menu Pure Css and Html | 1stFreelancing

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s