In the name of GOD

1. In the name of GOD Welcome to 7thsession HTML/CSS

2. CSS Fundamentals Begin styling by CSS

3. CSS Selectors • Child selector p a { } • Direct Child selector p > a { } • Multiple selectors: h1, h2 { } • Tag selector: h1 { } • Class selector: .header { } • ID Selector: #wrapper { }

4. CSS Selectors • Wildcard selector * { } • Adjacent selector (immediately after) .content + div { } • Sibling selector (all siblings after tag): ul ~ p { } • Mixed selectors: • h1.header {} • div#wrapper {} • .content p a.external {} • body>div {} • table tr {} • #navigation ul.menu {} • ul.menu li li {} • body.js .slider img {}

5. CSS Selectors (Attribute selectors)(CSS3) • Attribute value starts with a[href^=“http”] { } • Attribute value ends with A[href$=“.jpg”] { } • Attribute value contains (space separated values): a[href~=“tutorial”] { } • Has attribute: a[title] { } • Attribute value is equal to a[href=“http://xx.com/”] { } • Attribute value contains: a[href*=“tutorial”] { }

6. CSS Pseudo selectors (+CSS3, +jQuery) • Focused element input[type=“submit”]:focus, button:focus { } • Checked element Input[type=“radio”]:checked {} input:checked {} • Negation selector *:not(p) {} p:not(.content p) {} • Normal links: a:link { } • Visited links a:visited { } • Hover effect (only links – CSS3=all tags): a:hover {} input[type=“text”]:hover{}

7. Formatting text Basic text formatting, fonts, colors, etc…

8. Fonts p { font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 13px; color: #000; /* Foreground color */ background-color: #fff; /* Background color */ } p.transparent { background-color: transparent; }

9. Text decoration a { text-decoration: none; } a:hover { text-decoration: underline; }

10. Text alignment .content { text-align: center; text-align: left; text-align: right; text-align: justify; }

11. Text Direction body.language-fa { direction: rtl; } body.language-en { direction: ltr; }

12. CSS Rule inheritance & default values p { text-align: inherit; }

13. Text: line height P { line-height: 10px; }

14. Text: Shadow (CSS3) Pattern: text-shadow: horizontalvertical [blur-level] [color]; Example: p { text-shadow: 2px 2px 3px #f00; -moz-text-shadow: 2px 2px 3px #f00; -webkit-text-shadow: 2px 2px 3px #f00; }

15. Text: Spacing Word spacing: p { word-spacing: 30px; } Letter spacing: p { letter-spacing: 10px; }

16. CSS Box Model & Positioning Padding, Margin, Border

17. The Box model

18. The Box model: Calculate Dimensions Calculate total (Applied) width and height: Total width = Width + padding-left + padding-right + border-left + border-right + margin-left + margin-right Total Height = Height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

19. Box model overview in Firebug

20. The Box model: Border div.example { border-style: dotted; border-style: dashed; border-style: solid; border-style: groove; border-style: double; border-style: inset; border-style: outset; }

21. The Box model: Border: Width & Color div.example { border-width: 1px; border-style: dashed; border-color: red; }

22. The Box model: Border : shorthand style Notice the order: border: [border-width] border-style [border-color]; div.example { border: 1px solid red; border: 1px dashed green; border: 5px groove #000; }

23. The Box model: Margin Example: div.example { margin: 10px; margin: 10px 15px; } Default value: margin: inherit; Calculate by browser: margin: auto; Syntax: clockwise margin: top right bottom left; margin: vertical horizontal; margin: top horizontal bottom; margin-top: 3px; margin-right: 3px; margin-bottom: 1em;

24. The Box model: Padding Example: div.example { padding: 10px; padding: 10px 15px; } Syntax: clockwise padding: top right bottom left; padding: vertical horizontal; padding: top horizontal bottom; padding-top: 3px; padding-right: 3px; padding-bottom: 1em;

25. Real world example of the box model Step by step creating a vCard: Place a division in the center of the screen

26. Place in the center horizontally #wrapper { width: 850px; margin: 0 auto; border: 1px solid #000; } Step 1: Set a fixed with. Step 2: Set margin-left and margin-right to auto. Step 3: Done!

27. Setup border-radius (CSS3 + Fallback) #wrapper { border-radius: 15px; } http://border-radius.com/ http://css3generator.com/ Syntax: border-radius: toprightbottomleft; border-radius: verticalhorizontal; border-radius: all; -moz-border-radius: ; -webkit-border-radius: ;

28. Setup box-shadow (CSS3 + Fallback) #wrapper { box-shadow: 10px 10px 5px #888888; } Syntax: box-shadow: horizontal shadow vertical shadow blur-level spread (size) color inset;

29. Your public website Put your awesome works online !

30. Login to FTP using My Computer or FileZilla Address: ftp://hejazee.ir/ Username: payamenoor Password: htmlcourse Web access URI: http://www.hejazee.ir/~payamenoor/

31. Make your own with your name • You can ask me to create a special user for you. • You can register your own domain name (this one comes with a little price) • You can buy a web hosting space or ask me for this. • You can register free domains @ www.dot.tk • You can get free hosting by searching in google