Web Design/Inline CSS

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

Introduction to web design

HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets, CSS3 Animations
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
JavaScript: An Introduction to Programming with JavaScript, JavaScript Challenges, Getting to know JavaScript events, Getting to know the Document Object Model with JavaScript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web Design, About the web design learning project, New Structure, Sample Timetable

This article is issued from Wikiversity - version of the Tuesday, August 18, 2015. The text is available under the Creative Commons Attribution/Share Alike but additional terms may apply for the media files.