chp 3. Working with Cascading Style Sheets
Computer Science 205 with Hooper at University of Alabama - Tuscaloosa
About this deck
By: Anna Claire Hoffman
Textbook:
Internet & World Wide Web: How to Program (4th Edition)
Created: 2011-02-14
Size: 28 flashcards
Views: 13
Textbook:
Internet & World Wide Web: How to Program (4th Edition)Created: 2011-02-14
Size: 28 flashcards
Views: 13
About StudyBlue
STUDYBLUE makes things that make you better at school.
Things like online flashcards with photos and audio.
Things like personalized quizzes and friendly reminders about when (and what) to study next.
Think of it as a digital backpack™: access to all of your study materials online and on your phone.
STUDYBLUE exists to make studying efficient and effective for every student, for free. Join us.
“I have used this website for three exams, and I see a huge difference in my test results.”
Naj
Naj
Sign up (free) to study this.
CCS
- cascading style sheets apply the design and layout of a certain page to all other linked pages.
- similar to making a template
- 3 main styles: inline,embedded,external
Inline Style Sheets
- style applied directly to an element
- <h1 style="text-align: center; color= red">Sunny Day</h1>
- easy to interperate
- aren't consistent with the goal of seperating content from style
embedded style sheet
- collection of all styles in the document that is placed in the head section of the document
h2, h3 {text-align: center; color:red}</style>
external style sheet
text file that contains style declarations
style precedence
- rule that determines which style is applied when one or more styles conflict
- more specific the style the more precedence it has over a general style
- user defined styles
- inline styles
- embedded style sheet
- external style sheet
- internal style sheet
style inheritance
- when there is no conflict, styles are passed down from more general levels to more specific
- ex: Body {color:blue} every element or text in the body would be blue
color value
numerical expressions of a color
RGB Triplet
each color represented by a triplet of numbers whose values are based on the strength of its red, green, and blue component
hexadecimal
6 digit color code
background-color
<style type="text/css">
h2, h3 {color: white; background-color:blue}
</style>
specific font
font actually installed on a users computer. ex: times new roman
generic font
- groups fonts similar in appearance in 5 groups
- serif
- sans serif
- monospace
- cursive
- fantasy
font size: length
Font size can be adjusted in 4 different ways
- unit of measurement
- keyword description
- % of the size of the containing element
- keywords expressing size relative to something else in the document
absolute units
- units fixed in size regardless of the device rendering the web page
- mm
- cm
- in
- pt
- pc
relative units
- expressed relative to the size of other objects
- em unit: h1{font-size: 2em}
- relative units makes your page scalable
kerning
- amount of space between characters
- letter-spacing:__
tracking
- amount of space between words
- word-spacing:__
leading
- space between lines
- line-height:__
hanging indent
extending the first line to the left of the next block
GIF( Graphics Interchange Format)
- limited to 256 colors
- transparent colors
- best for clip art
splash screen
web page containing interesting pics that introduces a website
JPEG(Joint Photographic Expert Group)
16.7 million colors
PNG(Portable Network Graphics)
- same features as GIF
- plus file compression
- transparent color
- 16.7 million colors
Background image
Body style="background-image:me.jpg"
floating
- places image alongside margin or anywhere on the page and allows the text to wrap around the photo
- float:right
box model
- describes the structure or page elements as they are laid out on the webpage.
- margin between element and other page content
- border contains element content
- padding between elements content and box border
- content of the element intself
Div containers
- different sections of a page which you can then resize and float to create different page layouts
<body>
<div id="outer">
kjaslkdsakjglk'lskajds'lkajf'lskjd'slkjdlksjf
</div>
About this deck
By: Anna Claire Hoffman
Textbook: Internet & World Wide Web: How to Program (4th Edition)
Created: 2011-02-14
Size: 28 flashcards
Views: 13
Textbook:
Internet & World Wide Web: How to Program (4th Edition)Created: 2011-02-14
Size: 28 flashcards
Views: 13
About StudyBlue
STUDYBLUE makes things that make you better at school.
Things like online flashcards with photos and audio.
Things like personalized quizzes and friendly reminders about when (and what) to study next.
Think of it as a digital backpack™: access to all of your study materials online and on your phone.
STUDYBLUE exists to make studying efficient and effective for every student, for free. Join us.
“I have used this website for three exams, and I see a huge difference in my test results.”
Naj
Naj