Css from scratch

CSS Tutorial
By : Ahmad Al-ammar

What is CSS?
 CSS stands for Cascading Style Sheets
 CSS defines how HTML elements are to be displayed

CSS Syntax
 A CSS rule set consists of a selector and a declaration block:

CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based on their id,
class, type, attribute, and more.

The element Selector
 The element selector selects elements based on the element name.
 You can select all <p> elements on a page like this: (all <p> elements will
be center-aligned, with a red text color).

The id Selector
 To select an element with a specific id, write a hash character, followed by
the id of the element.
 The style rule below will be applied to the HTML element with id="para1“.

The class Selector
 To select elements with a specific class, write a period character, followed
by the name of the class:
 In the example below, all HTML elements with class="center" will be center-
aligned:

The class Selector
 You can also specify that only specific HTML elements should be affected
by a class.
 In the example below, all <p> elements with class="center" will be center-
aligned:

Three Ways to Insert CSS
 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.
 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 .

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 .
 The style attribute can contain any CSS property.

CSS Background
 All CSS Background Properties :

Background Color
 a color is most often specified by:
1. a HEX value - like "#ff0000"
2. an RGB value - like "rgb(255,0,0)"
3. a color name - like "red"

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.
 If the image is repeated only horizontally (repeat-x), the background will
look better:

Background - Shorthand property
 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":

Text Color
 The color property is used to set the color of the text.

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.

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.

CSS Font
 All CSS Font Properties :

Font Family
 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.

Font Style
 This property has three values:
1. normal - The text is shown normally
2. italic - The text is shown in italics
3. 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.

CSS Links
 inks can be styled differently depending on what state they are in.
1. The four links states are:
2. a:link - a normal, unvisited link
3. a:visited - a link the user has visited
4. a:hover - a link when the user mouses over it
5. a:active - a link the moment it is clicked

CSS Links
 The background-color property specifies the background color for links:

CSS Lists
 The CSS list properties allow you to:
1. Set different list item markers for ordered lists
2. Set different list item markers for unordered lists
3. Set an image as the list item marker
 All CSS List Properties :

CSS Lists
 An Image as The List Item Marker :
 List - Shorthand property :

CSS Tables
 Table Borders :
1. To specify table borders in CSS, use the border property.

CSS Tables
 Collapse Borders :
1. The border-collapse property sets whether the table borders are collapsed into
a single border or separated .

CSS Tables
 Horizontal Text Alignment :
1. The text-align property sets the horizontal alignment, like left, right, or center.
2. By default, the text in <th> elements are center-aligned and the text in <td>
elements are left-aligned.
3. The following example left-aligns the text in <th> elements:

CSS Tables
 Vertical Text Alignment :
1. The vertical-align property sets the vertical alignment, like top, bottom, or
middle.
2. By default, the vertical alignment of text in a table is middle (for both <th> and
<td> elements).
3. The following example sets the vertical text alignment to bottom for <td>
elements:

CSS Tables
 Table Padding :
1. To control the space between the border and content in a table, use the
padding property on <td> and <th> elements:

CSS Box Model
 The box model allows us to add a border around elements, and to define
space between elements.
 The image below illustrates the box model:

CSS Border
 The CSS border properties allow you to specify the style, size, and color of
an element's border.

CSS Outlines
 An outline is a line that is drawn around elements (outside the borders) to
make the element "stand out".
 The outline properties specify the style, color, and width of an outline.

CSS Margin
 The margin clears an area around an element (outside the border). The
margin does not have a background color, and is completely transparent.

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

CSS Positioning
 Fixed Positioning :
1. An element with a fixed position is positioned relative to the browser window,
and will not move even if the window is scrolled:

CSS Positioning
 Relative Positioning :
1. A relative positioned element is positioned relative to its normal position:

CSS Positioning
 Absolute Positioning :
1. 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>:

CSS Float
 All CSS Float Properties :

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

CSS Float
 Turning off Float - Using Clear :
