CSS Comments: If The Image Is
CSS Comments: If The Image Is
Comments are used to explain your code, and may help you when you edit the source code at a later
date. Comments are ignored by browsers.
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
Background Image
The background-image property specifies an image to use as the background of
an element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally
and vertically.
Some images should be repeated only horizontally or vertically, or they will look
strange, like this:
-If the image is: repeated only horizontally (repeat-x), the background will look
better:
Background Image - Set position and no-repeat
Showing the image only once is specified by the background-repeat property:
Background - Shorthand property
As you can see from the examples above, there are many properties to consider
when dealing with backgrounds.
To shorten the code, it is also possible to specify all the properties in one single
property. This is called a shorthand property.
The shorthand property for background is simply "background":
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this
order.
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width
, and the left and right margins are straight (like in magazines and newspapers).
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word.
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not
support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the
generic family, if no other fonts are available.
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Set Font Size With Pixels
Setting the text size with pixels gives you full control over the text size:
Set Font Size With Em
To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
The em size unit is recommended by the W3C.
Use a Combination of Percent and Em
The solution that works in all browsers, is to set a default font-size in percent for
the <body> element:
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Common Link Styles
In the example above the link changes color depending on what state it is in.
Lets go through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Background Color
The background-color property specifies the background color for links:
List
In HTML, there are two types of lists:
Unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type property:
An Image as The List Item Marker
To specify an image as the list item marker, use the list-style-image property:
Cross browser Solution
The following example displays the image-marker equally in all browsers:
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one declaration:
When using the shorthand property, the order of the property values are:
Table Borders
To specify table borders in CSS, use the border property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single border or
separated:
Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th elements to 50px:
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Table Padding
To control the space between the border and content in a table, use the padding property on td and th
elements:
Table Color
The example below specifies the color of the borders, and the text and background color of th
elements:
Property
Description
background
background-attachment
background-color
background-image
background-position
background-repeat
Property
Description
list-style
list-style-image
list-style-position
list-style-type
Property
Description
font
font-family
font-size
font-style
font-variant
font-weight
Property
Description
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
unicode-bidi
vertical-align
white-space
word-spacing
Generic family
Font family
Description
Serif
Sans-serif
Arial
Verdana
"Sans" means
without - these
fonts do not have
the lines at the
ends of
characters
Courier New
Lucida Console
All monospace
characters have
the same width
Monospace