A Fun Little CSS Lesson for Beginners
You can have some fun with the different CSS styles if used correctly . This is where the term “cascading” comes to the scene. Here are 3 CSS web design elements to give you a start at learning style sheets.
What Does an External Style Sheet Do?
Basically, the External Style Sheet sets the style for the entire website design giving it a unique look and feel.
On one page particularly you include some fresh components plus some inline css which is different from what you have specified within your external style sheet.
What Goes On Whenever You Utilize Inline, Internal and External CSS Together?
Everything will “cascade” or fall into place. It will initially employ any inline code, then it will look for the internal code within your pages head after which it’s going to use any external style sheet listed.
If you have used inline code to alter the color and font of a single particular paragraph, the other sentences and other components will still be based on the external style sheet. They play collectively very well, as they say.
Inline Style Sheets
To work with inline styles, you employ the, …. (drum roll please)…. style tag, also known as the style attribute. Did you guess correctly? You can answer yes, Nobody is ever going to know except you.
If you have ever had a look in your HTML or source code, you should have observed these little creatures there because this is where they love to call home. For the objective of our training, we’ve grabbed one of those evasive style tags and placed it on the page right beneath here so you could get a better look at it in the daytime.
<p style=
Now there, this does not look so frightening does it? Sort of ordinary really. The issue is at the moment, it doesn’t know what to do, so it is just sitting there with patience waiting for further instruction.
Web page design language and CSS tend to be very obedient and follow instructions very well so long as the directions can be found in a precise voice that they can comprehend.
Why don’t we give it something to perform?
<p style=”color:red; font-family:verdana; margin-left:20px”> Here is the text for the page that is impacted </p>
Therefore, what we now have done is taken the existing <p> (paragraph) tag and added a style which will affect everything until we close the paragraph using the </p> tag.
From the example given above, in the event you haven’t guessed already, we used the style tag to modify the color to red, used the Verdana font and applied a left margin of 20px.
If we would’ve used sans serif font rather than Verdana, we could have inserted that within single quotes like ‘sans serif’. Whenever you choose two words inline, you have to enclose in single quotes.
Look more closely at the illustration above to see why it works.
We applied the style= followed by a few instructions. The primary section of the instruction is called the property while the 2nd part is called the value
property:value.
The main property we wished to designate was the color and the first value was red. You separate the property and value using the colon => :color:red
If you use more than one property and value, separate those with the semicolon
=> ;color:red; font-family:verdana
or
color:red; font-family:’sans serif’
Keep in mind, two words have to be enclosed in single quotes when using them inline. Easy enough, don’t you think? I can see you nodding your head with excitement. Explain more, I can hear you announcing.
Learn CSS Web Design From Home
Yes, we will cover more tips about CSS inline, external and internal later but, did you know you can get a web design course covering this and other lessons for beginners?
All you have to do is go to the official site here and watch a video for details. Enjoy your new CSS knowledge and I hope this tutorial brightened your perspective in web design.
