HTML and CSS Reference
In-Depth Information
.myclass {
/* Positioning */
position: absolute;
top: 0;
right: 0;
/* Box model */
display: inline-block;
width: 100px;
height: 100px;
/* Color */
background: #ccc;
color: #fff;
/* Text */
font-size: 1em;
line-height: 1.2;
text-align: right;
/* Other */
cursor: pointer;
Keep in mind that these are only guidelines; choose a structure that works for you
and aim to keep it consistent.
Naming conventions
It is helpful to name classes and ids in a way that clarifies their intended use. This
structural naming convention means that the name should describe what the class or id
is used for instead of what it looks like or where it is used in the web document.
The advantage of this naming convention is that it becomes easier to change the
look of your web site. For example, naming an id container #main-content is better than
naming it #center-column-500px . In addition to intuitively understanding the use of the
id, the first name is more versatile in case you later need to adjust the position or size of
the element it is applied to.
#main-content {
width: 500px;
margin: 0 auto; /* centered */
Names should be semantic, but not so semantic that they limit reuse. For instance,
naming a class .header-top-margin is not as flexible as naming the class .small-top-margin
(or .small-tm ). To later recall that the class is mainly used in the header is easy enough;
Search WWH ::

Custom Search