Css from scratch

CSS TutorialBy : 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":

CSS Text

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 Tables

Table Color :

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 Outlines

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-classes

CSS Pseudo-classes

CSS Pseudo-classes

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 The box-shadow Property

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)

CSS3 Text Effects

CSS3 Web Fonts

Css from scratch

Design