CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS is a stylesheet language that describes the presentation of an HTML document. CSS describes how elements must be rendered on screen, on paper, or in other media.
External stylesheets are stored in CSS files.
CSS adds style (colors, images, borders, margins…) to your site. First thing you do is link a CSS-file to your HTML document. <<link rel="stylesheet" type="text/css" href="theme.css"> css The syntax for CSS is different than that of HTML markup. It consists of only 3 parts.
selector { property: value }
body {background: red;}
This is a comment
CSS terms include selectors, properties, and values.
css --------------------------------------------------------------------------------------------- 1
Embedded CSS
- The <style> Element You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside <head> ...</head> 2
Inline CSS
- The style Attribute You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. 3
External CSS
- The <link> element can be used to include an external stylesheet file in your HTML document. --------------------------------------------------------------------------------------------- Look at this code: p { background:
font-size: 24px; } p { background:
} It will set background to green while green is set after orange... Same with this code: p { background:
} All styles will cascade from the top of our style sheet to the bottom of our style sheet.
White Space
You can control the whitespace in an (X)HTML element with the following: white-space: value; normal pre nowrap
You can control the style of cursor to be used in an element with the cursor property cursor: value; Values: auto crosshair default help move pointer text url wait e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize If you choose to use a custom cursor, it is always a good idea to declare a generic one after the custom value. cursor: url("image.cur"), default;
You can control how an element is displayed with the display property display: value; Values: block inline list-item none Now, what does all that mean?
Creates a line break before and after the element
No line break is created Inline styling is used to apply a unique style to a single HTML element: <h1 style="color:blue;">This is blue</h2>

This is blue

List Item
Creates a line break before and after the element and adds a list item marker
Makes an element not display on the page
The float property changes how text and or images within an element are displayed float: value; Values: left right none Left The image/text is displayed to the left of the parent element Right The image/text is displayed to the right of the parent element None There is no change in the way the image/text is displayed
You can control what an elements contents will do if it overflows it boundaries with the overflow property overflow: value; Values: auto hidden visible scroll --------------------------------------------------------------------------------------------- There are many property-specific units for values used in CSS, but there are some general units that are used by a number of properties:
(such as font-size: 12px) is the unit for pixels.
(such as font-size: 2em) is the unit for the calculated size of a font So 2em, for example, is two times the current font size.
(such as font-size: 12pt) is the unit for points, for measurements typically in printed media.
(such as width: 80%) is the unit for percentages. Other units include pc (picas), cm (centimeters), mm (millimeters) and in (inches). ---------------------------------------------------------------------------------------------
When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently. For example, a font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element. body {font-family: Verdana, serif;} Now all text within the HTML file will be set to Verdana. If you wanted to style certain text with another font, like an h1 or a paragraph then you could do the following. h1 {font-family: Georgia, sans-serif;} p {font-family: Tahoma, serif;} Now all <h1> tags within the file will be set to Georgia and all <p> tags are set to Tahoma, leaving text within other elements unchanged from the body declaration of Verdana.
text-decoration: underline text-decoration: overline text-decoration: line-through
text-transform: capitalize turns the first letter of every word into uppercase. text-transform: uppercase turns everything into uppercase. text-transform: lowercase Margins, padding and borders are all part of whats known as the
box model.
To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset. ---------------------------------------------------------------------------------------------
There are three ways of inserting a style sheet:
External style sheet Internal style sheet Inline style Mostly external is preferable.
In-line styles
are put into the HTML tags using the style attribute. <p style="color: red">red text paragraph/p>

red text paragraph

Embedded, or internal,
styles are used for the whole page.
Inside the head element, the style tags surround all of the styles for the page. <!DOCTYPE html> <html> <head> <title>CSS Example<title> <style> p { color: red; } a { color: blue; } </style> ... This will make all of the paragraphs in the page red and all of the links blue.
External styles
External styles are used for the whole, multiple-page website. There is a separate CSS file. If this file is saved as style.css in the same directory as your HTML page then it can be linked to in the HTML like this: <!DOCTYPE html> <html> <head> <title>CSS Example</title> <link rel="stylesheet" href="style.css"> ...
CSS Rules Overriding
Inline style sheet takes highest priority. Rules defined in <style>...</style> tags will override rules defined in any external style sheet file. Rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are done. --------------------------------------------------------------------------------------------- Links can be styled differently depending on what state they are in. The four links states are: a:
- a normal, unvisited link a:
- a link the user has visited a:
- a link when the user mouses over it a:
- a link the moment it is clicked a:link {color: blue; text-decoration: underline;} a:visited {color:blue; text-decoration: underline;} a:hover {color: #ea0000; text-decoration: none;} a:active {color: blue; text-decoration: underline;} Test link for hover
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Note: a:active MUST come after a:hover in the CSS definition in order to be effective.

HTML Elements as Selectors: Selector Description head Selects the head element body Selects the body element title Selects the title element p Selects all para elements form Selects all form elements div Selects all div elements img Selects all image elements a Selects all anchor elements ol Selects all ordered list elements ul Selects all unnumbered list elements * Selects all elements on the page
If we apply a design to a parent element, then CSS automatically applies that design to all the child elements. This is inheritance. inheritance
CSS colors
<h2 style="background-color:red">Red background-color</h2> <h2 style="background-color:green">Green background-color</h2></h2> <h2 style="background-color:orange">Orange background-color</h2> <h2 style="background-color:blue;color:white">Blue background-color and white text color <h2 style="background-color:yellow">Yellow background-color</h2> <h2 style="background-color:cyan">Cyan background-color</h2> <h2 style="background-color:black;color:white">Black background-color and white text color</h2> ---

Red background-color

Green background-color

Blue background-color and white text color

Orange background-color

Yellow background-color

Cyan background-color

Black background-color and white text color

Style element - style attribute
You can put your CSS rules into an HTML document using the <style> element. Inline CSS - The style
You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only. Here is the generic syntax − <element style = "...style rules....">
Text in here...
more text
<span style="color:red;line-height:250%;font-size:14px;">Text in here...
more text</span>