The play a joke on today that I'm going to issue inwards 2 parts is to assistance y'all to understand, at least, a lilliputian of what CSS (Cascading Style Sheets) is.
For those who would similar to larn more, delight accept a await at this link as well as for those who genuinely wishing to larn thoroughly, I recommend to catch this site.
Introduction as well as terminology
Style sheets aim to assistance variety out what is the construction of a website as well as which is its format or appearance. So, the CSS box model is, basically, a box that wraps around HTML elements, as well as determines how those boxes are presented inwards price of colors, fonts, width, backgrounds etc.
The wages is that, anytime nosotros hit upward one's hear to alter something, nosotros don't get got to alter all the pages 1 past times one, but simply, alter the properties from the vogue sail as well as these modifications volition automatically apply inwards all the pages.
The vogue sail is a gear upward of rules made of selectors as well as declarations. The selector is to live used every bit a nickname or shout out of what y'all wishing to configure from the vogue sail as well as apply to the HTML, as well as declarations are properties to which nosotros add together the desired values (more data on CSS syntax)
If nosotros add, for example, the code higher upward inwards our vogue sheet, nosotros mightiness non run into anything detail happening inwards our website. As I get got mentioned above, the selector relates to the HTML as well as CSS so, if nosotros wishing a box to accept these values for width, background color, edge as well as font size, nosotros bespeak to include the selector inside the HTML of a page element, similar this:
<div class="SelectorName">Text here</div>Here nosotros added a dominion telling the browser to translate that this box has to live of a sure enough type or class. This class or selector could get got some specific properties as well as values defined inwards the vogue sheet, every bit y'all tin run into inwards the picture above.
Now let's run into how this volition alter the await of the box, piece all others that don't get got the SelectorName shout out volition follow the touchstone appearance.
Basically, when nosotros add together a dominion inwards a vogue sheet, or modify an existing one, what happens is that all boxes marked amongst that selector volition alter their appearance according to the properties as well as values that nosotros get got defined inwards the vogue sheet.
Where to add together the CSS style
This vogue tin live added inwards external CSS files - hit the CSS file amongst all the rules, upload it on a hosting site as well as acquire the URL of the file. To brand occupation of it, include the next trouble inwards the header of your template. For Blogger, y'all tin add together it betwixt <head> as well as <b:skin><![CDATA[/*:
<link href="syle.css" rel="stylesheet" type="text/css"/>Note: supersede the text inwards bluish amongst the url of the CSS file.
You tin every bit good add together the vogue straight inwards the HTML of the template past times adding the CSS betwixt the vogue tags:
<style>This tin live added inwards the HTML of a page chemical cistron every bit well. In this case, y'all don't bespeak to add together whatever selector to signal where the CSS vogue is:
.SelectorName {
background-color: #EAEAEA;
border: 1px company #444444;
width: 200px;
font-size: 12px;
}
</style>
<div style="background-color: #EAEAEA; border: 1px company #444444; width: 200px; font-size: 12px;">Text here</div>In Blogger, the rules are betwixt the <b:skin><![CDATA[/* as well as ]]></b:skin> peel tags. If nosotros access the HTML of our template, nosotros volition detect a bunch of codes inwards betwixt these tags, which is genuinely the CSS styling that defines the appearance of our blog.
For those who don't wishing to impact the template code, nosotros tin add together the CSS straight past times going to the Blogger Template designer > Advanced > Add CSS.
That's plenty for today. In the adjacent tutorial we'll acquire to know how to add together rounded corners to our images using CSS -> how to gear upward a rounded borders around an picture using CSS.
Comments