1 / 127

BIT116: Scripting Lecture 03

BIT116: Scripting Lecture 03. Instructor: Craig Duckett cduckett@cascadia.edu. Monday, January 13 th , 2014. Crash Course in CSS. HTML Color Codes. HTML Color Codes. Red/Green/Blue Hecadecimal Triplets 0123456789abcdef Red/Green/Blue RGB Decimal Code 0 - 255 X11 Color Names

belva
Download Presentation

BIT116: Scripting Lecture 03

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BIT116: ScriptingLecture 03 Instructor: Craig Duckett cduckett@cascadia.edu Monday, January 13th, 2014 Crash Course in CSS

  2. HTML Color Codes

  3. HTML Color Codes • Red/Green/Blue Hecadecimal Triplets • 0123456789abcdef • Red/Green/Blue RGB Decimal Code • 0 - 255 • X11 Color Names • thistle, magenta, indigo, gray, grey • HSL/HSV hue-saturation-lightness -value • 0 - 360° , 0 - 100%, 0 - 100% • Web Safe Colors • VGA 256  216  (6 × 6 × 6 = 216)each from 00 to FF /* RGB model */ #F00/* 3-digit shortchand hex form #rgb*/ #FF0000/* 6-digit traditional hex form #rrggbb*/ rgb(255, 0, 0) /* integer range 0 - 255 */ rgb(100%, 0%, 0%) /* float range 0.0% - 100.0% */ /* RGB with alpha channel, added to CSS3 */ rgba(255, 0, 0, 0.5) /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */ hsl(0, 100%, 50%) /* red */ hsl(120, 100%, 50%) /* green */ hsl(120, 100%, 25%) /* dark green */ hsl(120, 100%, 75%) /* light green */ hsl(120, 50%, 50%) /* pastel green */ /* HSL model with alpha channel */ hsla(120, 100%, 50%, 1) /* green */ hsla(120, 100%, 50%, 0.5) /* semi-transparent green */ hsla(120, 100%, 50%, 0.1) /* very transparent green */ http://html-color-codes.info/ http://www.w3schools.com/html/html_colors.asp http://www.w3schools.com/html/html_colornames.asp http://www.computerhope.com/htmcolor.htm http://www.computerhope.com/color-qa.htm http://en.wikipedia.org/wiki/Web_colors

  4. A Crash Course in CSS

  5. What is CSS ? • CSSstands for Cascading Style Sheets • Styles define how to display HTML elements • Styles were added to HTML 4.0 to solve a problem of separating content from the way it is formatted and displayed • External Style Sheets can save a lot of work by adding formatting and display configuration to an entire web site • External Style Sheets are stored in .cssfiles • CSS is a way to style and presentthe information offered in an HTML page. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document, including its font size and type, item colors, item formatting, margins and padding, rows and columns, in short the look and feel of a web page or entire web site.

  6. Three Ways to Insert CSS into an HTML Page • Inline Style • Internal Style Sheet • External Style Sheet

  7. Inline Style Inline style does exactly what it sounds like, it adds a style or styles in direct line with the HTML code itself (i.e., it is "embedded" inline with the HTML code) An inline style loses many of the advantages of style sheets by mixing content with presentation. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font color and the left and right margins of a paragraph: <p style="color:sienna; margin-left:20px; margin-right:600px;">Loremipsum dolor sit amet, consecteturadipiscingelit. Utpellentesqueiaculisluctus. Phasellusquisfaucibusturpis. Utconvallis quam id risusmattislobortis. Crasquisauguevulputate, laoreetmauris id, pharetra ligula. Curabiturplaceratsemeros, non rhoncusjustosollicitudineu.</p>

  8. 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, by using the <style> tag, like this: <head><style>p {margin-left:20px; margin-right:600px; color:red;}body {background-color: #ffff99;} <!– or the pair shortcut #ff9 --></style></head>

  9. CSS Syntax A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles": p{color:red; text-align:center;} NOTE: We will talk about creating and using "class" and "id" in CSS in a future lecture

  10. 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 one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section: <head><link rel="stylesheet"type="text/css" href="style.css"></head> An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .cssextension and given any name you choose appropriate to your design intentions (e.g., style.css). An example of a style sheet file is shown below: index.html style.css p{color:red; margin-left:20px; margin-right:600px; } body{background-color: #cccc66; } FYI: link relis link relation and in our case it is a "stylesheet". There are other types of relations besides stylesheet, like author, help, license, search, to name a few.

  11. Style Sheet Element Formatting The way you format your style sheet is really up to you. Pick a style that you like and then stick with it for consistency. p{color:red; margin-left:20px; margin-right:600px; } body{background-color: #cccc66; } p{color:red; margin-left:20px; margin-right:600px;} body{background-color: #cccc66;} p { color:red; margin-left:20px; margin-right:600px; } body { background-color: #cccc66; }

  12. Multiple Style Sheets and Types If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet. For example, an external style sheet has these properties for the h3 selector: h3{ color:red; text-align:left;font-size:8pt;} And an internal style sheet has these properties for the h3 selector: h3{text-align:right;font-size:20pt;} If the page with the internal style sheet also links to the external style sheet the properties for h3 will be: color:red;  from the externaltext-align:right;  from the internalfont-size:20pt;  from the internal The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

  13. Styles can be specified three ways: • inside an HTML element • inside the head section of an HTML page • in an external CSS file • Tip: multiple external style sheets can be referenced inside a single HTML document. • Cascading Order • What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: • Browser default • External style sheet • Internal style sheet (in the head section) • Inline style (inside an HTML element) • So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value). • NOTE: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

  14. Pros and Cons of the Three Different CSS Styles Inline Style Pros– Fast, down-and-dirty way to get styles into the code; great for testing or roughing out an idea; comes in handy in unique situations Cons– Can be tedious because it's on an item by item basis; if you want to change a style you have to work down through your code to find the style, and you've have to do this through your entire page, then you'd have to repeat this through all your other pages whose style you want to change in the same way Internal Style Pros– Almost as fast as inline style Cons– If you have multiple pages that use the same internal style, and you change one page, then you have to go through ALL your pages to manually change the CSS style to make sure all your pages are the same External Style Pros– It is common for websites to have common 'theme' across all its pages. You can club all such common styles in external file and with one download you get the required style that can be used in multiple pages: saves download time; if you want to change style throughout your entire site, you only have to do this in the external file, and not manually going through each one of your pages (saves a LOT of time if you have many pages in your site) Cons– There will be one additional HTTP request for each external style sheet you have

  15. HTML & CSS for Page Layout As we saw in a previous lecture, the semantic markup introduced in HTML5 allows to construct page layouts differently. Although we still can use <div> tags for creating layouts, many of the standard page elements such as header, navigation, footer have now their own tags. This does not change the way CSS and HTML work together but it makes our code more meaningful and saves us from typing some <div>'s (we can still use divs to create "wrappers" to center sections, produce "responsive" pages, etc). NOTE: We will discuss "id" and "class" a bit later in today's lecture

  16. HTML & CSS for Page Layout A basic layout uses a header, a main content area and a footer. On the HTML side there is nothing new except that we use might a div wrapper layer for centering the content in the browser. <body> <divid="wrapper"> <header> <h1>This is the header</h1> </header> <section> <p>Here would come the main content</p> </section> <footer> <p>Last but not least, the footer</p> </footer> </div> </body> Without the CSS, the web page looks pretty basic, even though all the HTML tags are in place. We'll use the CSS to jazz things up a bit. NOTE: We will discuss "id" and "class" a bit later in today's lecture

  17. CSS Syntax (Review) A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles": p{color:red; text-align:center;}

  18. HTML & CSS for Page Layout Now looking at the CSS, first we reset the margin and padding of all elements to zero and tell the browser to render all HTML5 section tags as block. * { margin:0px; padding:0px;} header, footer, section, aside, article, nav { display: block;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

  19. HTML & CSS for Page Layout The wrapper centers the rest of the content div#wrapper { width:90%; margin:0px auto;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

  20. HTML & CSS for Page Layout While we simply add some color to distinguish the three sections of the document: header, the main section and the footer. header { background-color:#CCA; height:50px;} section { background-color:#F3C200; height:100px;} footer { background-color:#CC6; height:20px;} NOTE: We will discuss "id" and "class" a bit later in today's lecture

  21. HTML & CSS for Page Layout Putting it all together and the CSS render content of the now page looks like this: Demo code: test001.html NOTE: We will discuss "id" and "class" a bit later in today's lecture

  22. Common CSS Selectors & Declarations

  23. Commenting Some notes about these CSS properties, attributes, and values: First, commenting inside HTML and CSS HTML Comment <!-- Comment Goes Here --> CSS Comment /* Comment Goes Here */

  24. TheidSelector: # Standards specify that any given idname can only be referenced once within a page or document. From my experience, ids are most commonly used correctly in CSS layouts. This makes sense because there are usually only one 'wrapper' per page, or only one menu, one banner, usually only one content pane, etc. What this means is, two selectors cannot us the same id. If you want to do that, then you would create and use a class (which we'll talk about a bit later). NOTE: Do NOT start an idname with a number! It will not work in Firefox. In the CSS div#wrapper { width:70%;  sets width of div in relation tothe browser margin:0px auto;} In the HTML <div id="wrapper"> . . . </div>

  25. ThemarginProperty • The margin property can have from one to four values: • margin:25px 50px 75px 100px; • top margin is 25px • right margin is 50px • bottom margin is 75px • left margin is 100px • margin:25px 50px 75px; top - right/left - bottom • top margin is 25px • right and left margins are 50px • bottom margin is 75px • margin:25px 50px; top/bottom - right/left • top and bottom margins are 25px • right and left margins are 50px • margin:25px; • all four margins are 25px The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px; W3Schools: margin

  26. Theheight Property The height property sets the height of an element, whether in by auto (default), length (px, cm, pt, etc). height:50px; W3Schools: height

  27. Thebackground-color Property The background-color property sets the background color of an element. background-color:#CCA;  or #CCCCAA W3Schools: background-color

  28. Theclass Selector: . The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector is defined with a period or "dot": . NOTE: You can name a class anything you want, although it is recommended you give it a name according to its function. In the example below, all HTML elements with class="center"will be center-aligned: In the CSS .center {text-align:center;} In the HTML <h1 class="center">Rex Winkus's Portfolio</h1> <p class="center">Week 01</p> W3Schools: Class vs ID

  29. Theclass Selector, specified by a HTML Element You can also specify that only predetermined HTML elements should be affected by a class. In other words, even if other elements call a class by name, only the type of element uniquely specified will be affected by the call. In the CSS p.center{text-align:center; } In the HTML <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be center-aligned.</p> http://www.htmldog.com/guides/css/intermediate/classid/ W3Schools: Class vs ID

  30. Some Other Basic CSS Properties: font-family In the CSS [remember, that these class names can be anything you want] p.serif{font-family:"Times New Roman",Times,serif;} p.sansserif{font-family:Arial,Helvetica,sans-serif;} In the HTML <h1 class="serif">This is heading 1</h1>  This isn't affected <h2 class="sansserif">This is heading 2</h2>  This isn't affected <p class="serif">This is a paragraph.</p><p class="sansserif">This is a paragraph.</p> W3Schools: font-family

  31. Some Other Basic CSS Properties: font-size In the CSS h1 {font-size:250%;} h2 {font-size:200%;} .ften{font-size:10pt;} .f875em {font-size:0.875em;} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p><p class="ften">This is a paragraph.</p><p class="f875em">This is a paragraph.</p> • An "em" is a relative property based on the default font-size of the browsers, which is typically 16px. For example, this means that: • 1em = (16 x 1) = 16px = 100% • 1.25em (16 x 1.25) = 20px = 125% • 0.75em (16 x 0.75) = 12px = 75% • 2em (16 x 2) = 32px = 200% W3Schools: font-size

  32. Some Other Basic CSS Properties: font-style In the CSS [remember, that these class names can be anything you want] .normal {font-style:normal;} p.italic {font-style:italic;} .oblique {font-style:oblique;} In the HTML <p class="normal">This is a paragraph, normal.</p> <p class="italic">This is a paragraph, italic.</p> <p class="oblique">This is a paragraph, oblique.</p> <h2 class="oblique">This is a heading1, oblique.</h2> W3Schools: font-style

  33. Some Other Basic CSS Properties: font-variant In the CSS [remember, that these class names can be anything you want] .normal {font-variant:normal;} .small {font-variant:small-caps;} In the HTML <h2 class="small">Rex Winkus's Portfolio</p> <p class="normal">My name is Rex Winkus.</p> <p class="small">My name is Rex Winkus.</p> W3Schools: font-variant

  34. Some Other Basic CSS Properties: font-weight In the CSS [remember, that these class names can be anything you want] p.normal {font-weight:normal;} p.light {font-weight:lighter;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} In the HTML <p class="normal">This is a paragraph.</p> <p class="light">This is a paragraph.</p> <p class="thick">This is a paragraph.</p> <p class="thicker">This is a paragraph.</p> W3Schools: font-weight

  35. Some Other Basic CSS Properties: font (shorthand property) The font shorthand property sets all the font properties in one declaration. The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family". The font-size and font-family values are required. If one of the other values are missing, the default values will be inserted, if any. In the CSS [remember, that these class names can be anything you want] .ex1{font:15px arial,sans-serif;} p.ex2{font:italic bold 12px/30px Georgia,serif;} In the HTML <p class="ex1">Rex Winkus's Portfolio</p> <p class="ex2">My name is Rex Winkus.</p> <h1 class="ex1">My name is Rex Winkus.</h1> <h1 class="ex2">My name is Rex Winkus.</h1> This is not altered W3Schools: font (shorthand)

  36. Some Other Basic CSS Properties: line-height The line-height property specifies the line height. In the CSS [remember, that these class names can be anything you want] p.normal{line-height:100%}  100% of normal, or 16px p.small {line-height:90%}  90% of normal, or 14.4pxp.big {line-height:2}  twice normal line height, or 32pxp.reallybig {line-height:48px}  three times normal line height, or 3 In the HTML <p class="ex1">Rex Winkus's Portfolio</p> <p class="ex2">My name is Rex Winkus.</p> <h1 class="ex1">My name is Rex Winkus.</h1> <h1 class="ex2">My name is Rex Winkus.</h1> This is not altered W3Schools: line-height

  37. Some Other Basic CSS Properties: text-decoration The text-decoration property specifies the decoration added to text. In the CSS [remember, that the class names can be anything you want] h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} .none {text-decoration:none;} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <a class="none"href="http://www.google.com">Google</a> W3Schools: text-decoration

  38. Some Other Basic CSS Properties: text-align The text-align property specifies the horizontal alignment of text in an element. In the CSS h1 {text-align:center}h2 {text-align:left}h3 {text-align:right} In the HTML <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> W3Schools: text-align

  39. Some Other Basic CSS Properties: text-transform The text-transform property controls the capitalization of text. In the CSS h1 {text-transform:uppercase;}h2 {text-transform:capitalize;}p {text-transform:lowercase;} In the HTML <p class="uppercase">This is some text.</p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> W3Schools: text-transform

  40. Some Other Basic CSS Properties: color The color property specifies the color of text. In the CSS body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} In the HTML <h1>This is heading 1</h1> <p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p> <p class="ex">This is a paragraph with class="ex". This text is blue.</p> W3Schools: color

  41. CSS Box Model

  42. CSS Box Model: Content Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins and include both the left and right sides. The total width of the element in the example below is 310px: width:250px; padding:10px; border:10px solid gray; margin:10px; margin-top border-top padding-top Let's do the math: 250px (width) + 20px (left + right padding) + 20px (left + right border) + 20px (left + right margin) = 310px padding-left padding-right border-left margin-left margin-right border-right height width padding-bottom border-bottom margin-bottom W3Schools: CSS Box Model

  43. CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model: • Explanation of the different parts: • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent • Border - A border that goes around the padding and content. The border is affected by the background color of the box • Padding - Clears an area around the content. The padding is affected by the background color of the box • Content - The content of the box, where text and images appear • In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. margin-top border-top padding-top padding-left padding-right border-left margin-left margin-right border-right height width padding-bottom border-bottom margin-bottom W3Schools: CSS Box Model

  44. CSS Box Model: Padding The CSS padding properties define the space between the element border and the element content. 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. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. In the CSS [Remember, you can use any class name you want here] .padding {padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px; } In the HTML <p class="padding">This is a paragraph.</p> paddingshorthand: padding:25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px padding:25px 50px 75px; top padding is 25px right and left paddings are 50px bottom padding is 75px padding:25px 50px; top and bottom paddings are 25px right and left paddings are 50px padding:25px; all four paddings are 25px W3Schools: padding

  45. CSS Box Model: Border • border-style • The border-style property specifies what kind of border to display. NOTE: None of the border properties will have ANY effect unless the border-style property is set! • dotted • dashed • solid • double • groove • ridge • inset • outset • border-width • The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick. Note: The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. W3Schools: border

  46. CSS Box Model: Border CONTINUED A look at border-style and border-width: In the CSS p.one {border-style:solid;border-width:5px;} p.two{border-style:solid;border-width:medium;} In the HTML <p class="one">Some text.</p> <p class="two">Some text.</p> W3Schools: border

  47. CSS Box Model: Border CONTINUED • border-color • The border-color property is used to set the color of the border. The color can be set by: • name- specify a color name, like "red" • RGB- specify a RGB value, like "rgb(255,0,0)" • Hex - specify a hex value, like "#ff0000" • You can also set the border color to "transparent". • Note: The border-colorproperty does not work if it is used alone. Use the border-styleproperty to set the borders first. W3Schools: border

  48. CSS Box Model: Border CONTINUED A look at border-style and border-color: In the CSS p.one {border-style:solid;border-color:red;} p.two{border-style:solid;border-color:#98bf21;} In the HTML <p class="one">A solid red border.</p> <p class="two">A solid green border.</p> W3Schools: border

  49. CSS Box Model: Border CONTINUED • The border-style property can have from one to four values. • border-style:dotted solid double dashed; • top border is dotted • right border is solid • bottom border is double • left border is dashed • border-style:dotted solid double; • top border is dotted • right and left borders are solid • bottom border is double • border-style:dotted solid; • top and bottom borders are dotted • right and left borders are solid • border-style:dotted; • all four borders are dotted • The border-style property is used in the example above. However, it also works with border-width and border-color. Individual sides - In CSS it is possible to specify different borders for different sides In the CSS p {border-top-style:dotted;border-right-style:solid;border-bottom-style:dotted; border-left-style:solid;} In the HTML <p>Different border styles.</p> W3Schools: border

  50. CSS Box Model: Border CONTINUED • Border Shorthand • To shorten the code, it is also possible to specify all the individual border properties in one property. This is called a shorthand property. The border property is a shorthand for the following individual border properties: • border-width • border-style (required) • border-color • In the CSS • P {border:5px solid red; } • In the HTML • <p>A solid red border 5 pixels thick!</p> NOTE: There are several more CSS border properties I did not mention here. Please refer to All CSS Border Properties in the W3Schools link below. W3Schools: border

More Related