The general format looks like this:
selector {
property: value;
}
A selector can be any HTML element, such as <p>, <img>, or <table>.
A property is an aspect of a selector. For instance, you can change the font-family, color, and font-size of the text on your web pages (in addition to many more).
A value is a possible setting for a property. color can be red, blue, black, or almost any color; font-family can be a whole bunch of different fonts; and so on.
HTML comments look like this:
<!--I'm a comment!-->
CSS comments, on the other hand, look like this:
/*I'm a comment!*/
The font-size unit em is a relativemeasure: one em is equal to the default font size on whatever screen the user is using. That makes it great for smartphone screens, since it doesn't try to tell the smartphone exactly how big to make a font: it just says, "Hey, 1em is the font size that you normally use, so 2em is twice as big and 0.5em is half that size!"
You can tell CSS to try several fonts, going from one to the next if the one you want isn't available.
For example, if you write:
p {
font-family: Tahoma, Verdana, sans-serif;
}
CSS will first try to apply Tahoma to your paragraphs. If the user's computer doesn't have that font, it will try Verdana next, and if that doesn't work, it will show a default sans-serif font.
Making a colored block using <div>:
div{
background-color:#cc0000;
width:100px;
height:100px;
}
Many HTML elements support theborder property. This can be especially useful with tables.
selector {
border: 2px solid red;
}
Links have a lot of the same properties as regular text: you can change their font, color, size, and so on. But links also have a property, text-decoration, that you can change to give your links a little more custom flair.
Nested Selectors
If you have a paragraph inside a div that's inside another div, you can get to it like this:
div div p {
/*Some CSS*/
}
This will style all paragraphs nested inside two divs and will leave all paragraphs that don't meet these criteria alone.
Remember, you can reach an element that is a child of another element like this:
div div p { /* Some CSS */ }
where in this case, we'd be grabbing any<p> that is nested somewhere inside a<div> that is nested somewhere inside another <div>. If you want to grab direct children—that is, an element that is directlynested inside another element, with no elements in between—you can use the >symbol, like so:
div > p { /* Some CSS */ }
This only grabs <p>s that are nesteddirectly inside of <div>s; it won't grab any paragraphs that are, say, nested inside lists that are in turn nested inside <div>s.
Class selectors
Classes are assigned to HTML elements with the word class and an equals sign, like so:
<div class="square"></div>
<img class="square"/>
<td class="square"></td>
Classes are identified in CSS with a dot (.), like so:
.square {
height: 100px;
width: 100px;
}
ID selectors
IDs are assigned to HTML elements with the word id and an equals sign:
<div id="first"></div>
<div id="second"></div>
<p id="intro"></p>
IDs are identified in CSS with a pound sign (#):
#first {
height: 50px;
}
#second {
height: 100px;
}
#intro {
color: #FF0000;
}
This allows you to apply style to a single instance of a selector, rather than allinstances.
Pseudo selectors
The CSS syntax for pseudo selectors is
selector:pseudo-class_selector {
property: value;
}
It's just that little extra colon (:).
There are a number of useful pseudo-class selectors for links, including:
a:link: An unvisited link.
a:visited: A visited link.
a:hover: A link you're hovering your mouse over.
You can actually select any child of an element after the first child with the pseudo-class selector nth-child; you just add the child's number in parentheses after the pseudo-class selector. For example,
p:nth-child(2) {
color: red;
}
Would turn every paragraph that is the second child of its parent element red.
There's also a very special selector you can use to apply CSS styling to every element on the page: the * selector. For example, if you type
* {
border: 2px solid black;
}
Certain selectors will "override" others if they have a greater specificity value. ul li p { is more specific CSS than just p {, so when CSS sees tags that are both <p> tags andhappen to be inside unordered lists, it will apply the more specific styling (ul li p {) to the text inside the lists.
CSS Positioning
You'll see abbreviations like TM, TB, and TP in the diagram. These stand for "top margin," "top border," and "top padding." As we'll see, we can adjust the top, right, left, and bottom padding, border, and margin individually.
The display property. We'll learn about four possible values:
- block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
- inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
- inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line). The
inline display value is better suited for HTML elements that are blocks by default, such as headers and paragraphs.
- none: This makes the element and its content disappear from the page entirely!
Margins
If you want to specify a particular margin, you can do it like this:
margin-top: /*some value*/
margin-right: /*some value*/
margin-bottom: /*some value*/
margin-left: /*some-value*/
You can also set an element's margins all at once: you just start from the top margin and go around clockwise (going from top to right to bottom to left). For instance,
margin: 1px 2px 3px 4px;
will set a top margin of 1 pixel, a right margin of 2, a bottom of 3, and a left of 4.
