This is our basic CSS skeleton without any properties or anything added.
background
Tells the page what the background color is and makes a solid background color. We can replace #COLOR with a color like red or with a hex code like #FF0000.
The background doesn't have to be a solid color though, it can be an image. If you want the background to be an image, the code
would be used. With an image background, there are several different properties you can define such as where the background is positioned, whether it repeats, if it moves with the page or if it is fixed in place.
This code would make you have a background with a solid color, with an image in the top left corner that stays in the corner even if you scroll down (it doesn't dissapear if you scroll down farther than the image height).
font
tells the page what the normal text on page looks like. Default is black arial 8pt font, but notice on my page the font is gray. You can change many different things such as make everything upper or lower case, change the color of all text on the page, the size, make all text have a background, or a border on the bottom.
This is what I have on my page for my gray font. Font-family tells what the font type is. Examples you could use instead of arial would be script, courier, tahoma, etc. Font-size is pretty easy to figure out, color can be a word color like "black", "pink", "limegreen", etc, or it can be a hex color like #696969. Line-height tells how much space is between each line. If the line-height is smaller than the text, the text will overlap slightly, or if the line height is larger than the text, there will be space between each line of text. Text-transform can make the normal text all uppercase or all lowercase. I decided to leave it at none. Font-weight tells whether the font is bold or normal. Letter-spacing tells how much space is between each letter. 1 is normal.
bold, underline, italics
The same properties for normal text on the page can be used for bold, underline, and italics. When we edit this in CSS, whenever we use the HTML tag or say bold, bold will appear how the CSS defines it, not the default black bold font.this is the bold underline and italics code on my page. B is for bold, i is for italics, and u is for underline. Cursor was covered before. Curso tells what the cursor will look like when you scroll over that type of text. There are many different types of cursors such as hand, help crosshair, not-allowed, etc. Borders on text can be border-top, border-bottom, border-left, or border-right. the #px tells how thick the line is, the #color tells what color the line is, and the last property tells whether the border is solid, dotted, dashed, etc.
links & combining properties
is our links section in our skeleton CSS. I normally make my visited, active, and normal links all the same. It can be kind of annoying to have all of these seperate since if you edit one, you have to edit all three is you want them all to be the same. In CSS, if you put a comma between each thing you want to define before the bracket, you can edit all of them at the same time. Your skeleton CSS would then become:
links can be edited with the same properties as normal text, bold, itatlics, etc.
This is the CSS for my links on my page. All of my links appear as normal black text, except when you hover over them there is a white background. link
headers
There are different ways to make headers. The two ways that are most commonly used arein the css. h1 can be changed to h2, h3, h4, etc. if you want several different types of headers. If you use h1 in the css, in your html when you make a header you have to use the code:
Another way to make a header is to use the class header.
If you use .header in the css, in your html when you make a header you have to use the code:
An example of header CSS would be:
this would look like:
header
positioning
This is used to position things. "content" can be any word as long as there is a # in front of it. For example if you wanted to position a navigation bar, your blog, and your header on the page, the skeleton CSS would look something like:
Your HTML would look something like:
"name" is #NAME without the #.
Bellow is an example:
