Web Design/Embedded CSS
| Web Design → Embedded CSS
|
Example 1
As you can see the style information is placed between the <head> & </head> tags, inside the <style> & </style> tags
The CSS code below should make the:
- Background color = yellow
- Text inside a
<p>tag = green & a font size of 10 pixels - Text inside a
<h2>tag = blue
Type the code below into your favorite code editor and save the file as cssexample.html
<html> <head> <style type=text/css> body { background-color: yellow; } p { color: green; font-size:10px; } h2 { color: blue; } </style> </head> <body> <h2>Internal CSS</h2> <p>This page uses internal CSS. Using the style tag we are able to modify the appearance of HTML elements.</p> </body> </html>
Exercise 2 – Changing the font family and font style using CSS.
The CSS code below should make the:
- Text within the
<p>tag, appear as helvetica, impact, sans-serif font. - Text within the
<p>tag, appear as italic. - Text within the
<h2>tag, appear as gill sans, new baskerville, sans-serif font.
Paste the code below into your code editor, create a new page called cssexample2.html
<html> <head> <style> p { font-family: helvetica, impact, sans-serif; font-style: italic; } h2 { font-family: "gill sans", "new baskerville", sans-serif; } </style> </head> <body> <h2>This is a Heading</h2> <p>This is some text, which is being affected by CSS.</p> </body> </html>
Exercise 3 – Changing the border and aligning the text using CSS.
The CSS code below should make the:
- Background within the
<p>tag, appear as pink. - Border around the
<p>tag, appear as solid green. - Text within the
<p>tag, aligned in the center. - Border around the
<h2>tag, to appear as dotted red.
Paste the code below into your code editor, create a new page called cssexample3.html
<html> <head> <style> p { background: pink; border: solid green; text-align: center; } h2 { border: dotted red; } </style> </head> <body> <h2>This is a Heading</h2> <p>This is some text, which is being affected by CSS.</p> </body> </html>
Exercise 4 – Changing the margin padding using CSS.
The CSS code below should make the:
- The text within the
<p>tag will have a left margin of 2cm.
Paste the code below into your code editor, create a new page called cssexample4.html
<html> <head> <style type="text/css"> p {margin-left: 2cm} </style> </head> <body> <h2>This is a heading with no margin specified</h2> <p>This is a paragraph with a specified left margin</p> </body> </html>
Exercise 5 – Changing the color of a Horizontal Rule using CSS.
The CSS code below should make the:
- The hortizontal rule
<hr>tag will appear as blue (instead of grey).
Paste the code below into your code editor, create a new page called cssexample5.html
<html> <head> <style> hr { color: blue; } </style> </head> <body> <h2>This is a Heading</h2> <hr> <p>This is some text, which is being affected by CSS.</p> </body> </html>