Before we get to -adding style rules to our birthday party project, we first need to cover the various ways in which you can apply those styles. Styling methods have a sort of status within the CSS world; certain style sources will always override other sources, and some will always be submissive. If we we’re to create a hierarchy of importance, with the big cheese at the top, it would look something like this:

1. Inline Styles
2. Head Style Elements
3. External CSS

This doesn’t, however, mean that inline styles are your best option because they override everything else. Quite the opposite really – you want to shy away from inline styles because they limit what can be applied to your element – and it’s really the most tedious method of style application. That being said, you should still familiarize yourself with the process. And luckily, I know a guy…

The Style Attribute

If you’ve followed our HTML series, then you’re well aware that attributes apply certain, well, attributes, to your elements. The most rudimentary method of applying styles to your elements is through the style attribute, which cannot be overridden by any other styles, regardless of whether how they reference your element.

The problem with this is twofold. First, applying styles via an attribute requires you to manually add the attribute for every element you intend to style, and if you ever decide to change that style, this laborious process must then be repeated. Secondly, if you set any global styles for your site, (through the head or an external sheet) any element with a style attribute will ignore that rule.

For these reasons, using the attribute is not a preferred method for doing the majority of your styling. When it does become of accepted utility, however, is when you need to make an exception to a rule you’ve established in a sheet. And that’s generally how it should be used; after you’ve already applied the bulk of your styles elsewhere.

We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud servers! 

Syntax

Code Block
Ask a Question
Download Source
HTML
Inline style syntax.
<element style="inline_style:value">
You apply an inline style just as you would any other attribute, although the value is made up of two parts. The first is the type of style you would like to apply, and the second sets as value for that style. If you would like to apply more than one style, each value is separated by a semi-colon, just as they will be in other styling methods.

We’ll be applying a couple of in-line styles later for illustrative purposes, but until you’ve been introduced to the style properties, creating a new project would be a tad futile, and wouldn’t make a whole lot of sense to you , unless you’ve been previously so versed. You don’t need to worry about creating a new document, but see if you can tell what properties are being applied in the code below, and what visible changes they are making to the page.

Here’s how our styles are setup:
Code Block
Ask a Question
Download Source
HTML
Styling with inline styles.
<body style="background:#333">
<p> </p>
<h1 style="font-family:'Arial Black', Gadget, sans-serif; 
color:#3C0; text-align:center"> 
THIS IS A HEADLINE
</h1>
<p style="color:#CCC; 
font-family:Georgia, 'Times New Roman', Times, serif; 
font-size:9px; margin:40px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Proin sollicitudin nisi eu nulla porttitor viverra. Nulla et 
fringilla sem. Donec vel urna eu quam imperdiet sollicitudin. 
Aenean sed semper urna. Pellentesque habitant morbi tristique 
senectus et netus et malesuada fames ac turpis egestas. Nulla 
convallis consectetur purus a pharetra. Phasellus lacinia ipsum 
ut sapien gravida ultricies dictum ipsum euismod. Fusce viverra 
cursus diam. Fusce ullamcorper arcu nec lectus scelerisque luctus 
sit amet non erat. Morbi hendrerit dui in nisl bibendum tristique. 
Sed suscipit, augue nec pharetra bibendum, justo nunc vestibulum 
libero, ac lobortis nibh mi eu erat. Phasellus placerat gravida.
</p>
</body>
And this is how that will appear in your browser:



More often than not, you wouldn’t be making this many inline style changes – again, this should be the exception to your styling rules – but it’s important to understand the syntax.

CSS3 Cascading Principals #1 Inline Styles.html

We used over 10 web hosting companies before we found Server Intellect. They offer dedicated servers, and they now offer cloud servers!