Web Design/Inline CSS
Jump to navigation
Jump to search
|
Web Design → Inline CSS
|
- The simplest form of applying styles to a web page is by using inline styles.
- The style is applied in a line of your XHTML, so it is called an inline style.
- It is the least powerful style application because it only applies to the line you put it in and not to the whole page or many pages.
- Inline styles override any other style applied to a web page.
- Inline Styles are placed within the particular tag you wish to format.
- E.g. <h1 style="color:blue">Some text</h1>
Example 1
Type the code below into your code editor and save the file as inlinecss.html
<html> <head> <title>Inline Styles</title> </head> <body> <p>This text does not have any style applied to it.</p> <h1 style="color: red"> <p style = "font-size: 20pt">This text has the font-size style applied to it, making it 20pt. </p> <p style = "font-size: 20pt; color: #0000ff"> This text has the font-size and color styles applied to it, making it 20pt. and blue.</p> </body> </html>
- The first inline style that appears just after <h1, this will make the color of anything text within the <h1> tag to appear as red.
- The second inline style coding appears. It starts straight after the <p or paragraph element in this example.
- Attribute style specifies the style for an element. For example in the one above the style then is followed by a property here being font-size.
- Each property is followed by a colon (:) and a value. In this case the property is font-size and the value is 20 point.
- There is a third example of inline styles, but in this case there are two properties, font-size and color. The two properties are separated by a semi-colon (;) and the colour name can be specified by a hexadecimal code or by a colour name e.g. blue.
Above text adapted from: Garrett, J, (2007), “Develop Cascading Style Sheets (CSS): Week One”.