Welcome back to Part Two of Etna’s CSS “share the knowledge” primer. In the previous post, we talked about the benefits of different types of cascading style sheets (CSS) and where to find it.
What Is CSS?
The basic layout of an element in a style sheet is selector { property: value }. To have more than one property for a selector, separate them with a semi-colon. There are lots of properties that can be grouped together in a type of shorthand.
#calloutbox { border-width: 1px; border-style: solid; border-color: #e6e6e6; } will give you exactly the same results as #calloutbox { border: 1px solid #e6e6e6; }
There are many types of selectors in CSS but it is most important to understand the difference between classes and IDs. A class is identified by a period in the CSS. An ID is identified by a pound sign (#) in the CSS. The big difference between the two is that classes can be used over and over on a page. IDs are exclusive and can only be used once on a page.
The most critical concept to understand about CSS is inheritance. This is the “cascading” part of cascading style sheets. When you nest one element inside another, the nested element will inherit the properties assigned to the containing element… that is, unless you modify the inner elements values independently. The example below shows how the ID called content has a text color that is red. That red color “cascades” into all elements inside #content, until it is overwritten by the blue class.
How Do We Use CSS?
In the CSS:
#content { border: 2px solid orange; color: red; }
#content p { margin: 0 0 10px; }
#content p.bigfont { font-size: 34px; }
#content p.blue { color: blue; }
In the body:
<div id=“content”>
<p>Text here.</p>
<p class=“bigfont”>Big text here.</p>
<p class=“blue”>Some colored text here.</p>
<p class=“bigfont blue”>Some big, colored text here.</p>
</div>
On the screen:
Leave a Comment