Page 117 - DCAP408_WEB_PROGRAMMING

Unit 4: Cascading Style Sheets

Many of the powerful CSS syntax mechanisms (like Selectors) are not applicable in Inline CSS. Notes
This style specification method is most useful, when serving as an override on a case-by-case
basis for style rules specified in an External or Embedded style sheet. Inline styles have higher
cascade precedence than the other specification methods.
The simplest and most direct way of applying CSS to an element is to write it into the tag itself
as a style attribute style=”...”. CSS styles applied this way have the highest priority over other
style definitions, i.e., they will overwrite existing styles.

Syntax:
<[element name] STYLE=”[CSS property]:[property value]”>

Example: <p style=”border:2px solid #8dc919">
Using HTML Code:
<p><font face= “Arial” color= “#000000” size=”3">Boy do I love Saturdays. Nothing like sleeping
‘til 10 and not waking up for work.</font></p>

Using inline CSS: (this above same paragraph could be coded like)
<p style=”font-family:Arial; color:#000000; font-size:12px;”> Boy do I love Saturdays. Nothing
like sleeping ‘til 10 and not waking up for work.</p>

Usage Guidelines:
1. Use as little as possible: Remember that we’re trying to separate content from presentation.
Inline styles are the exact opposite. They’re inefficient because they’ll indulge up your
code and are difficult to maintain. Only use them for some quick testing of CSS styles or
for exceptions, where a style is only used at a particular place and nowhere else on the
homepage.
2. Don’t use double quotes: Because double quotes are already used for marking the start and
end of the style attribute, having another double quote in-between would abruptly
terminate the CSS instructions. Use single quotes instead.

Example:
<p style=”font-family:’trebuchet ms’”>...</p> is ok but not <p style= “font
family:”trebuchet ms””>...</p>.
CSS offers, Web designers more precise control over the look of their pages. With inline CSS, we
can specify the exact pixel size of a font. In comparison, <font> tags limit us to numbers (-7,-6,
-5, -4-3, -2, -1, 1, 2, 3, 4, 5, 6…). These numbers correspond to the font settings in the user’s
browser, and thus eliminate the control you have over the final size of a font.
Apart from this small improvement in the control of our font size, inline CSS does not really
reduce the amount of code needed to format text. It just accomplishes a similar result in a
different way. This leads us to a slightly better method of CSS implementation.

Task Analyze in a group of four that why inline styles have higher cascade precedence
than the other specification methods.

[See complex HTML example using Inline Style Sheets]

LOVELY PROFESSIONAL UNIVERSITY 111