CODING WITH CSS: The style attribute

CODING WITH CSS: The style attribute So far you’ve been coding using HTML. As you’ve just seen,



tags are used to group together HTML elements so you can easily change them. To change the look and position of your HTML elements, you have to use CSS. CSS is a programming language often used with HTML.

It is used by programmers to change the way HTML elements look when they’re displayed in your browser. CSS is short for Cascading Style Sheets and is sometimes called “style sheets” or “styles”.

You can use CSS to change the design of your page by adding colours or changing the size and shape of HTML elements. You can also use CSS to change where things are positioned. In fact, there are many different things you can do with CSS to change the look and feel of your page.

The style attribute

To use CSS to change an HTML element you can add a style attribute to your opening HTML tag. You can use the style attribute with any HTML tag. The style attribute works in exactly the same way as the source and alt attributes we used earlier. Let’s have a look at how we add a style attribute:

[html]<p style="CSS-property: value;">Hello World!.</p>[/html]

Just like we saw earlier, the value of our style attribute is set using the equals sign (=) and enclosed in double quotes (” “). We apply CSS to our HTML tag by setting the value of the style attribute to CSS. CSS is a very simple programming language to write. It’s always split into two parts: a property and a value.

CSS properties and values

When you write CSS you always have to use both a property and a value. The property tells your browser what part of the HTML element you want to change. The value tells your browser exactly what to change it to. So it works like this:

CSS What Does it Mean? Example values
Property The thing you want to
Value What you want to
change it to
red; 200px;

When you use CSS you divide the property from the value by inserting a colon (:). At the end of the value, you use a semi-colon (;). If the CSS is more than one word, you join the two words using a hyphen (-).

If you don’t use the right syntax (SYNTAX is the set of rules which decide the way a programming language is structured and written.), your browser won’t be able to decode your instructions. Your style attribute should always be written like this:

[css] style="CSS-property: value;"[/css]

Your browser has hundreds of different built-in CSS properties and values that you can use in your HTML tags to change your page. Let’s take a closer look at how we can use CSS with


tags. If we want to change the background colour of a section of our page, we can use CSS and HTML like this: (Look at how we can use HTML and CSS together to change a page.)

[css] <body>
<div style="background-color: green;">
<p>Hello world.</p>
<p>It is I, again.</p>

All words in CSS are spelt using American English. If you don’t use American English, your browser won’t understand your CSS. For example, every time you write the word “colour”, you must use the American spelling, which is “color“.

Related Posts:

The HTML paragraph tag: p and /p

Using the class attribute

Using CSS classes and the class attribute


Coding Resources Recommended by Tech Experts

Change the Author Permalink Structure – WordPress

Python Basic String Operations

CSS, HTML, JAVASCRIPT, Online Compiler. Code on the go by

Introduction to JavaScript

What is Python?

Why Python is the cooler programming language

Learn about JavaScript IF STATEMENTS

The 14 most popular programming languages, according to a study of 100,000 developers

Learn more about JavaScript Variables

Learn about JavaScript ELSE STATEMENTS

The background-color CSS property

Introduction to JavaScript – Create a Variable: let

Introduction to JavaScript – Variables: String Interpolation

Build to-do list web-app with code

Using more than one CSS property

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.