Cascading Style Sheet(CSS)
Dynamic Hypertext Markup Language (DHTML) DHTML is a new and emerging technology that has evolved to meet the increasing demand for eye-catching web sites. DHTML combines HTML with Cascading Style Sheets (CSS) and scripting Languages. HTML specifies a web page’s elements like table, frame, paragraph, bulleted list, etc. Scripting Language (JavaScript and VBScript) can be used to manipulate the web page’s elements so that styles assigned to them can change in response to a user’s input.
Cascading Style Sheets
We already know that an HTML document can contain text, hyperlinks, images, and other multimedia content within HTML elements or tags. These contents are essentials of web pages. In order to style these HTML, we need a separate language called CSS. For example, you can define colour, font, and size of paragraph tag as follows: <p style=“color: #ff0000; font-weight: bold”> Some text that is red and bold </p> CSS in itself has no meaning unless it is associated with HTML elements or tags. CSS is defined as a rule of styles associated with a certain element or set of elements of a HTML document. According to W3C, “CSS is the language for describing the presentation of Web pages, including colours, layout, and fonts. It also allows adapting the presentation to different types of devices, such as large screens, small screens, or printers.” As said in the definition, CSS can be defined in such a way that it can change layout, colors, fonts or any other styles based on the size of the screen (PC Screen, tablet screen and mobile screen) or for printers. In a desktop computer, screen size is large whereas in mobile screen size is small and accordingly HTML content should be presented to webpage viewers. CSS is used to define this type of presentation. If a viewer is trying to print a web page, the presentation of the page can be made different using CSS to make it printer-friendly.
The Style Assignment Process is accomplished with the <STYLE>…</STYLE> tags. The syntax for making the assignment is simple. Between the <STYLE> <STYLE> HTML tags, specific style attributes are listed. The <STYLE> </STYLE> tags are written within the <HEAD>…</HEAD> tags.
CSS Syntax:
<STYLE Type = “text/css”> Tag {attribute:value; attribute:value…} • • • </STYLE>
Attribute: Font, Color, Background, Text, Boarder, Margin and List.
A CSS rule is formed from:
•A set of properties, which have values set to update how the HTML content is displayed, For example, I want my element's text color as white, and its background to be grey.
•A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.
•A set of CSS rules contained within a stylesheet determines how a webpage should look.
Let's make things clear by a quick example. First of all, let's take a simple HTML document, containing an <h1> and a <p>
Example 1: <!DOCTYPE html> <html> <head> <title>My First CSS Try</title> <style> h1{ color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example </p> </body> </html>
Output:
Posts
0 Comments