Chapter 3 CSS (Week 3-4) PDF

Web Programming CSS for Styling Dr. Yazan A. Alsariera CS 1105-315 1 The good, the bad and the… ugly! Shashdot. News for nerds!! You will never, EVER be BORED here! HTML Slashdot. News for nerds!! You will never,...

Web Programming CSS for Styling Dr. Yazan A. Alsariera CS 1105-315 1 The good, the bad and the… ugly! Shashdot. News for nerds!! You will never, EVER be BORED here! HTML Slashdot. News for nerds!! You will never, EVER be BORED here! output Tags such as b, i, u, and font are discouraged in strict HTML Why is this bad? Dr. Yazan A. Alsariera CS 1105-315 2 Cascading Style Sheets (CSS) Describes the appearance, layout, and presentation of information on a web page HTML describes the content of the page Describes how information is to be displayed, not what is being displayed Can be embedded in HTML document or placed into separate.css file Dr. Yazan A. Alsariera CS 1105-315 3 Basic CSS rule syntax selector { property: value; property: value;... property: value; } CSS p { font-family: sans-serif; color: red; } CSS A CSS file consists of one or more rules Each rule starts with a selector A selector specifies an HTML element(s) and then applies style properties to them a selector of * selects all elements Dr. Yazan A. Alsariera CS 1105-315 4 Attaching a CSS file...... HTML HTML A page can link to multiple style sheet files In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used Dr. Yazan A. Alsariera CS 1105-315 5 Embedding style sheets: p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } HTML CSS code can be embedded within the head of an HTML page Bad style and should be avoided when possible (why?) Dr. Yazan A. Alsariera CS 1105-315 6 Inline styles: the style attribute This is a paragraph HTML This is a paragraph output Higher precedence than embedded or linked styles Used for one-time overrides and styling a particular element Bad style and should be avoided when possible (why?) Dr. Yazan A. Alsariera CS 1105-315 7 CSS properties for colors p { color: red; background-color: yellow; } CSS This paragraph uses the style above output property description color color of the element's text background-color color that will appear behind the element Dr. Yazan A. Alsariera CS 1105-315 8 Specifying colors p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } CSS This paragraph uses the first style above This h2 uses the second style above. This h4 uses the third style above. output Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) Hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full) Dr. Yazan A. Alsariera CS 1105-315 9 Grouping styles p, h1, h2 { color: green; } h2 { background-color: yellow; } CSS This paragraph uses the above style. This h2 uses the above styles. output A style can select multiple elements separated by commas The individual elements can also have their own styles Dr. Yazan A. Alsariera CS 1105-315 10 CSS comments p { color: red; background-color: aqua; } CSS CSS (like HTML) is usually not commented as rigorously as programming languages such as Java The // single-line comment style is NOT supported in CSS The HTML comment style is also NOT supported in CSS Dr. Yazan A. Alsariera CS 1105-315 11 CSS properties for fonts property description font-family which font will be used font-size how large the letters will be drawn font-style used to enable/disable italic style font-weight used to enable/disable bold style Complete list of font properties ( https://www.w3schools.com/css/css_font.asp ) Dr. Yazan A. Alsariera CS 1105-315 12 font-family p { font-family: Georgia; } h2 { font-family: "Courier New"; } CSS This paragraph uses the first style above. This h2 uses the second style above. output Enclose multi-word font names in quotes Dr. Yazan A. Alsariera CS 1105-315 13 More about font-family p { font-family: Garamond, "Times New Roman", serif; } CSS This paragraph uses the above style. output We can specify multiple fonts from highest to lowest priority Generic font names: serif, sans-serif, cursive, fantasy, monospace If the first font is not found on the user's computer, the next is tried Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font Dr. Yazan A. Alsariera CS 1105-315 14 font-size p { font-size: 24pt; } CSS This paragraph uses the style above. output ▪ Units: pixels (px) vs. Point (pt) vs. M-size (em) 16px, 16pt, 1.16em ▪ Vague font sizes: , xx-small , x-small , medium, large, x-large, xx-large, smaller, larger small ▪ Percentage font sizes, e.G.: 90%, 120% Dr. Yazan A. Alsariera CS 1105-315 15 font-size p { font-size: 24pt; } CSS This paragraph uses the style above. output pt specifies number of point, where a point is 1/72 of an inch onscreen px specifies a number of pixels on the screen em specifies number of m-widths, where 1 em is equal to the font's current size Dr. Yazan A. Alsariera CS 1105-315 16 font-weight, font-style p { font-weight: bold; font-style: italic; } CSS This paragraph uses the style above. output Either of the above can be set to normal to turn them off (e.g. headings) Dr. Yazan A. Alsariera CS 1105-315 17 CSS properties for text property description text-align alignment of text within its element text-decoration decorations such as underlining line-height, word-spacing, gaps between the various portions of the text letter-spacing text-indent indents the first letter of each paragraph Complete list of text properties ( https://www.w3schools.com/css/css_text.asp ) Dr. Yazan A. Alsariera CS 1105-315 18 text-align blockquote { text-align: justify; } h2 { text-align: center; } CSS The Gollum’s Quote We wants it, we needs it. Must have the precious. They stole it from us. Sneaky little hobbitses. Wicked, tricksy, false! output text-align can be left, right, center, or justify Dr. Yazan A. Alsariera CS 1105-315 19 text-decoration p { text-decoration: underline; } CSS This paragraph uses the style above. output Can Also Be Overline, Line-through, Blink, Or None Effects Can Be Combined: Text-decoration: Overline Underline; Dr. Yazan A. Alsariera CS 1105-315 20 The list-style-type property ol { list-style-type: lower-roman; } CSS Possible values: i. none : No marker ii. disc (default), circle, square iii. Decimal: 1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc. vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana… etc. Dr. Yazan A. Alsariera CS 1105-315 21 Body styles body { font-size: 16px; } CSS Applies a style to the entire body of your page Saves you from manually applying a style to each element Dr. Yazan A. Alsariera CS 1105-315 22 Cascading Style Sheets Properties of an element cascade together in this order: browser's default styles external style sheet files (in a tag) internal style sheets (inside a tag in the page's header) inline style (style attribute of the HTML element) Dr. Yazan A. Alsariera CS 1105-315 23 Inheriting styles body { font-family: sans-serif; background-color: yellow; } p { color: red; background-color: aqua; } a { text-decoration: underline; } h2 { font-weight: bold; text-align: center; } CSS This is a heading A styled paragraph. Previous slides are available on the website. A bulleted list output when multiple styles apply to an element, they are inherited a more tightly matching rule can override a more general inherited rule Dr. Yazan A. Alsariera CS 1105-315 24 Styles that conflict p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; } CSS This paragraph uses the first style above. This heading uses both styles above. output when two styles set conflicting values for the same property, the latter style takes precedence Dr. Yazan A. Alsariera CS 1105-315 25 CSS properties for backgrounds property description background-color color to fill background background-image image to place in background background-position placement of bg image within element background-repeat whether/how bg image should be repeated background-attachment whether bg image scrolls with page background shorthand to set all background properties Dr. Yazan A. Alsariera CS 1105-315 26 background-image body { background-image: url("images/draft.jpg"); } CSS background image/color fills the element's content area Dr. Yazan A. Alsariera CS 1105-315 27 background-repeat body { background-image: url("images/draft.jpg"); background-repeat: repeat-x; } CSS Can Be Repeat (Default), Repeat-x, Repeat-y, Or No- repeat Dr. Yazan A. Alsariera CS 1105-315 28 background-position body { background-image: url("images/draft.jpg"); background-repeat: no-repeat; background-position: 370px 20px; } CSS Value Consists Of Two Tokens, Each Of Which Can Be Top, Left, Right, Bottom, Center, A Percentage, Or A Length Value In Px, Pt, Etc. Value Can Be Negative To Shift Left/Up By A Given Amount Dr. Yazan A. Alsariera CS 1105-315 29 Aside: Favorites icon ("favicon") HTML HTML The link tag, placed in the HTML page's head section, can specify an icon this icon will be placed in the browser title bar and bookmark/favorite Dr. Yazan A. Alsariera CS 1105-315 30 HTML id attribute Coding Horror! Coding Horror! Our mission is to combine programming and human factors with geekiness! HTML Coding Horror! Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output A unique ID for an element on a page Each ID must be unique; can only be used once in the page Dr. Yazan A. Alsariera CS 1105-315 31  CSS ID selectors #mission { font-style: italic; font-family: "Garamond", "Century Gothic", serif; } CSS Coding Horror! Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output Applies style only to the paragraph that has the ID of mission Dr. Yazan A. Alsariera CS 1105-315 32  HTML class attribute Coding Horror! Coding Horror! See our special deal on Droids! Today only! HTML Coding Horror! Coding Horror! See our special deal on Droids! Today only! output A way to group some elements and give a style to only that group Unlike an id, a class can be reused as much as you like on the page Dr. Yazan A. Alsariera CS 1105-315 33 CSS class selectors.special { background-color: yellow; font-weight: bold; } p.shout { color: red; font-family: cursive; } CSS Coding Horror! Coding Horror! See our special deal on Droids! Today only! output Dr. Yazan A. Alsariera CS 1105-315 34 CSS class selectors Coding Horror! Coding Horror! See our special deal on Droids! Today only! HTML Coding Horror! Coding Horror! See our special deal on Droids! Today only! output Dr. Yazan A. Alsariera CS 1105-315 35 CSS ID selectors a:link { color: #FF0000; } a:visited { color: #00FF00; } a:hover { color: #FF00FF; } CSS Buy Early Buy Often! output Dr. Yazan A. Alsariera CS 1105-315 36 CSS ID selectors class description :active an activated or selected element :focus an element that has the keyboard focus :hover an element that has the mouse over it :link a link that has not been visited :visited a link that has already been visited :first-letter the first letter of text inside an element :first-line the first line of text inside an element an element that is the first one to appear inside :first-child another Dr. Yazan A. Alsariera CS 1105-315 37  Styling Page Sections Dr. Yazan A. Alsariera CS 1105-315 38 Why do we need page sections? Dr. Yazan A. Alsariera CS 1105-315 39  Sections of a page Coding Horror! Coding Horror! See our special deal on Droids! We'll beat any advertised price! HTML Coding Horror! Coding Horror! See our special deal on Droids! We’ll beat any advertised price! output Tag used to indicate a logical section or area of a page Has no appearance by default, but you can apply styles to it Dr. Yazan A. Alsariera CS 1105-315 40 Inline Sections Coding Horror! Coding Horror! See our spectacular deal on Droids! We'll beat any advertised price! HTML Coding Horror! Coding Horror! See our spectacular deal on Droids! We’ll beat any advertised price! output Has no onscreen appearance, but you can apply a style or ID to it, which will be applied to the text inside the span Dr. Yazan A. Alsariera CS 1105-315 41 CSS context selectors selector1 selector2 { properties } CSS Applies the given properties to selector2 only if it is inside a selector1 on the page selector1 > selector2 { properties } CSS  Applies the given properties to selector2 only if it is directly inside a selector1 on the page Dr. Yazan A. Alsariera CS 1105-315 42 Context selector example Eat at Greasy's Burger... The greasiest burgers in town! Yummy and greasy at the same time! HTML li strong { text-decoration: underline; } CSS Eat at Greasy’s Burger… The greasiest burgers in town! Yummy and greasy at the same time! output Dr. Yazan A. Alsariera CS 1105-315 43 The CSS Box Model Every element composed of: content a border around the element padding between the content and the border a margin between the border and other content https://www.w3schools.com/css/css_boxmodel.asp width = content width + L/R padding + L/R border + L/R margin height = content height + T/B padding + T/B border + T/B margin Dr. Yazan A. Alsariera CS 1105-315 44 Document Flow – block elements Dr. Yazan A. Alsariera CS 1105-315 45 Document flow - inline elements Dr. Yazan A. Alsariera CS 1105-315 46 Document flow - a larger example Dr. Yazan A. Alsariera CS 1105-315 47 CSS properties for borders h2 { border: 5px solid red; } CSS This is a heading. output property description border thickness/style/size of border on all 4 sides  Thickness: px, pt, em, or thin, medium, thick  Style: none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid  color Dr. Yazan A. Alsariera CS 1105-315 48 More border properties property description border-color, border-width, specific properties of border border-style on all 4 sides border-bottom, border-left, all properties of border on a border-right, border-top particular side border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, properties of border on a border-right-color, border-right-style, particular side border-right-width, border-top-color, border-top-style, border-top-width Complete list of border properties https://www.w3schools.com/css/css_border.asp Dr. Yazan A. Alsariera CS 1105-315 49 Another border example h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } CSS This is a heading. output  Each side's border properties can be set individually  If you omit some properties, they receive default Dr. Yazan A. Alsariera CS 1105-315 50 CSS properties for padding property description padding padding on all 4 sides padding-bottom padding on bottom side only padding-left padding on left side only padding-right padding on right side only padding-top padding on top side only Complete list of padding properties https://www.w3schools.com/css/css_padding.asp Dr. Yazan A. Alsariera CS 1105-315 51 Padding example 1 p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; } CSS This is a first paragraph. This is a second paragraph. This is a heading output Dr. Yazan A. Alsariera CS 1105-315 52 Padding example 2 p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; } CSS This is a firstThis is a first paragraph paragraph. This is a second paragraph output  Each side's padding can be set individually  Notice that padding shares the background color of the element Dr. Yazan A. Alsariera CS 1105-315 53 CSS properties for margins property description margin margin on all 4 sides margin-bottom margin on bottom side only margin-left margin on left side only margin-right margin on right side only margin-top margin on top side only Complete list of margin properties https://www.w3schools.com/css/css_margin.asp Dr. Yazan A. Alsariera CS 1105-315 54 Margin example 1 p { margin: 50px; background-color: fuchsia; } CSS This is a first paragraph This is a second paragraph output  notice that margins are always transparent Dr. Yazan A. Alsariera CS 1105-315 55 CSS properties for dimensions p { width: 350px; background-color: yellow; } h2 { width: 50%; background-color: aqua; } CSS This paragraph uses the first style above An h2 heading output property description how wide or tall to make this element width, height (block elements only) max-width, max-height, max/min size of this element in given dimension min-width, min-height Dr. Yazan A. Alsariera CS 1105-315 56 Centering a block element: auto margins p { margin-left: auto; margin-right: auto; width: 750px; } CSS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. output  Works best if width is set (otherwise, may occupy entire width of page)  To center inline elements within a block element, use text-align: center; Dr. Yazan A. Alsariera CS 1105-315 57