Exercise 2 Demo: Part E : CSS Inline Styles
This is the HTML you will need for Part E of Exercise 2.
With Inline Styles you write the style and apply it directly to a tag for precise control over your content. However, you must write a new style for every new instance, even if the effect you want is exactly the same. Inlines styles are a combination of HTML and CSS.
Inline styles are applied using the style attribute within the opening tag of the content you want to apply the style too. The style attribute is actually HTML code so you use an equal sign after it and enclose all the CSS inside one set of quote marks. Write the information inside the quote marks just like you would write any other CSS - with the property and the value separated by a colon and a semi colon after you end each declaration - - property: value;
The example from above would look like this:
Some red text using Inline CSS and the H3 tag
Using the example in the lecture, the results would look like this:
This is some text which should be 12px, arial, bold, and green
Your code would look like this:
<p>This is some text which should be
<span style="font-size:12px; font-family:arial; font-weight:bold; color:green">
12px, arial, bold, and green.
<span> element is useful whenever you want to apply styles to a small amount of content, from as little a single letter to many words.
For larger passages use the style attribute in the
<p> or the
<div> tag, like so:
Try THIS for getting someone's attention!!!
Your code will look like this:
<p style="color:purple; font-weight: bold; font-family:arial; font-size:12px; background:yellow">Try THIS for getting someone's attention!!!
The last property
background:yellow will set the background color of any content enclosed in an HTML element. Try it!
REMEMBER: Inline styles over-ride any styles set in your document level styles. Use them sparingly, but you can have fun with them like this:
<span style="font-size:60px; font-family:Papyrus; font-weight:bold; color:purple">C
span style="font-size:48px; font-family:Times; font-weight:bold; color:red">o
<span style="font-size:48px; font-family:Zapfino; font-weight:bold; color:#fec004">
<span style="font-size:48px; font-family:arial; font-weight:bold; color:green">
<span style="font-size:48px; font-family:Comic Sans MS; font-weight:bold; color:blue">
C o L O r
Review CSS Document Styles Part D of Demo 2
Go back to the Definition Lists in Part C of Demo 2.
Want a review of Ordered Lists? Go to Part B of Demo 2.
Or a review of Unordered Lists? Go to Part A of Demo 2.
Go to the Exercise 2 page.
© Claudia Faulk. Updated 8.17