Introduction to css part1
Download as PPSX, PDF0 likes178 views
The document introduces CSS (Cascading Style Sheets) and the box model. CSS allows applying rules to elements on a web page to control how they are rendered. Rules have selectors that indicate elements to style and declarations that set properties. CSS rules can be defined in external style sheets, internal style sheets within <style> tags, or inline with the style attribute. The box model conceptualizes elements as boxes that may have borders, margins, padding, and dimensions. Attributes of these boxes like color, width, and overflow can be controlled with CSS.
![Attribute Selectors
HTML: <p class="short red"></p>
HTML: <p language="en-US"></p>
Any attribute whose value begins with "b".
Any attribute whose value contains "b".
Any attribute whose value end with "b".
16
Name Example
Existence p[id]
Equality p[id="short"]
Space
p[class-="short"]
Hyphen
p[language|="en"]
Prefix (CSS3)
p[attr^"b"]
Substring (CSS3)
p[attr*"b"]
Suffix (CSS3)
p[attr$"b"]
Khem Puthea](https://image.slidesharecdn.com/introductiontocsspart1-151028154529-lva1-app6891/85/Introduction-to-css-part1-16-320.jpg)
Introduction to css part1
- 1. Concept of Web Page Cascading Style Sheets Khem Puthea [email protected] facebook.com/putheaengineer Khem Puthea
- 2. Introducing CSS ៚ CSS works by allowing to associate rules with the elements that appear in a web page. ៙ These rules govern how the content of those elements should be rendered. ៙ The rule is made up of two parts: ៜ The selector, which indicates which element or elements the declaration applies to ៜ The declaration, which sets out how the elements referred to in the selector should be styled ៚ e.g. ៙ table {width: 36px;} ៜ Applies to all the table: <table width="36"> ៙ h1, h2, h3 {color: #000000;} 2Khem Puthea
- 3. Adding CSS Rules ៚ CSS rules can appear in 3: ៙ A separate file (external style sheet) ៜ The <link> inside the <head> ៜ e.g. <link rel="stylesheet" type="text/css" href="style.css" /> ៕ style.css h1 {color: red;} ៙ The <style> inside the <head> ៜ e.g. <style> h1 {color: red;} </style> (internal style sheet) ៙ The style attribute (inline style sheet) ៜ e.g. <h1 style="color: red;"></h1> 3Khem Puthea
- 4. The <link> Element ៚ The <link> is used in web pages to describe the relationship between two documents. ៙ Carries the core attributes and also: charset dir href hreflang media rel rev style target type ៚ The rel is required and specifies the relationship between the documents; e.g. rel="stylesheet". ៚ The type specifies the MIME type the document begin linked to; e.g. type="text/css". ៚ The href indicates where to find the file via URL. ៚ The media specifies the output device that is intended for use with the document. ៙ media="screen | tty | tv | print | projection | handheld | braille | embossed | aural | all" 4Khem Puthea
- 5. The <style> Element ៚ The <style> inside the <head> contains style sheet rules within a page. ៙ A single page needs to contain just a few extra rules that do not apply to the others. ៙ Carries: dir lang media title type ៚ Advantages of External CSS Style Sheet: ៙ Save repeating the same style ៙ Be easier to update ៙ Be quicker to load ៙ Act as a style template ៙ Different style sheets can be attached. ៙ Can import and use styles from other style sheets 5Khem Puthea
- 6. Controlling Text ៚ A typeface is a family of fonts, such as the Arial family. ៚ A font is a specific member of that family, such as Arial 12-point bold. 6 Property Purpose font Combine several following properties into one font-family The typeface or family font-size The size font-weight Normal or bold font-style Normal, italic or oblique font-stretch The width of the actual characters font-variant Normal or small caps font-size-adjust The aspect ratio of the size Khem Puthea
- 7. Controlling Text (cont.) ៚ The font-family ៙ e.g. h1 {font-family: arial, verdana, "courier new";} ៚ The font-size ៙ Units of length: px em ex pt in cm pc mm ៜ e.g. h1 {font-size: 36px;} ៙ Absolute size: xx-small x-small xx-large ៙ Relative size: smaller larger ៙ Percentage ៚ The font-weight ៙ The values: normal bold bolder ៚ The font-style small medium large x-large lighter 100 200 ... 900 ៙ The values: normal italic oblique ៚ The font-variant ៙ Smaller version of the uppercases. ៙ The values: normal small-caps 7Khem Puthea
- 8. Text Formatting 8 Property Purpose color The color text-align The horizontal alignment of the text within the container vertical-align The vertical alignment font-decoration Underlined, overlined, strikethrough or blinking font-indent An indent from the left border font-transform Uppercase, lowercase or capitalized text-shadow A drop shadow letter-spacing The space between the letters word-spacing The spacing between the words white-space Collapsed, preserved or prevented from wrapping direction The direction Khem Puthea
- 9. Text Formatting (cont.) ៚ The color ៙ e.g. h1 {color: #0000FF;} ៚ The text-align ៙ The values: left right center justify ៚ The vertical-align ៙ The values: baseline sub super top text-top text-bottom ៚ The text-decoration ៙ The values: underline overline line-through ៚ The text-indent ៙ e.g. h1 {text-indent: 9px;} ៚ The text-shadow middle bottom blink ៙ The 4 values respective: color X-length Y-length blur-length ៙ e.g. h1 {text-shadow: #0000FF 10px 10px 6px;} 9Khem Puthea
- 10. Text Formatting (cont.) ៚ The text-transform ៙ The values: none capitalize uppercase ៚ The white-space ៙ The values: normal pre nowrap ៚ The direction lowercase ៙ The values: ltr rtl inherit 10Khem Puthea
- 11. Text Pseudo-Classes ៚ The first-letter ៙ Allows to specify a rule just for the first letter ៚ The first-line ៙ Allows to specify a rule just for the first line ៚ e.g. textPseudo-classes.html ... <style> p.first:first-letter {font-size: 36px} p.first:first-line {font-style: </style> ... <p class="first"> oblique} A is an apple.<br B is a banana. </p> ... /> 11Khem Puthea
- 12. Selectors ៚ Universal Selector ៙ A wildcard and matches all elements ៙ e.g. * {font-size: 10px;} ៚ The Type Selector ៙ Matches all elements specified in the comma-delimited list ៙ e.g. h1, h2 {color: red;} ៚ The Class Selector ៙ Matches an element or elements carrying a class attribute whose value matches in the class selector ៙ e.g. ៜ HTML: <p class="red">I am red.</p> ៜ CSS ៕ Specific selector: p.red {color: red;} ៕ Share selector: .red {color: red;} 12Khem Puthea
- 13. Selectors (cont.) ៙ A class can also contain several values separated by a space. ៙ e.g. ៜ HTML: <p class="bold red">I am bold ៜ CSS: p.bold.red {color: red;} ៚ The ID Selector ៙ Matches one element via the value of id attribute ៙ e.g. ៜ HTML: <p id="red">I am red.</p> ៜ CSS: p.#red {color: red;} ៚ The Child Selector ៙ Matches an element that is a direct child of another ៙ e.g. ៜ The <i> is the direct child of the <b>. ៜ HTML: <b><i>I am red.</i></b> ៜ CSS: b > i {color: red;} red.</p> 13Khem Puthea
- 14. Selectors (cont.) ៚ The Descendant Selector ៙ Matches an element that is a descendant of another ៙ e.g. ៜ The <i> is the descendant of the <p>. ៜ HTML: <p><b><i>I am red.</i></b></p> ៜ CSS: p i {color: red;} ៚ The Adjacent Sibling Selector ៙ Matches an element that is a next sibling of another ៙ e.g. ៜ The <p> is the next sibling of the <h1>. ៜ HTML: <h1></h1><p>I am red.</p> ៜ h1 + p {color: red;} ៚ The General Sibling Selector ៙ Matches an element that is a sibling of another ៙ e.g. ៜ The <p> is the next sibling of the <h1>. ៜ HTML: <h1></h1><b></b><p>I am red.</p> ៜ h1 - p {color: red;} 14Khem Puthea
- 15. Selectors (cont.) ៚ e.g. selectors.html <style> p {font-family:"Courier New", Courier, monospace;} div > p {background-color: p + p {color: red;} </style> ... <div> #C3C3C3;} <p>A <p>B <p>C </div> ... is is is an apple.</p> a a banana.</p> coconut.</p> 15Khem Puthea
- 16. Attribute Selectors HTML: <p class="short red"></p> HTML: <p language="en-US"></p> Any attribute whose value begins with "b". Any attribute whose value contains "b". Any attribute whose value end with "b". 16 Name Example Existence p[id] Equality p[id="short"] Space p[class-="short"] Hyphen p[language|="en"] Prefix (CSS3) p[attr^"b"] Substring (CSS3) p[attr*"b"] Suffix (CSS3) p[attr$"b"] Khem Puthea
- 17. Lengths ៚ Relative Units ៙ px (pixel) ៙ em (the height of the current font of a lowercase m) ៙ ex (the height of a lowercase x) ៚ Absolute Units ៙ pt (point) ៙ pc (pica) ៙ in (inch) ៙ cm ៙ mm ៚ Percentages ៙ Give a value in relation to another value. 17Khem Puthea
- 18. Introducing the Box Model Separates the edge of one box from other surrounding boxes 18 Property Description border 3 parameters: color style width margin The distance between the border of a box and the box next to it padding The space between the content of the box and its border Khem Puthea
- 19. Introducing the Box Model (cont.) ៚ e.g. introducingBoxModel.html ... <style> p { border-style: solid; padding: 20px; margin: 10px; padding-left: 0px; } b {border-style: solid;} </style> ... <p>A <p>B <p>C ... is is is an <b>apple</b>.</p> a banana.</p> a coconut.</p> 19Khem Puthea
- 20. Introducing the Box Model (cont.) ៚ The Border Properties ៙ border-color ៙ border-style ៜ The values: none solid dotted dashed double ridge inset outset hidden ៙ border-width groove ៜ The values: in absolute unit or relative one: thin medium thick ៚ The border properties are individual; i.e. border-top-color border- bottom-color border-left-color border-right-color ... 20 Color hex RGB Values RGB % red #FF0000 rgb(255, 0, 0) rgb(100%, 0, 0) green #00FF00 rgb(0, 255, 0) rgb(0, 100%, 0) blue #0000FF rgb(0, 0, 255) rgb(0, 0, 100%) Khem Puthea
- 21. Introducing the Box Model (cont.) ៚ The Dimensions of a Box ៙ height ៙ width ៙ line-height ៜ The space between lines of text ៙ max-height ៙ min-height ៙ max-width ៙ min-width ៙ overflow ៜ Controls the visualization of the content in the box ៜ The values: hidden scroll 21Khem Puthea