web design/inline css - saylor academy · web design/inline css 2 • each property is followed by...
TRANSCRIPT
Web Design/Inline CSS 1
Web Design/Inline CSS
This page is part of the Web Designproject.
•• 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 toappear 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.
Web Design/Inline CSS 2
•• Each property is followed by a colon (:) and a value. In this case the property is font-size and the value is 20point.
•• There is a third example of inline styles, but in this case there are two properties, font-size and color. The twoproperties are separated by a semi-colon (;) and the colour name can be specified by a hexadecimal code or by acolour name e.g. blue.
Above text adapted from: Garrett, J, (2007), “Develop Cascading Style Sheets (CSS): Week One”.
Article Sources and Contributors 3
Article Sources and ContributorsWeb Design/Inline CSS Source: http://en.wikiversity.org/w/index.php?oldid=362592 Contributors: McCormack, Nrose, Remi0o
Image Sources, Licenses and ContributorsImage:DeliciousFruitFromOSWD.png Source: http://en.wikiversity.org/w/index.php?title=File:DeliciousFruitFromOSWD.png License: GNU Free Documentation License Contributors:Author of design is http://www.oswd.org/user/profile/id/10642Image:CSSZenGardenLikeTheSea.png Source: http://en.wikiversity.org/w/index.php?title=File:CSSZenGardenLikeTheSea.png License: Creative Commons Attribution-Sharealike 2.5 Contributors: Lars Daum, www.redrotate.de
LicenseCreative Commons Attribution-Share Alike 3.0 Unported//creativecommons.org/licenses/by-sa/3.0/