Methods of adding CSS to HTML

Category: Entertainment

Presentation Description

For more details on our products and services, please feel free to visit us at Best Online Marketing Company New Delhi, Internet Marketing Company New Delhi, Online Marketing Companies, Online Marketing Companies India&Search engine marketing New Delhi


Presentation Transcript

slide 1:

Methods of adding CSS to HTML There is more than one way to add a Cascading Style Sheet CSS to your HTML document. In this short tutorial I will explain the strengths and weaknesses of the four main methods. For more details on our products and services please feel free to visit us at Best Online Marketing Company New Delhi Internet Marketing Company New Delhi Online Marketing Companies Online Marketing Companies India Search engine marketing New Delhi Linking to a separate CSS file This is the most common method of attaching CSS rules to an HTML document. With this method all of your style rules are contained in a single text file that is saved with the .CSS extension. This file is saved on your server and you link to it directly from each HTML file. The link is just a simple line of HTML that you put in the head section of your HTML document it looks like this: link rel"stylesheet" type"text/css" href"mystyles.css" media"screen" / Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required like the example above but if its saved in a folder then specify it like this href"foldername/mystyles.css". The media parameter specifies when the CSS rules are to be used. "screen" indicates for use on the computer screen. If you specify "print" then the rules will only be followed when the page is printed. You can include multiple CSS files if required. Embedding CSS into the HTML You can also embed CSS rules directly into any HTML page. To do this you need to add the following code to the head of your HTML document: style media"screen" type"text/css" Add style rules here /style All of your CSS rules go between the style tags. As before the media can be "screen" for your computer screen or "print" for printing.

slide 2:

The disadvantage with this approach is the styles must be downloaded every time someone visits the page this can cause a slightly slower browsing experience. However there are a few advantages. Because the CSS is part of the HTML document the whole page exists as just one file. This can be useful if you are sending the page to someone via email or if it will be used as a template such as a blogger template. I use this method on my liquid-layout demos so when people view the source of the page they can see the HTML and the CSS code together. Another advantage of using this method is with dynamic content. If you are using a database to generate the page content you can also generate dynamic styles at the same time. Blogger does this - it dynamically inserts the colours for headings and other elements into the CSS rules embedded in the page. This allows users to change these colours from an admin page without actually editing the CSS in their blog templates. Adding Inline CSS to HTML tags Style rules can also be added directly to any HTML element. To do this you simply add a style parameter to the element and enter your style rules as the value. Here is an example of a heading with red text and a black background: h2 style"color:redbackground:black"This is a red heading with a black background/h2 This is not a good method to use because it will bloat your HTML and make website maintenance a real headache. However it can be useful in some situations. One example could be if you are using a system where you dont have access to the CSS file - simply add your style rules directly to the elements instead. Importing a CSS file from within CSS Another interesting way to add CSS to a HTML page is with the import rule. This lets us attach a new CSS file from within CSS itself. Lets look at an example of how this is done then I will show a practical example of when you might use this method. To import a new CSS file from within CSS simply use the following rule: import "newstyles.css" Just change "newstyles" to the name of your CSS file and be sure to include the correct path to the file too. Remember the path is relative to the current CSS file that we are in if the CSS is embedded into the HTML page then the path is relative to the HTML file. Lets imagine we have a 1000 page website and we link to a CSS file from every page on the site. Now lets imagine we want to add a second CSS file to all of those pages. We could edit all 1000 HTML files and add a second CSS link or a much better way would be to import the second CSS file from within the first file. We just saved ourselves many hours of work

authorStream Live Help