< Web Design
Web Design → Inline CSS
 This page is part of the Web Design project.
  • 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”.

This article is issued from Wikiversity. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.