Web Design/Inline CSS

Example 1

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>

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”.