Class Attribute
• The class attribute is used for optional styles
.Warning { font-weight: bold; color: red;
dot character

A paragraph

border:2px solid red;}

A paragraph with
red text and a red border

A paragraph

Copyright © Ellis Horowitz 1999-2022 16

Id Attribute
• The id attribute is also used for optional styles
– but it can only be used ONCE in the entire document
• Normally used for major document sections – Header, Footer, TopNav, LeftNav,
– Content, etc.
#Disclaimer { font-size:medium;
color: #ff9900;
border:1px dotted red;}
# character

A paragraph

A paragraph

Your home is at risk if you
do not keep up repayments on a mortgage
or other loan secured on it.

Copyright © Ellis Horowitz 1999-2022 17

Specific Styles
• Styles aimed at specific tags
ul { color: red; }
ul ul { color: gray; }
ul ul ul { color: black }

• Sub-list item in gray
• Sub-sub-list item in black
• List item in red

Copyright © Ellis Horowitz 1999-2022 18

More


This is a normal H2 heading




An H1 heading using class biggreen, small font, green letters





An H1 should have a large border and centered




This H1 should have small border, right aligned


This is text set in the default font.

Copyright © Ellis Horowitz 1999-2022 19

Browser Output
Safari Chrome Firefox
Copyright © Ellis Horowitz 1999-2022

HTML Block Tags
•

and tags have no initial presentation properties
– exception, line break before and after a

tag – applies to inline elements (example: ) –

applies to block elements (example:

)
• With CSS, properties such as text-align are “inherited” from the parent element





first paragraph within DIV is right justified …

second paragraph within DIV is right justified …

third paragraph not in DIV is left justified.
Copyright © Ellis Horowitz 1999-2022 21

Browser Output
Firefox Internet Explorer Chrome
Copyright © Ellis Horowitz 1999-2022

Precedence (specificity) of Style Settings
• The more precise a specification is, the higher the precedence, i.e., the more likely it is used
– H1.mypars {text-align: center} – .biggreen {text-align: center} – H1 { text-align: center}
• a style for tag.class has higher precedence than one for .class, which has higher precedence than a style for the tag itself
• styles defined using a “style” attribute (inline) have highest precedence
• styles defined using
Copyright © Ellis Horowitz 1999-2022 28

Style Sheet Media Types
• Used in CSS3 for media queries
• See Responsive Design later in the course
• Example: Target specific physical characteristics of device. • Example: two equivalent pair of media queries

Copyright © Ellis Horowitz 1999-2022 29

Recognized Media types
• all – Suitable for all devices (CSS3)
• braille – Intended for braille tactile feedback devices.
• embossed – Intended for paged braille printers.
• handheld – Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
• print – Intended for paged, opaque material and for documents viewed on screen in print preview mode. (CSS3)
• projection – Intended for projected presentations (
• screen – Intended primarily for color computer screens.
• speech – intended for speech synthesizers (CSS3)
• tty – Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.
• tv – Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
• 3d-glasses – Intended for 3D Glasses like Oculus VR and Google Cardboard.
Copyright © Ellis Horowitz 1999-2022 30

Pseudo Elements and Pseudo Classes
• pseudo elements and pseudo classes are ways of assigning style properties independent of the document tree
• pseudo-classes
– :link – a normal, un-visited link
– :visited – a link the user has visited
– :hover – a link when the user mouses over it – :active – a link the moment it is clicked
• Example, given the style definition

a:link {color:#FF0000;} /* unvisited link (red)*/ a:visited {color:#00FF00;} /* visited link (green)*/ a:hover {color:#FF00FF;} /* mouse over link (pink)*/ a:active {color:#0000FF;} /* selected link (blue)*/


• See https://www.w3schools.com/css/css_pseudo_classes.asp https://www.w3schools.com/css/css_pseudo_elements.asp
Copyright © Ellis Horowitz 1999-2022 31

Pseudo Elements and Pseudo Classes (cont’d) • Look up the meaning of these other pseudo elements and pseudo
classes http://www.w3.org/TR/CSS2/selector.html#pseudo-elements • pseudo classes
– :first-child, Selects every

elements that is the first child of its parent
– :hover, Selects links on mouse over
– :active, selects the active link
– :focus, selects the input element which has the focus
– :lang, selects every

element with a lang attribute
• pseudo elements
– :first-line, add a special style to the first line of a text
– :first-letter, add a special style to the first letter of a text
– :before, to insert some content before the content of an element
– :after, to insert some content after the content of an element Copyright © Ellis Horowitz 1999-2022 32

Pseudo Elements Example
• From W3Schools https://www.w3schools.com/css/tryit.asp?filename=trycss_firstline
Copyright © Ellis Horowitz 1999-2022 33

Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. The following diagram shows how these areas relate, and the terminology used to refer to pieces of margin, border, and padding
Copyright © Ellis Horowitz 1999-2022 34

Example of Margins, Padding, Borders



• First element of list
  
• Second element of list is longer to
  illustrate wrapping.
  Copyright © Ellis Horowitz 1999-2022 35

  Copyright © Ellis Horowitz 1999-2022 36

  Browser Output
  Safari Chrome
  https://csci571.com/examples/css/margins.html
  Copyright © Ellis Horowitz 1999-2022 37

  CSS Vendor Prefixes
  • CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features during a testing and experimentation period.
  • Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized
  • The CSS browser prefixes are:
  – Android: -webkit-
  – Chrome: -webkit-
  – Firefox: -moz-
  – Internet Explorer: -ms-
  – iOS: -webkit-
  – Opera: -o-
  – Safari: -webkit-
  • E.g., before HTML 5, to set a rounded corner on a box one would have to write
  -moz-border-radius: 10px 5px
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 5px;
  border-radius: 10px 5px;
  Copyright © Ellis Horowitz 1999-2022 38

  Style Sheets Are Pervasive
  • espn.com:
  – page.css:
  • cbsnews.com:
  – videocontrol.css:
  • microsoft.com:
  –
  • Style sheets are often used for “branding” & for changing the look-and-feel
  • Use Firefox Web Developer Inspector or Chrome Developer Tools to view CSS in Style Editor
  Copyright © Ellis Horowitz 1999-2022 39

  • A CSS Reset is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
  • Every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible.
  – For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything.
  • The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
  • Reset styles quite often appear in CSS frameworks
  • See http://www.cssreset.com/ for several actual code examples
  Copyright © Ellis Horowitz 1999-2022 40

  One Sample of css reset
  /* http://meyerweb.com/eric/tools/css/reset/
  v2.0 | 20110126 License: none (public domain)*/
  html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, sec

  程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com