Class notes
SI/ISM 254: CSS and html Style Sheets
- Course
- Institution
- Book
These are my notes/summaries on lecture material regarding CSS
[Show more]
Connected book
Book Title:
Author(s):
- Edition:
- ISBN:
- Edition:
More summaries for
-
Learning Web Design - Chapter 6 (by Jennifer Robbins)
Seller
Follow
ngaschafer
Content preview
Chapter 11: Introducing Cascading Style Sheets (CSS)The Benefits of CSS:
- Precise type and layout control
- Less work: Change look of the whole site with one edit
- Accessibility: Markup stays semantic
- Flexibility: The same HTML markup can be made to appear in dramatically different ways
- Style separates the structure
How Style Sheets Work:
1. Start with a marked-up document (like HTML, but could be another XML markup language)
2. Write styles for how you want elements to look using CSS syntax
3. Attach the styles to the document (there are a number of ways)
4. The browser uses your instructions when rendering the elements
Style Rules:
- Each rule selects an element and declares how it should display
h1 { color: green; }
- This rule selects all h1 elements and declares that they should be green
strong { color: red; font-style: italic; }
- This rule selects all strong inline elements and declares that they should be red and in an
italic font
Style Rule Structure:
- A style rule is made up of a selector and a declaration
- The declaration is one or more property/value pairs (remember to add a semicolon at end)
selector { property: value; }
Selectors: (two examples)
1. p {property: value;}
Element type selector: Selects all elements of this type (p) in the document
2. #intro {property: value}
ID selector (indicated by the # symbol) selects by ID value. In the example, an element with
an id of “intro” would be selected
1
,Declarations:
- The declaration is made up of a property/value pair contained in curly brackets { }:
Selector { property: value; }
Example:
h2 { color: red;
font-size: 2em;
margin-left: 30px;
opacity: 0.5;
}
- End each declaration with a semicolon to keep it separate from the next declaration
- White space is ignored, so you can stack declarations to make them easier to read
- Properties are defined in the CSS specifications
- Values are dependent on the type of property:
o Measurements
o Keywords
o Color values
o More
CSS Comments:
/* comment goes here */
- Content between /* and */ will be ignored by the browser
- Useful for leaving notes or section labels in the style sheet
- Can be used within rules to temporarily hide style declarations in the design process
Attaching Styles to the HTML Document:
1. External style sheets: (focus more on using this one)
A separate, text-only.css file associated with the document with link element or @import rule
link element in HTML: <head>
<title> Titles are required </title>
<link rel=”stylesheet” href=”/path/example.css”>
</head>
@import rule in style sheet: <head>
<title> Titles are required </title>
<style>
@import url (“/path/example.css”);
p {font-face: Verdana; }
</style>
</head>
2
, 2. Embedded style sheets:
Styles are listed in the head of the HTML document in the style element
<head>
<title> Titles are required </title>
<style>
/* style rules go here */
</style>
</head>
3. Inline styles:
Properties and values are added to an individual element with the style attribute
<p> style=”font-size: large;”> Paragraph text ... </p>
OR
<h3 style=”color: red; margin-top: 30px;”> Intro </h3>
Document Structure: Inheritance
Documents have an implicit structure
We give certain relationships names, as if they’re a family:
- All the elements contained in a given element are its descendants
- An element that is directly contained within another element is the child of that element
- The containing element is the parent of the contained element
- Two elements with the same parents are siblings
Inheritance:
- Many properties applied to elements are passed down to the elements they contain. This is
called inheritance
- For example, applying a sans-serif font to a p element causes the em element it contains to be
sans-serif as well:
Some properties inherit; others do not
Properties related to text usually inherit; properties related to layout generally don’t
- Styles explicitly applies to specific elements override inherited styles
- You’ll learn to use inheritance strategically to keep your style rules simple
3
, The Cascade:
- The cascade refers to the system for resolving conflicts when several styles apply to the same
element
- Style information is passed down (it “cascades” down) until overwritten by a style rule with
more weight
- Weight is considered, based on:
o Priority of style rule source
o Specificity of the selector
o Rule order
The Cascade: Priority
Style rules from sources higher in this list override rules from sources listed below them
- Any style marked as !important by the user (to accommodate potential accessibility settings)
- Any style marked !important by the author (of the web page)
- Author styles (style sheets created in web site production)
- User styles (added by the reader)
- User agent styles (browser defaults)
The Cascade: Specificity
- When two rules in a single style sheet conflict, the type of selector is used to determine
which rule has more weight
- For example, ID selectors are more specific than general element selectors
NOTE: Specificity will be discussed once we have covered more selector types
The Cascade: Rule Order
- When two rules have equal weight, rule order is used (whichever rule appears last “wins”)
<style>
p {color: red;}
p {color: blue’}
p {color: green;}
</style>
- In this example, paragraphs would be green
- Styles may come in from external sheets, embedded style rules and inline styles
o The style rule that gets parsed last (the one closest to the content) will apply
4
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller ngaschafer. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $4.84. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
73918 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now