Transcript
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 Selectors
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":
CSS Attribute Selectors
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
top related