Home | | Internet Programming | Cascading style sheets(CSS)

Chapter: Web or internet Programming : Dynamic HTML

Cascading style sheets(CSS)

Cascading Style Sheets (CSS) allows document authors to specify the presentation of elements on a Web page (spacing, margins, etc.) separately from the structure of the document (section headers, body text, links, etc.).

Cascading style sheets

 

       Cascading Style Sheets (CSS) allows document authors to specify the presentation of elements on a Web page (spacing, margins, etc.) separately from the structure of the document (section headers, body text, links, etc.).

       This separation of structure from presentation simplifies maintaining and modifying a document‘s layout.

 

Inline Styles

 

       Inline styles that declare an individual element‘s format using attribute style. Inline styles to p elements to alter their font size and color.

<head>

 

<title>Inline Styles</title>

</head>

<body>

 

<p>This text does not have any style applied to it.</p>

 

<!--style attribute allows declaring inline styles. Separate multiple styles with semicolon-- > <p style = "font-size: 20pt">This text has the

 

<em>font-size</em> style applied to it, making it 20pt.</p> <p style = "font-size: 20pt; color: #0000ff"> This text has the <em>font-size</em> and

 

<em>color</em> styles applied to it, making it 20pt. and blue.</p>

</body>

</html>


       Attribute style specifies the style for an element. Each CSS property (the font-size property in this case) is followed by a colon and a value. We declare the p element to have 20-point text size.

 

       Element em to ―emphasize‖ text, which most browsers do by making the font italic. The two properties, font-size and color are separated by a semicolon. Set the text‘s color to blue, using the hexadecimal code #0000ff.Color names may be used in place of hexadecimal codes.

 

Embedded Style Sheets

       Embedded style sheets enable a Web-page author to embed an entire CSS document in an

 

XHTML document‘s head section.

<head>

 

<title>Style Sheets</title>

<style type = "text/css">

em { background-color: #8000ff;

 

color: white }

 

h1 { font-family: arial, sans-serif } p { font-size: 14pt }

 

.special { color: blue } </style>

</head>

 

<body>

<h1 class = "special">Deitel & Associates, Inc.</h1>

 

<p>Deitel & Associates, Inc. is an internationally recognized corporate training and publishing organization specializing in programming languages, Internet/World Wide Web technology and object technology education. Deitel & Associates, Inc. is a member of the World Wide

 

Web Consortium. The company provides courses on Java, C++, Visual Basic, C, Internet and World Wide Web programming, and Object Technology.</p>

<h1>Clients</h1>

 

<p class = "special"> The company's clients include many

 

<em>Fortune 1000 companies</em>, government agencies, branches of the military and business organizations. Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks, professional books, interactive CD-ROM-based multimedia Cyber Classrooms, satellite courses and World Wide Web courses.</p>

 

</body>

 

</html>


 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
Web or internet Programming : Dynamic HTML : Cascading style sheets(CSS) |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2024 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.