Back to home

Topics

1. Style and Cascading Style Sheets
For a web page, styles refer to the manner of defining of the margins, fonts, colours etc to make the web page attractive. Styli sheets are files that define these things separately from the contents. The same Styli sheets can be used for several documents. Styli sheets are also known as templates. The function of cascading Styli sheets is to direct how the contents prepared using a markup language should be displayed. Cascading Styli sheets help to eliminate repetitive use of HTML tags while designing web pages.
The tag attributes and page layout used to make the contents of the web page attractive can altogether called its style.
  • Opened the style and formatting window and created a new style.
  • Used these styles wherever needed.

2. Web pages and Cascading style sheets

When several web pages and the properties of the tags to be used in them are to be created, Cascading style sheet is the technology developed to avoid repetition of the code effectively.

3. Including Cascading styles

We were able to give same style for several pages in a word processor using styles and formatting. For making a web page, we prepared html scripts in a text editor. In order to include cascading styles within this we can make use of the same text editor.

4. Adding cascading style for a paragraph tag

In cascading style, the attributes of a tag can be given within {  } braces sfter its name. Examine the figure below.

<  p  >tag using cascading style in the activity 3.1. Make the changes as specified in the table 3.2 save and open the browser.

5. Familiarising different styles

  • Include <  style  > tag within the <  head  > tag.
  • Included the name of the tag to be used for the content inside the <  style  > tag.
  • Included the properties of the tag within the { } braces.
  • Used the colon (:) sign in order to separate property and value.
  • Used the semi colon sign (;) after every property.

6. Different features for the same tag

  • The paragraph tag P inside the <  style  > tag and specified their properties within braces { }.
  • The heading tag h3 and specified its properties within braces { }

When the name of the tag for including the content itself is used for specifying the display properties of the tag, it is called element Selector. When the web pages are developed, the required properties of any of the tags used for including the content can be specified using element selectors.

7. Changing background colour using cascading style.

  • Use bgcolor as attribute for <  body  >.

For example, <  body  bgcolor = "#cfd2d6" >

8. Modifying style for different web pages

  • open the file kalolsavam.html that you have created in a text editor.
  • select all the cascading styles to the <  style  > tag and cut them.
  • click file New, and paste it there.
  • save this new file giving the name style.css to your folder.

Use save As to save this file in your folder giving it a new name. Say kalaolsavam new.html.

The cascading style sheet, style.css is included using the <  link  > tag within the <  head  > tag. When you do this, ensure that your web page and the style sheet file are in the same folder.

9. CSS files

The short form of cascading style sheet is CSS. We can collect all the cascading styles that we use in our web pages in a single file and give it a suitable file name and a file extension .css and keep it in a folder. The greatest advantage is that we can make use of the  cascading styles of this file with a single line of code when we create a web page.

10. History of CSS

HTML has had many versions at the beginning of WWW. . In these versions font colour, etc were introduced in HTML 3.2. The World Wide Web consortium introduced the cascading style sheet in order to eliminate the repetition of code for this purpose. The idea was suggested by Hakon Wium Lie and Bert Bos

11. How to add cascading style?

Cascading style can be added in three different ways on building a web page.

1. Inline: Add the properties of each tag along with the tag itself.

for example:- <  body  style = 'background - color:">

2. Internal:- Here the properties are defined using element selector or class selector  inside the <  style  > tag.

3. External:- Cascading styles required for one or more web pages are included in a separate file with  .css extension. The indications about this file is given in <  link  > tag within <  head  > tag.

12. HTML editors to prepare HTML pages

All web pages cannot be build like this by typing instructions in a text editor. There are applications that help you to create web pages more easily. In these editors, we can prepare web pages as easily as we can prepare attractive document using word processors. For example, prepare a document in a word processor and open it using preview in web browser in file menu.  It opens with a browser. Now right click on  the page and select view page source.

The editors that allow you to create web pages like this are known as WYSIWYG editors. They work on the principle "what you see is what you get". many such editors with free licenses are available today- quanta , plus, BlueGriffon, TextMate etc are examples. Visit the website https://en.wikipedia.org/wiki/comparison_of_HTML_ editors and prepare a note on HTML editors.

13.Web Content Management System (WCMS)

As the use of internet has became widespread, everyone started thinking of a website. In order to build a website, there is no need to learn scripting language. We have WCMS or Web Content Management Systems to help us with this. They are mainly of three types. Online, Offline and Hybrid. Visit the page https://en.wikipedia.org/wiki Web_ content_management_system and prepare a note on the advantages of different Web Content Management Systems.



Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Paid Users Only!
Powered By