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:
| CSS | What Does it Mean? | Example values |
| Property | The thing you want to change | background-color; height; |
| 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:
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 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 replit.it
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
