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-2027 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.