1. Elements after the floating element will flow around it. To avoid this, use the clear
property.

CSS Combinators
 A CSS selector can contain more than one simple selector. Between the
simple selectors, we can include a combinator.
 There are four different combinators in CSS3:
1. descendant selector
2. child selector
3. adjacent sibling selector
4. general sibling selector

CSS Combinators
 Descendant Selector :
1. The descendant selector matches all element that are descendants of a
specified element.
2. The following example selects all <p> elements inside <div> elements:

CSS Combinators
 Child Selector :
1. The child selector selects all elements that are the immediate children of a
specified element.
2. The following example selects all <p> elements that are immediate children of a
<div> element:

CSS Combinators
 Adjacent Sibling Selector :
1. The adjacent sibling selector selects all elements that are the adjacent siblings of
a specified element.
2. Sibling elements must have the same parent element, and "adjacent" means
"immediately following".
3. The following example selects all <p> elements that are placed immediately
after <div> elements :

CSS Combinators
 General Sibling Selector :
1. The general sibling selector selects all elements that are siblings of a specified
element.
2. The following example selects all <p> elements that are siblings of <div>
elements :

CSS Pseudo-classes
 A pseudo-class is used to define a special state of an element.
 For example, it can be used to:
1. Style an element when a user mouse over it
2. Style visited and unvisited links differently
 The syntax of pseudo-classes:

CSS Pseudo-classes
 Links can be displayed in different ways:

CSS Pseudo-elements
 A CSS pseudo-element is used to style specified parts of an element.
 For example, it can be used to:
1. Style the first letter, or line, of an element
2. Insert content before, or after, the content of an element
 The syntax of pseudo-elements:

CSS Pseudo-elements
 All CSS Pseudo Elements :

CSS Navigation Bar
 Having easy-to-use navigation is important for any web site.
 With CSS you can transform boring HTML menus into good-looking
navigation bars.

CSS Navigation Bar
 Navigation Bar = List of Links :
1. A navigation bar needs standard HTML as a base.
2. In our examples we will build the navigation bar from a standard HTML list.
3. A navigation bar is basically a list of links, so using the <ul> and <li> elements
makes perfect sense:

CSS Navigation Bar
 Horizontal Navigation Bar :
1. There are two ways to create a horizontal navigation bar. Using inline or floating
list items.
2. Both methods work fine, but if you want the links to be the same size, you have
to use the floating method.

CSS Attribute Selectors
 It is possible to style HTML elements that have specific attributes or attribute
values.
 CSS [attribute=value] Selector :
1. The [attribute=value] selector is used to select elements with a specified
attribute and value.

 CSS [attribute~=value] Selector :
1. The [attribute~=value] selector is used to select elements with an attribute value
containing a specified word.
2. The following example selects all elements with a title attribute that contains a
space-separated list of words, one of which is "flower":

 Styling Forms :
1. The attribute selectors can be useful for styling forms without class or ID:

CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of CSS.

CSS3
 CSS3 Modules :
1. Some of the most important CSS3 modules are:
2. Selectors
3. Box Model
4. Backgrounds and Borders
5. Image Values and Replaced Content
6. Text Effects
7. 2D/3D Transformations
8. Animations
9. Multiple Column Layout
10. User Interface

CSS3 Borders
 In CSS3, the border-radius property is used to create rounded corners:

CSS3 Backgrounds
 CSS3 Background Properties :

CSS3 Backgrounds
 CSS3 The background-origin Property :
1. The background-origin property specifies the positioning area of the
background images.
2. The background image can be placed within the content-box, padding-box, or
border-box area.

CSS3 Gradients
 CSS3 gradients let you display smooth transitions between two or more
specified colors .
 CSS3 defines two types of gradients:
1. Linear Gradients (goes down/up/left/right/diagonally)
2. Radial Gradients (defined by their center)

Css from scratch

Recommended

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Css from scratch (20)

Recently uploaded (20)

Css from scratch