HTML Tutorial
HTML Styles
The style attribute sets color, size, and alignment. Later you will move this into CSS.
The style attribute
The style attribute puts CSS directly on one element. The value is a list of declarations: a property, a colon, a value, and a semicolon between them. This is called inline style. It is a practical way to see what a property does before you learn stylesheets.
Example
<p style="color: navy;">This sentence is navy.</p>Click Try it in HTML under an example. That opens /html/try — a live page preview. Change the color name and watch the paragraph update.
Color and background-color
color sets the text. background-color sets the area behind the text. Use a named color, a hex value, or an rgb function. Keep contrast high enough that the words stay readable.
Example
<h1 style="color: white; background-color: #1e3a5f;">Harbor notice</h1>
<p style="color: #1e3a5f;">The tide gate closes at 18:00.</p>Light gray text on white, or yellow on white, fails many readers. If you cannot read it at a glance, do not ship it.
font-size
font-size changes the size of the text on that element. Pixels (px) and relative units (rem, em) both work. Relative units scale better when the visitor zooms or changes the default font size.
Example
<p style="font-size: 14px;">Smaller note.</p>
<p style="font-size: 1.25rem;">A bit larger than the default.</p>Remember the headings chapter: a large font-size on a paragraph does not make a heading. Size and rank are separate jobs.
text-align
text-align lines up inline content inside a block: left, right,center, or justify. It belongs on a heading, paragraph, or other block, not on a stray span that only wraps two words.
Example
<h1 style="text-align: center;">Town hall</h1>
<p style="text-align: right;">Posted 19 August</p>
<p>The meeting starts at seven.</p>Several properties at once
Separate declarations with semicolons. Order does not matter. A trailing semicolon after the last one is allowed and easier to edit.
Example
<p style="color: #111; background-color: #f4f1ea; font-size: 1.1rem; text-align: center;">
Reading room open until nine.
</p>Inline is for learning
Inline style is fine while you try properties. It does not scale. If every paragraph repeats the samestyle string, a change means editing every tag. CSS in a <style> block or a separate file lets one rule cover many elements.
The HTML CSS chapter shows three places to put CSS: inline (this attribute), internal (a style element in the head), and external (a .css file). Move there once these four properties feel familiar.
| Property | Controls | Example value |
|---|---|---|
| color | Text color | navy or #1e3a5f |
| background-color | Background of the element | #f4f1ea |
| font-size | Size of the text | 1.25rem |
| text-align | Horizontal alignment | center |
What inline cannot replace
Layout for a whole page, hover states, and different rules for phones belong in CSS, not in astyle attribute. Inline also loses to many stylesheet rules unless you add!important, which you should treat as a last resort.
Learn the properties here so you recognize them. Plan to store the real design in CSS as soon as a page has more than a few repeated looks.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Chemistry
Acid warning in red
The style attribute paints one element. color is the text. It is a quick demo, not how a site should ship. A real stylesheet lives in CSS.
Contrast matters more than the hue. Red on white is a warning only if it still reads. Do not rely on colour alone — keep the word “corrosive”.
Example
<p style="color:#b91c1c">HCl 1 mol/L — corrosive. Wear goggles.</p>
<p>Neutral water is not styled. It stays the default.</p>Maths
A centred certificate line
text-align:center centres inline content inside a block. It does not centre the block itself. That is margin: auto on a width, which belongs in CSS later.
Example
<h1 style="text-align:center">Area = 12 m²</h1>
<p style="text-align:center">Rectangle 4 m × 3 m</p>