Notes from Codeschool CSS Cross Country Course - Level 4
D.R.Y. Don't Repeat Yourself
The fundamental way to clean up your code is to be DRY. This will save time in maintaining and declaring your styles.For example, suppose you want to include a font property in a number of text related elements.
<!-- index.html -->
<body>
<div class="container">
<h1>Some Title</h1>
<p>Some interesting text.</p>
<a class="sale" href="/sale">Sale</a>
</div>
</body>
/* styles.css */
h1 {
font-family: Arial, sans-serif;
}
p {
font-family: Arial, sans-serif;
}
.sale {
font-family: Arial, sans-serif;
}
This is not very DRY, you repeat yourself 3 times! Instead do:
body {
font-family: Arial, sans-serif;
}
This will set your base font family for the whole document. If you don't want to do that, and only want those styles for this container, you could do:
.container {
font-family: Arial, sans-serif;
}
Keep it DRY with a Comma Separated List of Selectors
If you have a set of elements with the same properties that don't fall inside the same parent container, you can still declare them in a DRY way.e.g.
Not DRY:
/* styles.css */
p {
font-size: 12px;
}
.ski_lift {
font-size: 12px;
}
h6 {
font-size: 12px;
}
DRY:
p, .ski_lift, h6 {
font-size: 12px;
}
Selector Abstraction
e.g.
Not DRY:
/* styles.css */
.submit {
border: 1px solid #000;
cursor: pointer;
text-transform: uppercase;
}
.next_button {
border: 1px solid #000;
cursor: pointer;
text-transform: uppercase;
}
<!-- index.html -->
<input type="submit" class="submit" />
<a href="next_page.html" class="next_button">Next</a>
You can DRY this up by abstracting your CSS declarations into one class, and then apply to both instances in the HTML:
/* styles.css */
.button {
border: 1px solid #000;
cursor: pointer;
text-transform: uppercase;
}
<!-- index.html -->
<input type="submit" class="button" />
<a href="next_page.html" class="button">Next</a>
Sharing Styles
What happens when your two buttons are only mostly the same? You can create a 'base' button, in this case we'll call it .button, then create the variation after it. Here we'll call the variation .submit. Order is important here, because .submit comes after .button on the stylessheet, via the cascade order, the background color for .submit will override the background of .button. Now to use it in the HTML, just add class button and class submit to your input tag.
/* styles.css */
.button {
background: #fff;
border: 1px solid #000;
cursor: pointer;
text-transform: uppercase;
}
.submit {
background: #fff;
}
<!-- index.html -->
<input type="submit" class="button submit" />
<a href="next_page.html" class="button">Next</a>
.button {
background: #fff;
border: 1px solid #000;
cursor: pointer;
text-transform: uppercase;
}
.submit {
background: #fff;
}
<!-- index.html -->
<input type="submit" class="button submit" />
<a href="next_page.html" class="button">Next</a>
Property Shorthands
Certain properties have build-in shorthand commands to help keep your code clean and concise.
e.g.
Not DRY:
.ski_poles {
margin-top: 15px;
margin-botton: 0;
margin-right: 10px;
margin-left: 20px;
}
Can be rewritten as (DRY):
.ski_poles {
margin: 15px 10px 0 20px; /* top right bottom left */
}
This shorthand can be used for margin and padding. The order is a clockwise from the top: top, right, bottom, left.
Common CSS Shorthand Properties
font: 16px/18px bold italic sans-serif;
/* size/line-height weight style family */
background: #000 url(image.jpg) no-repeat
/* color image repeat x-pos y-pos */
list-style: disc inside none;
/* style position image */
margin or padding: 0 10px 0 10px;
/* top right bottom left */
margin or padding: 0 10px 0;
/* top right&left bottom */
margin or padding: 0 10px;
/* top&bottom right&left */
border: 3px solid #ccc;
/* width style color */
Display Types
The display property in CSS affects how elements display together on a page.
Display options:
display: none / block / inline / inline-block
Block Elements
- block elements stretch the full width of their container
- block elements behave as though there is a line break before and after the element
- the full box model can be manipulated on block elements
 |
| block element is blue bar surrounded by light-blue |
Tags that are block-level by default:
<div>, <p>, <ul>, <ol>, <li>, and <h1> through <h6>
Inline Elements
- Inline elements are typically found within block level elements
- Inline elements only take up the space of the content inside (not the full width of the parent container)
- Inline elements do not generate a line break before and after the element
 |
| the inline element is the blue box with light blue on the sides |
Tags that are inline by default:
<span>, <a>, <em>, <img>, and <strong>
Inline-Block
- Inline-block is not a default display type, but one that can be applied via CSS.
- Inline-block elements have the same flow as an inline element, but the display properties of a block-level element
- Inline-block elements only stretch to the width of their content, but behave like block level elements in that you can manipulate the full box model on them.
 |
| the inline-block element stays inline but has block level properties |
Horizontal Centering
Depending on the display type of the element, there are different ways of centering it.
Centering a Block-level Element
The best way to center a block-level element is to declare the width on the element, then do margin: auto. The width must be less than the parent container. This will horizontally center the block-level element regardless of its width and regardless of the size of the monitor.
Centering Inline and Inline-Block Elements
To center either an inline element or an inline-block element, apply text-align: center. This will horizontally center it inside its block-level parent.
No comments:
Post a Comment