cmpt 165 - github pages · color sets the foreground color value of an element's text content...
TRANSCRIPT
CMPT 165CMPT 165INTRODUCTION TO THE INTERNET INTRODUCTION TO THE INTERNET
AND THE WORLD WIDE WEBAND THE WORLD WIDE WEBBy
UNIT3: STYLESHEETSUNIT3: STYLESHEETS
Hassan S. Shavarani
1
TOPICSTOPICS1. Styles2. CSS Basics3. CSS Properties4. CSS Selectors5. Colors in CSS6. Styling Pages with CSS7. Browser Compatibility8. Separating Content and Appearance9. CSS Fonts [optional content]
10. Interactive Color Mixer [optional content]
2
STYLESSTYLES
CSS (Cascading Style Sheets) language will give usa way to express information about the appearance
of different parts of our content
CSS information (style sheets) will also be edited witha text editor, and saved in ".css" files
3
WHY SEPARATE STYLE INFORMATION?WHY SEPARATE STYLE INFORMATION?CSS will allow us to give all of our site'sappearance information in one placeeven if we have hundreds of HTML files, they canall refer to one CSS fileif we want to make a change in the appearance ofa site, it requires only a single changewe can also have separate people working ondifferent parts of the site
4
CSS BASICS - FIRST PROBLEMCSS BASICS - FIRST PROBLEM
Let's say we want to use CSS to change theheadings on the page
we want the <h2> elements to be centred (instead of the default left-justified)
and in an italic font
5
CSS BASICS - FIRST SOLUTIONCSS BASICS - FIRST SOLUTION
make a new file call it firststyle.cssh2 { text-align: center; font-style: italic; }
In this example:h2 {...} block is a CSS rule"h2" in the CSS is a type selectortwo lines in the curly braces are CSS declarationseach of which defines a property and a value
6
<LINK> TAG<LINK> TAG
Let's link the generated CSS file to the HTML codes<head> <meta charset="UTF-8" /> <title>Page with a style sheet</title> <link rel="stylesheet" href="firststyle.css" /> </head>
7
LETS APPLY THE CSS [LETS APPLY THE CSS [ ]]
* images from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/withstyle[1/2].png
**
8
CSS BASIC RULE SYNTAXCSS BASIC RULE SYNTAX
* from
selectorlist { property: value; [more property:value; pairs] } ... where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
9
TEXT-ALIGNTEXT-ALIGNtext-align describes how inline content like text is aligned in its parent blockelementtext-align does not control the alignment of block elements, only their inlinecontentlook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
10
FONT-STYLEFONT-STYLEfont-style CSS property specifies whether a font should be styled with a normalor italic face from its font-familylook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
11
FONT-WEIGHTFONT-WEIGHTfont-weight CSS property specifies the weight (or boldness) of the fontlook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
12
COLORCOLORcolor sets the foreground color value of an element's text content and textdecorationscolor also sets the currentcolor value, which may be used as border-colorlook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/color
13
BACKGROUND-COLORBACKGROUND-COLORsets the background colour (behind the text) for the elementlook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
14
BORDER PROPERTIESBORDER PROPERTIESused to control the border around an element (width of the line, type of line, andcolour of line, respectively)used to set the border attributes of an element including border-width, border-style, and border-colorlook at the border property demos at
https://developer.mozilla.org/en-US/docs/Web/CSS/border-widthhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/border-color
15
BORDER PROPERTIESBORDER PROPERTIES
border properties can be used separately or as ashorthand property border to combine these into one
line (giving the three values in any order)figure { border-style: solid; border-width: 3px; border-color: red; }
figure { border: solid red 3px; }
16
LINE-HEIGHTLINE-HEIGHTsets the amount of space used for lines, such as in texton block-level elements, it specifies the minimum height of line boxes within theelementon non-replaced inline elements, it specifies the height that is used to calculateline box heightlook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
17
FONT-FAMILYFONT-FAMILYspecifies a prioritized list of one or more font family names and/or generic familynames for the selected elementsthe list of fonts are tried in-order until the browser finds one available on theuser's systemthere are six generic font families and your list must end with one of them sinceit's guaranteed to worklook at the demo at https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
18
CSS BOX MODELCSS BOX MODEL
<h2>Element Contents</h2> Exampleh2 { padding: 1em; border: medium dashed black; background-color: grey; }
Next contents can start here.
Background
Border
Padding
Margin
Width Height
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/boxmodel.svg
19
CSS UNITSCSS UNITSem
The current font size: if the current text is 12 point then thiswill be 12 points. Another unit, an ex is half the text size.
pxOne screen pixel (dot) on the display. (Note: for some veryhigh resolution devices, real “pixels” are very small, so thislength is adjusted to be close to the size of a pixel on atraditional display.)
mmA millimetre. There are also units for centimetre, inch, etc.(Note: this is the browsers best guess, but might beinnacurate depending on the scaling of thedisplay/projector/phone/etc. For example if you display yourscreen on a projector, the “millimetre” suddenly becomesmuch larger.)
20
HTML EXAMPLE CODEHTML EXAMPLE CODE
21
CSS EXAMPLE CODECSS EXAMPLE CODEbody { font-family: "Helvetica", sans-serif; } h1 { text-align: center; font-weight: bold; background-color: silver; color: teal; padding: 0.25em; } h2 { border: medium dotted teal; font-weight: normal; padding: 0.1em; }
22
EXAMPLE CODE RESULTEXAMPLE CODE RESULT
* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/css-prop-result.png
* try the result at css-prop-page.html
23
