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

 

<div>

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:

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

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:

CSSWhat Does it Mean?Example values
PropertyThe thing you want to
change
background-color;
height;
ValueWhat 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:

style="CSS-property: value;"

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

<div>

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

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

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

MORE CSS PROPERTIES

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 replit.it

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