Webpages with Style Dr. Steven Bitner Comments from HW #1 Image - - PowerPoint PPT Presentation
Webpages with Style Dr. Steven Bitner Comments from HW #1 Image size large images take a long time to download, try compressing images for web page use. Be wary of generated html, it is usually bad. Default file for a webpage is
Image size – large images take a long time to download, try
compressing images for web page use.
Be wary of generated html, it is usually bad. Default file for a webpage is index.html unless otherwise
specified on the server.
Be mindful of closing tags as well as closing empty tags.
<link rel="icon"
type="image/png" href="/references/images/icon.png" />
Cascading Style Sheets HTML was not intended to control how things looked, but
rather to mark content
CSS is designed for designing Cascading Style Sheets do just that…cascade
Selector such as h1 Attribute Value Comments are just like multi-line C (or PHP) comments
tagname
E.g. h1 { }
For example you may want all hyperlinks to be red in stead of
blue
#id
E.g. #surveyForm { }
Lets you define the style for a certain element Lead with # character to let the browser know this is the
style for an id
Useful for things such as a navigation div which may contain
an unordered list different from any other such list
.class
E.g. .surveys { }
Groups of elements can all have the same style Lets you define the style for a class of elements Lead with . character to let the browser know this is the style
for a class of elements
Truly no better than using traditional HTML 3.2 attributes Mixes style and content <h1 style=‘color:#ff0000;’>Nooooooooo!</h1> No better than <h1 color=‘red’>Old way</h1> Do not do this!
If not much styling is applied, this may be a decent option Included between <head> </head>tags <style type="text/css"></style>
Same format as document head CSS, but stored in a separate
file
Most preferred way since it keeps pages cleaner The only way to utilize CSS that truly cascades <link rel="stylesheet" type="text/css" href="style.css" />
The more specific the CSS, the higher the priority
1.
In-line
2.
Internal
3.
External
Exception:
If the external style sheet is referenced after the internal style is defined.
Be careful of tag case.
This goes beyond just being compliant, but also note that, for
example, <B> and </b> are not the same things and for more complex pages, you will not get what you want on the screen consistently.
Be mindful of closing tags.
A couple of folks left off </table>
You can spend hours trying to figure out why stuff isn’t where you put it
Try to clean up extraneous stuff
It may not matter now, but having extra markup can affect the
maintainability of your code and could cost you or your clients money.
Can apply CSS to a multitude of selectors div,p { }
Will apply to all divs and all paragraphs
div p { }
Will apply to all paragraphs within a div
div>p { }
Will apply to all paragraphs who’s parent is a div
div+p { }
Will apply to all paragraphs that immediately follow <div> tags
http://csszengarden.com/
background-color:X;
Can be a hexidecimal value ‘#ff0000’ is red Can be a decimal value ‘rgb(255,0,0)’ is red Can be a color name ‘red’ is red
background-image:url(‘imageFile.png’);
Default is for the image to repeat, tiling the entire page.
background-repeat:X;
Can be ‘repeat-x’ Can be ‘repeat-y’ Can be ‘no-repeat’
background-position:X;
Options are top, bottom, center, right, left or inherit
Or you can do it all at once:
background:X
Y Z;
color:X; text-align:X;
Can be left, right, center or justify
text-decoration:X;
none, overline, underline, line-through, blink
text-transform:X;
lowercase, uppercase, capitalize
vertical-align:X;
Lots ofoptions; top, middle, bottom, sub and super
white-space:X;
pre option makes an element the same as <pre></pre> tags
text-indent:X;
controls the indenting of the first line of text
font-family:X;
Start with the preferred font but you can include more general
fonts in case the users browser doesn’t support
e.g. font-family:”Times New Roman”, Times, serif; or
font-family:"Courier New", Courier, monospace
font-style:X;
Let’s you make italic text
font-size:X;
Cross browser compatibility requires you to set font-size:100%;
for the body
Better to use em than px since em resizes properly when a user
zooms.
font-weight:X;
Can make bold text,as well as bolder or lighter text Can specify weight on scale from 100-900 where 400 is normal
and 700 = <b></b>
Or combine as font:X
Y Z;
Can define styles for:
link visited hover active
Style how list elements are displayed list-style-type:X;
Different shapes for <ul></ul>
disc, circle, square…
Different numbering types for <ol></ol>
lower-alpha, upper-roman…
Can also use none for both list types to remove any markings list-style-image:X;
border-collapse:collapse; text-align vertical-align padding border Other attributes for background and text are usable too
Not the same as border Does not count as part of the element’s dimensions Can be useful for CSS debugging, though typically browser
specific tools are more useful (such as inspect element in Chrome)
display:X;
inline, block, none, table-row, etc
inline takes up the width necessary for display block takes up all width possible and adds a new line before and after table-row can be useful when hiding and then un-hiding rows in a table none completely collapses the element
Can also use visibility:hidden;
Does not collapse the element, still takes up space
Static
Default Items flow based on content No overlap with other static elements
Fixed
Will overlap with other elements Does not scroll
Can be useful for table headers on long tables Useful for navigation bars that should always be visible
Relative
Positions the element relative to its normal position The original space reserved for the element is still reserved in
the page flow
Can overlap
Absolute
Allows for exact specification of location Positioned relative to the first parent element that is not the
default (static) positioning type
Does not hold a space in the document layout
Therefore, it overlaps
Set the z-index:X; attribute in order to specify the order of the
elements.
A higher z-index means that the element appears in front of those with a
lower z-index.
By default, the last element added is on top and so forth
cursor overflow left (right, top, bottom) clip
Only rect available
Horizontal alignment Following content will flow around it float:left;
Stacks elements from the left and all following content will
appear to the right of it
float:right;
Elements stack from the right and all following content will
appear to the left of it
Needed to start content on a new line after floating elements usually clear:both; is used, but can specify if you only want to
insert the element below left or right floating elements
Using block level elements or <br /> tags will not
Tall images, short text lines
Center block elements
use margin-left:auto; margin-right:auto;
Use absolute or fixed positioning Use float
: Already saw this with links – a:hover { } Other useful pseudo-classes include
first-child nth-child(argument)
Can be even, odd, or n type such as 2n+3
first-letter focus
Form input element
@media
print screen handheld
[attribute]
e.g. [title]
[attribute=value]
e.g. input[type=text]