Lesson 1 for CSS: The whole point of CSS is to seperate function from form. Use html to put in the raw data with concern on organizing the information properly. From there, you will then use CSS to parse all the raw data to build a website. It's called cascading style sheets for a reason. Let's give it some style.
Initializing CSS:
<link type="text/css" rel="stylesheet" href="stylesheet.css"/> This links html code to css file. It ALWAYS has to contain type="text/css" rel="stylesheet"and then href="chosen_file_name.css"
Formatting:
selector {property: value;}Selector can be any HTML Element including <p>, <img>, <table>, etc...\
/*I'm a comment!*/Nested CSS:
div div p {
color:tan; border:2px solid red;
}If you want to grab direct children—that is, an element that is directly nested inside another element, with no elements in between—you can use the > symbol, like so:
div > p { /* Some CSS */ }Classes and ID's:
Classes Vs. ID's: Id's are unique so you use them for things like header and footer because chances are there will only be one of those. Classes are NOT unique and are used across many parts of the CSS design.
.class { /* The . indicates a class */ }#id { /* # indicates an id */ }Classes and id's are great for labeling different pieces with unique names in order to be more organized through the document. You can also use this to link to CSS and change accordingly.
Pseudo-Class Selectors:
Changes this like links to change color or image when clicked and can also hover to change color
selector:pseudo-class_selector {
property: value;
}a:link: An unvisited link.a:visited: A visited link.a:hover: A link you're hovering your mouse a:first-child. It's used to apply styling to onlythe elements that are the first children of their parents.p:nth-child(2) {color:red;}
Would turn every paragraph that is the secondchild of its parent element red.
CSS Positioning:
Blocks:
block: This makes the element a block box. It won't let anything sit next to it on the page! It takes up the full width.
inline-block: This makes the element a block box, but will allow other elements to sit next to it on the same line.
inline: This makes the element sit on the same line as another element, but without formatting it like a block. It only takes up as much width as it needs (not the whole line).
none: This makes the element and its content disappear from the page entirely!
Margins, Borders, and Padding:
Margins
margin-top: /*some value*/
margin-right: /*some value*/
margin-bottom: /*some value*/
margin-left: /*some-value*/
You can also set them all at once by doing this:
margin: 1px 2px 3px 4px;
Padding
Padding is the space between your border and your innermost layer: the actual content.
padding-top: /*some value*/
padding-right: /*some value*/
padding-bottom: /*some value*/
padding-left: /*some-value*/
Or select them all in one declaration, like this:
padding: value value value value;You can think of the HTML page as sort of like a sea, and floating elements as boats on it: all the boats have positions on the sea, and they all see and steer clear of each other.
float: right or left;
Clear
When div's are floating they need to be able to clear each other.
clear: right left or both;
Absolute Positioning
When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static. If there's no such element, the element with position: absolute gets positioned relative to <html>.
Relative Positioning
Relative positioning is more straightforward: it tells the element to move relative to where it would have landed if it just had the default static positioning.
Fixed Positioning
Fixed position is great for sidebars because it never moves even when you scroll up and down.
No comments:
Post a Comment