#CSS
Styles are applied in cascading order. Therefore css set on a <p> for example will get overridden by css that comes after it.
If you set a property in a parent element, any child elements will also inherite those styles unless you override them.
<article class="featured">
<p> HI there</p>
</article>
.featured {
color: black;
}
In this case all text will be black. To override the color of the paragraph, use a nested selector
.featured p {
color: blue;
}
If an id and a class are trying to set the same style on a selector, which one gets used and which one gets overridden?
<div id="content" class="featured">
<p>Hi there</p>
</div>
#content {
color: blue;
}
.featured {
color: black;
}
0 (inline sytles?), 0 (# of id selectors), 0 (# of class selectors), 0 (# of element selectors)
Example:
p { color: blue; } 0,0,0,1
.intro { color: black;} 0,0,1,0
#header { color: red; } 0,1,0,0
<h1 style="color: green;">Hi</h1> 1,0,0,0
In this example, the class slector will override the element selector, the id slector will override the class selector and the inline style will override the id selector. If you mark any of these with an !important value added to a selector will override all of them.
A more complex example:
Two class selectors, one element selector:
.intro p.article { color: blue; } 0,0,2,1
Two class selectors, two element selectors:
.intro ul li.active { color: black; } 0,0,2,2
In this case the 2nd styling will override the 1st.
#header { color: red; } 0,1,0,0
In this case, the id selector will override the previous two stylings. This is why it's important to keep using id selectors to a minimum.
<section id="content">
<p class="featured">Hi</p>
<p>hello</p>
</section>
This sytling is making both paragraphs blue: 0,1,0,1
#content p {
color: blue;
}
Simply using a class selector won't change the "featured" paragraph: 0,0,1,0
.featured {
color: black;
}
To make it more specific and override the initial rule: 0,1,1,0
#content .featured {
color: red;
}
Every element on the page is outlined by a concept called the box model
a) content area
b) padding area
c) border area
d) margin area
The total width of an element on the page is the sum of the widths of each box model property:
box width = content-width + padding-width + border-width
More often than not, you'll know the box width but need to figure out the content width:
.downhill {
border: 1px solid #fff;
padding-left: 14px;
padding-right: 14px;
width: ?;
}
340px box-width
(28px) padding-width
(2px) border width
-----------------------
310px content-width
Defaults to visible which allows content to extend beyod the container boundaries.
overflow: auto; Adds scrollbars when necessary, doens't change size of container
position: static / relative / absolute / fixed
A position value set to anything other than static is said to be positioned.
Once an item has been position, we can use the top, left, right, bottom, properties to move that element depending on what type of positioning we've applied.
**Relative Positioning **
When an item is positioned relatively, items will be rendered as though they are static but then we can use the top, left, right, bottom properties to move it around.
**Absolute Positioning **
When an item is positioned absolutely, it takes that item outside of the normal document flow and allows us to manually position it within the document.
<article>
<h2>New Snowshoes</h2>
<h3>By: Danny</h3>
<p>words</p>
</article>
h3 {
position: absolute;
right: 10px;
top: 10px
}
|------ <article> ----|
words words words
words words words
words words words
words words words
|--------- window --------------|
You would expect that the <h3> would be positioned at the top-right corner of the article, but since the article isn't positioned, the <h3> will instead be position at the top-right corner of the window. When an element is positioned absolutely, it's going to be scoped to the window unless it falls under an element that is positioned.
article {
position: relative;
}
If we have an element that needs to be positioned but we don't intend to move it, we can set it to position relative. Now our <h3> will be at the top-right corner of our article.
Fixed Positioning
This will affix the item to a specific place on the window, where it will stay regardless of scrolling. Unlike absolute positioning, we can not scope a fixed positioned item to a container on a page.
.ski {
position: fixed;
right: 10px;
top: 10px;
}
When you have multiple positioned items on a page, it's possible that they might overlap. It's important to take under consideration in what order they'll overlap.
Example: Both of the images below are overlapping because they are positioned
<article>
<img class="ski" src="ski.jpg" alt="ski" />
<img class="sled" src="sled.jpg" alt="sled" />
</article>
.ski, .sled {
z-index: 1;
}
If the elements have NO z-index or the SAME z-index, the element that comes 2nd in the html will appear to be above the first.
.ski {
z-index: 1;
}
If only our ski element had a z-index it'll appear above the sled image.
Block elements such as <div> <p> <ul> <ol> <li> <h*> will:
-
Stretch the full width of its parent container
-
Behave as though there's a line break before and after the element
-
And allow you to manipulate the full box model
Inline elements such as <span> <a> <em> <img> <strong> will:
-
Be found within block-level elements
-
Do not take up the full width of the container, just the content inside of them
-
Do not generate a line break before or after thier content.
Not default, but you can set an element to be inline-block using css
-
Only take up the width of the content inside of them
-
Behaves like a block element because you can manipulate the box model.
There are different ways to horizontally center an element depending on the display type.
- Block level element
Define a width to the element that is obviously less than that of the parent container and set the left and right margin to auto.
width: 120px;
margin: 0 auto;
This will horizontally center the element regardless of its width or the size of the monitor.
-
Inline or Inline-block elements
text-align: center;
This will center the element inside of it's block-level parent.
Dealing with dynamic or user generated content. If you have a <header> section, a <feature> section, and a <body> section and you add a bottom margin to the header and a top margin to the feature, you might think that the total margin between the two would be the sum of both. But in reality it'll simply default to the larger margin of the two values. This is called margin collapsing.
<header>
</header>
<feature>
</feature>
<body>
</body>
Collapsing margins will not occure when one or more of your block elements has:
-
Padding or border
-
Relative or absolute positioning
-
Or a float left or right
It's important to first decide whether the image is part of the layout or part of the content.
Images that are part of the content should be used as in-line images in the html.
Images that are part of the layout should be used as background images in the css.
Watch level 7 of CSS cross country in CodeSchool.com
They all start with a colon:
Example: *:hover *:focus *:active *:visited *:first-child *:only-child *:last-child *:nth-child(odd/even/an+b)
:before :after :first-letter :first-line
Example: *:last-child:after *:last-child:before (These can be used after or before the last <p> of a article)