Childhood With Happy Moments........: CSS Manuals

What is CSS?

· CSS stands for Cascading Style Sheets. A style defines how an HTML element is displayed.

Why use CSS?

· Making website changes quickly.

· Saving lots of works and loading website fast.

· Build more diverse websites.

Types of CSS

The Style Declaration is at the heart of CSS. There are 3 types of Styles we are using

1. Internal (Embedded) Styles

2. Inline Styles

3. External Styles

1. Internal / Embedded Styles

· These Styles can be re-used only for the web page in which they are embedded.

· Therefore, you would need to create these styles over and over again for each web page you wish to style.

· When using the style builder, Define the style in the Current Page. This will create an Internal Style. But, Internal Styles are not ideal.

· The <style> tag is used to write an Internal Style. Here's an Example:

<head>

.test{

color: #222;

font-weight:bold;

}

</style>

</head>

2. Inline Styles

Inline Styles cannot be resused at all, period. Inline styles are placed directly inside an HTML element in the code. We cannot use the Style Builder to make an Inline Style. Instead, to purposely create an inline style requires you to go into the HTML code and type the style yourself.

· Inline Styles do not have a Selector. Why not? The reason is because an inline style is embedded directly inside the html element it styles. Therefore, there's no need for a selector.

· Example of an Inline Style:

3. External Style Sheet

· The External Style Sheet is basically a Text File that is Saved As a .css file. It is simply a separate page from our html pages.

· This will allow us to reuse the styles as many times as we would like simply by linking the External Style Sheet to other web pages.

· We must Link the External Style Sheet to the Web Page(s) in order for the External Styles to be applied as specified.

· <link href="main.css" rel="stylesheet" type="text/css" >

CSS Syntax

· A CSS rule has two main parts: a selector, and one or more declarations:

· The selector is normally the HTML element you want to style.

· Each declaration consists of a property and a value.

· The property is the style attribute you want to change. Each property has a value.

· A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

CSS Comments

· 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 begins with "/*", and ends with "*/", like this

CSS Selectors

· The core selectors are

1. ID

2. Class

3. Tag or Element

4. Descendant

5. Universal

1. ID Selectors

· An ID Selector is indicated by using the pound # sign.

· Use an ID Selector for page elements that occur one time on a web page. In other words, ID Selectors must be unique.

· A perfect example is the Layout. Use an ID Selector for each div of the CSS Layout.

· Example : #idname(example : <p id=”idname”>Text</p>)

2. Class Selectors

· For instance, .bold_text is a class selector that defined.

· Class Selectors must begin with a period followed by a letter. Cannot use a number immediately after the period.

· A Class Selector can be used as many times as needed on a single web page.

· You are required to use the period at the beginning, but you can use any words you would like to name the selector

· Example: .classname

· We can call the class using class within HTML tag(example : <p class=”classname”>Text</p>)

3. Tag Selectors

· A Tag Selector is simply the HTML tag weare styling, but without the class name and ID name.

4. Descendant Selectors

· A Class Selector is indicated by a period .

· Descendant Selectors are created to style any nested elements. For instance, if we style a paragraph that is inside the #maincontent div, we will use a descendant selector.

#maincontent p { font-size: 13px;}

· The space between #maincontent and the letter p is intentional. It means we are styling all paragraphs located inside the maincontent div.

5. Universal Selectors

Pseudo Class Selectors are used to style the four states of a hyperlink.

a
a:link
a:visited
a:hover
a:active

CSS Properties

1.Background Properties

· CSS background properties are used to define the background effects of an element.

· CSS properties used for background effects:

1. background-color

2. background-image

3. background-repeat

4. background-attachment

5. background-position

* The background-color property specifies the background color of an element. You can set the background color to a certain color or set the background color as transparent.( body { background-color: #98AB6F } or pre { background-color: transparent;})

* Background-image is to set an image as as the background of an element. By default, the image is repeated so it covers the entire element. The Syntax goes like this: (background-image : none or url ( url ) )

* By default,the background-image property repeats an image both horizontally and vertically, however you can set the background-image repeats only horizontally (repeat-x) or only vertically (repeat-y). The Background-repeat Syntax goes in this way: (background-repeat : repeat | no-repeat | repeat-x | repeat-y)

* Background attachment is to used to set background scroll naturally, or to have it in a fixed position.

Example:

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

Background-position is used to define the exactly position an image appears within an element.

Example:

body
{

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

2.Font Properties

· CSS font properties define the way text is displayed, the font family, boldness, size, and the style of a text.

1. font

2. font-family

3. font-size

4. font-style

5. font-variant

6. font-weight

* font: Sets all the font properties in one declaration.

* The font-family property is to define the font family of a text.

* The font-size property is to set the size of your fonts. There are three ways to set it, by using values, percentages, or key terms.

p { font-style: normal; }
p { font-size: 12px; }
p { font-size: 20%; }
h1 {font-size:2.5em;}

* font-style property is mostly used to specify italic text.This property has three values:

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

* font-variant property is to specify and convert font to all small caps.

span { font-variant: small-caps; }

* The font-weight property sets how thick or thin characters in text should be displayed.

p.normal {font-weight:normal}
p.thick {font-weight:bold}
p.thicker {font-weight:900}

3.Text Properties

· CSS Font covers most of the traditional ways to format your text, CSS Text enables you to control the spacing, decoration, and alignment of your text.

1. color

2. text-decoration

3. text-transform

4. text-align

5. letter-spacing

6. word-spacing

7. direction

* The color property is used to set the color of the text, The color can be specified by :name,RGB,Hexa

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

* The text-decoration property is used to set or remove decorations from text.

* The text-transform property is used to specify uppercase and lowercase letters in a text, or capitalize the first letter of each word.

text-transform : none | capitalize | uppercase | lowercase

* 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.

text-align : left | right | center | justify

* The letter-spacing property is used to set the distant between letter in a text.

letter-spacing : normal | length

normal is the default setting
.div {letter-spacing:6px; }
div {letter-spacing:0.5pt; }

* The word-spacing property is used to set the distant between word.

letter-spacing : normal | length

* The direction property specifies the text direction/writing direction.

4.List Properties

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.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

list-style-image: url('sqpurple.gif');

5.Link Properties

· CSS Links can be a style with any CSS property (e.g. color, font-family, background-color). Special for links are that they 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.

· a:link {color:#FF0000;} /* unvisited link */

· a:visited {color:#00FF00;} /* visited link */

· a:hover {color:#FF00FF;} /* mouse over link */

· a:active {color:#0000FF;} /* selected link */

The CSS border properties allow you to specify the style and color of an element's border.
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.
The CSS padding properties define the space between the element border and the element content.
The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.
Float is very often used for images, but it is also useful when working with layouts.

I will add more shortly......

Childhood With Happy Moments........

My Photos

Wednesday 28 December 2011

CSS Manuals

1. Internal / Embedded Styles

2. Inline Styles

3. External Style Sheet

No comments:

Post a Comment

Pages