CCT260H - Christopher Evan Jones 1 CCT260H Styles and Colours
CCT260H - Christopher Evan Jones2 In Last Labs Introduction to Elements and Tags Basic Structure of a Web Site Ensure you’re familiar with these tags: … …
CCT260H - Christopher Evan Jones3 Attributes Tags can contain attributes Attributes provide contextual information, just as giving it a style or unique identifiers Always apply them to the first tag Attributes also allow for JavaScript actions Discussed later in this courseDiscussed later in this course
CCT260H - Christopher Evan Jones4 Attributes id must be unique throughout the page class associates or groups tags together Title of Section One Title of Section One <p> This is section one. Next will be section two. section two.</p></div>
CCT260H - Christopher Evan Jones5 Styles and HTML HTML originally was never meant to depict style It was created to provide semantic value to text Hence the argument over and tags rendering differentlyHence the argument over and tags rendering differently Cascading Style Sheets (CSS) was created to resolve this missing piece And stop the abuse of HTML to conduct formattingAnd stop the abuse of HTML to conduct formatting
CCT260H - Christopher Evan Jones6 Styles Styles define how an element will appear Styles can be applied at five levels Element LevelElement Level Class LevelClass Level Element/Class (Instance) LevelElement/Class (Instance) Level ID LevelID Level In-Line Level (rarely used and considered poor form)In-Line Level (rarely used and considered poor form)
CCT260H - Christopher Evan Jones7 Element Styles <html><head> body{ background-color: orange; }</style></head> … … Style you are defining Start of definition End of definition PropertyValue
CCT260H - Christopher Evan Jones8 Cascading Styles Styles are in inherited from parent elements body { background-color: orange; } p { font-weight: bold }.red { color: red } The background is orange bold text that is red back to normal Class definition will change all elements with the same class name
CCT260H - Christopher Evan Jones9 Colours Colours can be defined by name or value red = rgb(255,0,0) = #FF0000 color property will set the text background-color property will set the background Colours are important: Sets mood and possesses semantic meaning Sets mood and possesses semantic meaning
CCT260H - Christopher Evan Jones10 Font Family There are only a dozen fonts uniform across browsers and systems Set the style of font by using the font-family property: body{ font-family: “Times New Roman’, “Times”, “serif”; } Remember to have dropdown fonts
CCT260H - Christopher Evan Jones11 Font size Explicitly by using “em”s, “pt”s or “px”s Implicitly using percentiles: 100%, 60% etc. Ems are relational to the font px are screen sizes, but doesn’t work in older browsers dealing with accessibility I suggest using em: font-size: 1.2em;
CCT260H - Christopher Evan Jones12 Text Layout text-align: [left|center|right|justify] text-decoration: [underline|line-through] text-indent: 50px
CCT260H - Christopher Evan Jones13 Lab Two Proper format the paragraphs (indentation and justified) Centre Titles Change the overall font and size Use a span to change in-line citation style Select a comfortable colour palette
CCT260H - Christopher Evan Jones14 Play Online editor =trycss_default =trycss_default CCS reference