css presentation
DESCRIPTION
WebTRANSCRIPT
Cascading style sheets
By: Shaina Ashraf
CSS apply methods
• In-line
– using a style attribute in HTML elements
• Internal
using a <style> element in the HTML <head> section
– Using ID’s
– Using Class
• External
• using one or more external CSS files
In-line Style
• <p style="color:blue;margin-
left:30px;” >text</p>
• <h1 style="color:blue">This is a
Blue Heading</h1>
Internal
• Embedded, or internal, styles are
used for the whole page.
• Inside the head element, the style
tags surround all of the styles for the
page.
Internal• <head>
• <title>CSS Example</title>
• <style>
• p {
• color: red;
• }
• a {
• color: blue;
• }
• </style>
Internal• <head>
• <style>
• p {
• border:1px solid grey;
• padding:10px;
• margin:30px;
• }
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• <p>This is a paragraph.</p>
• <p>This is a paragraph.</p>
• </body>
Internal (using ID)
• To define a special style for one special
element, first add an id attribute to the
element:
• p#p01 {
color:blue;
• }
• <p id="p01">I am different</p>
Internal (using Class)
• To define a style for a special type (class) of
elements, add a class attribute to the
element:
• <p class="error">I am different</p>
• p.error {
• color:red;
• }
Difference b/w Id & class
• Use id to address single elements.
Use class to address groups of
elements.