cascading style sheets cyndi hageman. applying a style sheet in-line style – used within the html...
Post on 20-Dec-2015
220 views
TRANSCRIPT
Cascading Style SheetsCyndi Hageman
Applying a Style Sheet In-line style – used within the HTML tag Embedded Style Sheet – located in the HTML
document in the <style></style> tags Imported – external .css file imported by putting
@import {url(“styles.css”)} in the style tags Linked – external .css in a link tag
<link rel=“stylesheet” type=“text/css”href=“styles.css”>
Order of Precedence In-line styles Embedded styles Imported style sheet Linked style sheet
Class Used to create a style that can be applied to
many different HTML elements
.sectionhdr {color:blue;font-size: 14pt}
ID Used to set the style for specific id of an
element on a page. ID’s are unique and cannot be repeated on a page. They can be reused on different pages so the style sheet will apply throughout a web site.
#divhdr {background-color:green; text-align:center}
Comments You can add HTML comment tags to ensure older
browsers that do not understand <style> will not get confused<style><!—
put style info here--></style>
You can put comments in a style sheet by placing your comm/ent inside /* */
/*Use this style for all section headers*/
Inheritance Child elements inherit the styles of the parent
elements if those styles are not set for the child element.
Child elements are contained within other elements
Parent elements contain other tags – such as the <body></body>
Deprecated Elements HTML elements that are no longer used and
are replaced by styles.
Modularity The ability of a single document to incorporate style
information originating from multiple sources and serving multiple purposes
Author – sets styles through .css files, in-line styles or embedded styles
User – can set their own stylesheet by clicking Tools/Options/Accessibility and checking Format documents using my style sheet
Browser – each browser is set differently and can be affected by display settings, resolutions and monitor dimensions
Units of measurement Pixels - px Point – pt Inches – in, centimeters – cm, millimeters –
mm em – calculated based on the default size. If
default is 14px then 1.5em is 14*1.5 Xxsmall, small, large, xxlarge Percentages - %
Margins margins: 5px
margins: 10px 5px 2px 1px(top, right, bottom, left)
margin-top, margin-bottom, margin-left, margin-right
Negative Margins Used to offset an element from it’s parent
element For example, the negative setting for a <h1>
will move it back from it’s original positionbody {margin-left:5%}h1 {margin-left:-3%}
Padding Sets the space between the element content
and the margin You can set the padding universally
h1 {padding:5px} You can set each side individually
h1 {padding-left:5px; padding-right:10px; padding-top:2px; padding-bottom:3px}
Font Families Used to set which fonts will be used for an
element Generic font families are a catch all and
should be included as a back-up Serif – some version of Times New Roman Sans-serif - some version of arial or Helvetica Monospace – some version of Courier Cursive – browser determined – avoid Fantasy – browser determined - avoid
Font Families (cont.) You can list specific fonts
body {font-family: Arial, Helvetica, sans}
Font Color You can set the color by using the color style
h1 {color:navy} You can set the color value different ways
Word – red, blue, orange, green, aqua Rgb – color: rgb(255,255,204) Hexadecimal – color: #FFFFFF
Background color Background-color: blue
Monospace fonts Font in which all the characters are the same
width Courier or Courier New
Font-Size Sets the font size of an element
body {font-size:10pt} Can use any absolute measurement to set your
default. You can use a calculated measurement to make enhance an element
Font-Weight Default is normal Used to make things bold
span {font-weight:bold}
Font Style Default is none Used to make things italic
span {font-style:itlaic}
Text Decoration Used to apply an underline or overline
a {text-decoration:none}a:hover {text-decoration:underline}
Letter Spacing Allows you to set the spacing between letters
h1 {letter-spacing: 0.5em}
Word Spacing Sets the amount of space between words in an
elementh1 {word-spacing: 0.5em}
Text Indent Indents the first line of an element
p {text-indent: 5px}
Text Alignment Used to align the content with the element
td {text-align:center} Can align center, left, right or justify
Text Transform Transform all the text in an element to upper
or lower caseh1 {text-transform: uppercase}
Background Image Sets the background image for an element
.flower {background-image: url(“flower.jpg”)}
Background images are defaulted to repeat. If you want to change this you need to set the background-repeat style Repeat the x axis – background-repeat: repeat-x Repeat the y axis – background-repeat:repeat-y No repeat – background-repeat: no repeat
Lists List-style-position: outside or inside
Outside – default – blocks the text Inside – wraps the text around the bullet
List-style-image: url(“mybullet.gig”) List-style-type
None – no marker Disc – solid circle Circle – empty circle Square – solid square Decimal – 1,2,3,etc Lower roman – i,ii,iii, iv, etc Upper roman – I,II, III, IV, etc
Lists (cont.) Bullet separation – space between the bullets
can be set using the padding styleul li {padding: 1.5%}
Nested lists – can define each level of nested lists in your style sheetul {list-style-type: circle}ul ul {list-style-type:square}ul ul ul {list-style-type:disc}
Definition Lists Used to create a glossary of FAQ <dl> data list <dt>data term <dd>
Border Style You can set the border-style
Double Dotted Dashed Groove Ridge Inset outset
Border Width You can set the border by your usual units of
measurement You can also use keywords
Thick Thin medium
Border color You can set border-color using the same types
of color definitions as you set the font color
Positioning Absolute – sets the position on the page
within its containment block. Relative – sets the position on the page
relative to it’s containment block. Used to overlay objects
Set the top, bottom, left or right position with these values
{position:absolute; top:10px; left:30px}
Tables Cellpadding – can be set by usinig the padding style
for the <th> or <td> Cellspacing – can be set by setting border-
collapse:collapse then setting the border-width and border-spacing
Vertical alignment of text can be set to a <td> Top, bottom, center
Horizontal alignment of text can be set using the text-align for a <td>
Display Displays an element No whitespace is reserved Set to none, the element does not display Set to “” the element will display
Visibility Can make something visible or not Whitespace is reserved on the page for that
element To hide an element set the visibility: hidden To show the element set the visibility: visible