Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Sunday, 15 March 2015

Css Floating

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:
Posted by at No comments:
Labels:

Css Positioning

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position:

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
Posted by at No comments:
Labels:

Css Dimension

The CSS dimension properties allow you to control the height and width of an element.

All CSS Dimension Properties

Property Description Values
height Sets the height of an element auto
length
%
inherit
max-height Sets the maximum height of an element none
length
%
inherit
max-width Sets the maximum width of an element none
length
%
inherit
min-height Sets the minimum height of an element length
%
inherit
min-width Sets the minimum width of an element length
%
inherit
width Sets the width of an element auto
length
%
inherit
Posted by at No comments:
Labels:

Css Padding

The CSS padding properties define the space between the element border and the element content.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value Description
length Defines a fixed padding (in pixels, pt, em, etc.)
% Defines a padding in % of the containing element

The padding property can have from one to four values.
  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px

  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px

  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px

  • padding: 25px;
    • all four paddings are 25px
Posted by at No comments:
Labels:

Css Margin

The CSS margin properties define the space around elements.

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element

The margin property can have from one to four values.
  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

  • margin: 25px;
    • all four margins are 25px
Posted by at No comments:
Labels:

Css Lists

List

In HTML, there are two types of lists:
  • unordered lists (<ul>) - the list items are marked with bullets
  • ordered lists (<ol>) - 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:

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:
  • list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
  • list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
  • list-style-image (specifies an image as the list item marker)
If one of the property values above are missing, the default value for the missing property will be inserted, if any.

Posted by at No comments:
Labels:

Css Links

Links can be styled in different ways.

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
When setting the style for several link states, there are some order rules:
  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

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:



Posted by at No comments:
Labels:

Css Fonts

CSS font properties define the font family, boldness, size, and the style of a text.

CSS Font Families

In CSS, there are two types of font family names:
  • generic family - a group of font families with a similar look (like "Serif" or "Monospace")
  • font family - a specific font family (like "Times New Roman" or "Arial")

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.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:

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



Posted by at No comments:
Labels:

Css Text

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

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.



Posted by at No comments:
Labels:

CSS Backgrounds

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 Color

The background-color property specifies the background color of an element.

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.


Posted by at No comments:
Labels:

CSS

When a browser reads a style sheet, it will format the document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file.
Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "myStyle.css", is shown below:

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this:

Inline Styles

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element:



Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)