-
Two aspects of any document
- content - information to be presented
- style - how information is presented
-
CSS advantages
- separation of content from presentation
- site wide consistency
- reduce data stranger over a network
- easy to reformat pages for device portability
- better accessibility
-
HTML's main goal is to define content, what is the defining style
- Cascading Style Sheets 3 (CSS3)
- Used to specify the presentation of elements separately from the structure of the document
-
-
Pseudo Classes
- Give access to information not declared in the HTML document
- ex.
- a:visited *visited link
- a:hover *mouse over link
- a:active *selected link
- a:link *unvisited link
-
Style classes
- style declarations are preceded by a period
- .special { color: purple;}
<h1 class = "special"> Deitel & Associates, Inc.</h1>
-
Parent v. child styles
Styles for child elements have higher specificity and take precedence over styles defined over their parent elements
-
Styles can be defined by
- Author (developers) a user, or user agent (browser)
- Author TPO user TPO user agentĀ
- TPO - take precedence over
-
External style
- styles defined in external style sheets
- apply to all html documents on a site
- <link rel="stylesheet" type = "text/css" href = "styles.css"/>
-
font-size
- relative size preferred over point size
- xx-small, x-small, small, smaller, medium, large, x-large, xx-large
- Or point size
- p{font-size: 0.4em}
- em is the size of the letter M
-
CSS font-weight possible values
- bold, norma, bolder, lighter
- boldness can be specified by number from 100-900
-
Embedded styles
- styles declared in HTML document's head section
- Apply to entire html document
- Must be in head element
-
Inline styles
- styles declared in HTML elements
- only apply to elementĀ
- Do not separate presentation from content
- <p style = "font-size: 20pt; color:deepskyblue;"> this is inline </p>
-
-
Text-decoration
underline, overline, line-through, blink
-
text-indent
indents the first line of text in the element by the specified amount
-
Text align
center align, left right
-
Positioning property
allows absolute positioning,which provides greater control over where on a page an element resides
-
z-index
- allows developer to layer overlapping elements
- elements with higher z-index values are displayed in front of elements with lower z-index values
-
Animation 6 parts
- {animation: name timing-function duration delay iteration-count direction;}
- name - of animation
- timing-function - linear, ease, ease in , ease out, cubic bezler
- duration - time
- delay - time after page loads it starts
- iteration-count
- direction - normal, alternate
- @keyframes animationname
- {
- 0% {opacity: 0; left: 50px; top:0px;}
- }
-
Browser compatible extensions
- -webkit: on webkit based browsers like chrome, safari, android and IOS browsers
- -moz: mozilla firefox
- -ms: only Microsoft browsers
-
inline-level elements
- do not change the flow of the document
- img
- a
- em
- strong
- span - groups elements, no formatting, creates container for CSS rules or id attributes for a section
-
Block level elements
- displayed on their own line
- have virtual boxes around them
- p
- all headings (h1-h6)
- div - grouping like span, but it's block level
-
CSS can control the backgrounds of block level elements by adding
- background-color
- backrground-image
-
background-image property
specifies the url of the image
-
background-position property
places image on the page using the values top, bottom, center, left and right
-
Background-repeat property
- tiling of the image
- no-repeat - just one copy
- repeat - tiles vertically and then horizontally
- repeat-x tiles only horizontally
- repeat-y tiles only vertically
-
Padding
- determines the distance between the content inside an element and the edge of the element
- padding-top, padding-right, etc
-
Margin
- Determines the distance between the lament's edge and any outside text
- transparent can't make it a color
- margin-top, margin- left etc.
-
Border is controlled using
- border-width: thin, medium, thick
- border-color
- border-style: hidden, rotten, dashed, solid, double
-
Display property
Lets programmer decide if an element is displayed as a black element, inline element, or is not rendered at all
-
Text-shadow property
- adds text shadow to any text
- Property has 4 values: horizontal and vertical, offset, blur radius, and color
- h1 {text-shadow: -4px 4px 6px dimgrey;}
-
Box-shadow property
- Adds shadow effect to any block-level element
- same 4 property values
- h1{box-shadow: 25px 25px 50px dimgrey
|
|