CSS properties are responsible for the styling of websites. These properties are a useful way for companies or individuals to add a unique look or brand to their websites. While CSS properties can be very powerful, they can also be very frustrating to use. This frustration tends to come from the incompatibilities or complexities within certain browsers. As such, there are some properties one can use that most browsers support.
Layout CSS Properties
- position – Specifies the type of positioning methods useful for placing an element on the screen. There are four different position values:
- Absolute – The position relative to the nearest ancestor.
- If no positioned ancestors, it uses the document body and moves along with page scrolling.
- Fixed – Positioned relative to the viewport and not affected by scrolling
- A fixed element does not leave a gap in the page where it would otherwise have been located.
- Relative – Positioned relative to its normal position
- Setting values for any of the top, bottom, left, or right properties will cause the position to be adjusted.
- Other content will not be adjusted to fit into any gap left by the element.
- Static (default) -the position is within the normal flow of the page.
- No precise positioning.
- Static ignores any values set for top, bottom, left, or right properties.
- Overlapping (z-index)
- The z-index allows you to layer elements on top of one another.
- The higher the number, the higher on the stack (or more visible).
- Overlapping is extremely useful for layering text over an image.
- Absolute – The position relative to the nearest ancestor.
Margin is used to provide space between the edges of the control and inner text
- margin and margin-(top, right, bottom, left) – properties set the size of the white space outside the border.
- These properties can have the following values:
- auto – the browser handles the margin.
- inherent – pulls the margin values from the parent element.
- If you only put in one property value like margin: 50px. Then all four margins will be set to 50px.
- These properties can have the following values:
Inheritance – Properties not defined at one level are inherited from the next up all the way to the root object
Measurements can be a percentage, pixels, centimeters, millimeters, or inches (or any other valid CSS measurement unit).
Font CSS Properties
Fonts are responsible for the text font styles can be customized by the following:
- font-family – The particular font style.
- Generic families are a group of font families with similar visual properties (Serif or monospace).
- Font-family provides the font type for the text (Times New Roman or Ariel)
- Note: more than one font family can be applied separated by a comma.
- font-style – allows the user to change the style to normal, italic, or oblique.
- font-size – sets the size of the text.
- Can be absolute or relative.
- Absolute
- Sets the text to a set size.
- Not compatible with all browsers.
- Can be useful when the physical size of the output is known.
- Relative
- The size is relative to other elements.
- Can change the text size in all browsers.
- Measurement units are Pixels, Em, Percent.
- Pixels allow more control over the actual text size and are compatible with browsers zoom feature.
- 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px (pixels/16=em).
- Be warned that some of the older versions of IE do not resize Em elements correctly.
- font-weight – weight represents the emphasis of the text. Values include normal and bold.
- font-variant – specifies whether or not the text will be displaying in a small-caps font.
Colors CSS Properties
Typically colors in CSS can be broken down into the following:
- Color Names
- There are reserved words for color (red, black, blue, white, etc.).
- Names are case-insensitive: so “Black” is the same as “BLACK” or “black”.
- Currently, there are 140 supported standard color names in HTML and CSS.
- Use Hex values like #RRGGBB where R represents Red, G for Green and B for Blue.
- These values range between 00 and FF.
- Values are case-insensitive: so “ff” is the same as “FF”.
- You can shorten the Hex value if the RR/GG/BB, each has the same value. For example: “#FF00AA” can be abbreviated to “#F0A. If they are not the same, then you would not be able to abbreviate “#FF01AA:=”, because the GG value is not identical.
- RGB (Red, Green, Blue) values like “rgb(0,0,0)” for black.
Other CSS color trends to consider:
- Changes such as changing the link color after a user click it (<a>).
- Inner controls (<td> in a <table>) may fall under a different style.
Background CSS Properties
There is a group of background properties responsible for configuring an element’s background. These properties include everything from the color of the background to the type of image to display. Here is a list of available background properties:
- background-color – is responsible for setting the background color of an element.
- background-image – is in charge of setting the background image of an element.
- By default, the image repeats, so it covers the entire element.
- Be careful when applying a background image, some images will make an element’s text un-legible.
- background-repeat – repeats the image horizontally and vertically.
- Use repeat-x to repeat the background horizontally.
- If you want to repeat vertically set the value to repeat-y.
- Otherwise, to prevent the image from repeating use the value no-repeat.
- background-position – establishes the starting (X, Y) position of the image when the page loads.
- Possible Keyword values:
- Use keywords: left, right, and center for (X).
- Otherwise, use the keywords: top, center, and bottom for (Y).
- Single keyword: if you only specify one keyword then the (Y) will default to center.
- Percentages (X%, Y%).
- Pixels (X px, Y px) or any other valid CSS measurement unit.
- Left top corner is (0px, 0px).
- You can mix units with percentages. (0px, 100%).
- Possible Keyword values:
- background-attachment – determines if a background image stays fix or scrolls with the page.
- scroll (default) – the image will scroll with the page.
- fixed – does not scroll. Sticks to the viewport. The page will scroll over the image.
- local – the image only scrolls along its elements contents or container.
- Background traits tend to mirror foregrounds such as colors and embedded images.
- Background characteristics fill the control unless otherwise defined.
Further Reading
Outside of additional classes here, we have found these sources to be ideal for learning more about web development:
Check out this link for some additional CSS property information.
The CSS: The Definitive Guide
If you need something to carry with you, the CSS Pocket Reference
[sgmb id=”1″]