CSS Introduction
CSS IntroductionIntroduction
htmlTagName, #idname, .classname {
stylename: stylevalue;
color: black;
font-size: 12px;
background-color: #ddd;
}
CSS stands for Cascading Style Sheet. In HTML, you use it to apply a certain look to specific elements in the page. CSS makes it easy to give every page on your website a unified appearance. The format is extremely straightforward, but to be effective you need to know how to specify which element you want styled, find current styling information in a webpage, and you must be aware of all of the styles that can be applied to an element. The general form of a style in a CSS file is like the example shown to the right.
Specifiers
Specifiers tell the browser which elements to apply the style to.
- tags like <body>, <p>, <div>, and <span> are specified with just the text
- an ID in html is declared in the element like <div id="rightSidebar">, and specified in CSS like #rightSidebar
- a class in html is declared in the element like <div class="gallery">, and specified in CSS like .gallery
Specifiers may be chained in special ways to select more elements or narrow in on an element
- Multiple specifiers can use the same style by seperating the specifiers with comments
- #sidebar, .gallery {...} applies the style within the brackets to both the sidebar ID and gallery class.
- You can drill down to an class by seperating specifiers with a space
- #sidebar h3 {...} applies the style within the brackets to only h3 elements within the sidebar element
Styling
Color
There are several ways to pick a color. The numerical methods all are in the order of "red, green, blue", with low numbers being darker and higher numbers being lighter.
| Name | 3 digit hex | 6 digit hex | RGB | RGB+Alpha Transparency |
|---|---|---|---|---|
| black | #000 | #000000 | rgb(0,0,0) | rgba(0,0,0,1.0) |
| white | #FFF | #FFFFFF | rgb(255,255,255) | rgba(255,255,255,1.0) |
| red | #F00 | #FF0000 | rgb(255,0,0) | rgba(255,0,0,1.0) |
| green | #0F0 | #00FF00 | rgb(0,255,0) | rgba(255,0,0,1.0) |
| blue | #00F | #0000FF | rgb(0,0,255) | rgba(0,0,0,1.0) |
| grey | innaccurate | #808080 | rgb(129,129,129) | rgba(129,129,129,1.0) |
| transparent | N/P | N/P | N/P | rgba(0,0,0,0) |
| N/P | N/P | N/P | N/P | rgba(0,0,0,0.5) |
Styles List
Here are some sample styles applied to a div tag with the text "demo" inside of it.
| Style Name | Description | Sample Usage | Sample Result |
|---|---|---|---|
| color | The color of the font | color: #090; |
DEMO TEXT
|
| font-size | The size of the font, usually in px or em | font-size: 14px; |
DEMO TEXT
|
| font-style | Italicizes text | font-style: italics; |
DEMO TEXT
|
| font-weight | Controls the "boldness" of text | font-weight: bold; |
DEMO TEXT
|
| text-decoration | Underline, or overline, and strikethrough to text | text-decoration: underline; |
DEMO TEXT
|
| text-align | The horizontal positioning of text | text-align: center; |
DEMO TEXT
|
| vertical-align | The vertical positioning of text | vertical-align: middle; |
DEMO TEXT
|
| font-family | Name of font. Use web-safe fonts! | font-family: Serif; |
DEMO TEXT
|
| line-height | Spaces text lines. 2em is 'double spaced' | line-height: 2em; |
DEMO TEXT
|
| height width |
Controls the height/width of block elements | width: 40px; |
DEMO TEXT
|
| background-color | The background color of the box | background-color: #fff; |
DEMO TEXT
|
| background | Takes all background related styles Can do color, image, image position, repeats |
background: #fff url() no-repeat right 50%; |
DEMO TEXT
|
| border | A line around the box | border: 1px solid #090; |
DEMO TEXT
|
| border-radius | Rounds the edges of the box | border-radius: 8px; |
DEMO TEXT
|
| margin | Adds spacing to the outside of the box | margin: 5px; |
DEMO TEXT
|
| padding | Adds spacing to the inside of the box | padding: 5px; |
DEMO TEXT
|
| float | Pushes to side and surroundings wrap around it | float: right; |
DEMO TEXT
|
| display | inline: on same line as text like a span or img block: use width and obey margins like div inline-block: inline but can width and margin none: not shown at all |
display:inline; |
DEMO TEXT
|
| position | static: the normal way of position absolute: put at coordinates on screen relative: like absolute, but zero'd at static fixed: like absolute, but moves with scrolls note: nonstatic needs top, left, right, or bottom |
position: relative; left: 10px; |
DEMO TEXT
|
| z-index | Larger values are higher when overlapping | z-index: 10; | |
| text-shadow | adds a drop shadow to text. multiples by comma text-shadow: right down size color |
text-shadow: -1px 0 0 #fff; |
DEMO TEXT
|
| box-shadow | Adds drop shadow to the box. Similar parameters to text-shadow Shadows can be inset (inside the box). |
box-shadow: inset 0 0 2px #fff, 0 0 4px #000; |
DEMO TEXT
|
Other Style Information
As a general rule, you can use a shorthand to differentiate the different directions of a style either in the order or top, right, bottom, left or in the order top+bottom and left+right. It follows a clockwise rule, and saves a lot of typing particularly on the margin and padding styles. For example:
| Seperated | 4 direction shorthand | 2 direction Shorthand |
|---|---|---|
padding-top: 8px; |
padding: 8px 5px 8px 5px; |
padding: 8px 5px; |
Gradients can be made with this very simple generator.
The safe choices for fonts are really limited. With modern browsers, you can attach font files to pages. This process is made extremely easy with the Google Web Font API.
Development
As a general rule, you will want to have a local instance of the website you are developing for. If not, you can always test the css in-browser in chrome easily through menu > tools > developer tools. The magnifying glass in the bottom left will let you select an element visually on the screen. Then, the information on what styles are active and overridden is in the right column, and the tag's place in html is shown in the left. You can actually double click on just about anything in there and modify the contents of the page or the style information.