double tag so the browser knows that they are both part of the title.
Ex:
Article Title
Subtitle of Article Header1
text of article
-----------------------
Tutorial 5: attribute selectors
In CSS Stylesheet (main.css) you can write the name of the element with a dot separator and then the class to select the elements that are of that type and of that class (ex: select only paragraphs that have the class of "tuna" - Ex: p.tuna {rules;}
In CSS3 - in addition to id and class, you have attribute selectors.
Syntax: elementName[attribute]{rule;}
Ex: p[name]{color:blue;}
-- this will give all paragraphs with a name attribute (regardless of the value of the name) the rule (colored blue).
-You can also specify to apply the rule to an attribute with a particular value:
Ex: p[name="value"]{color:blue;}
-this will apply the rule to all paragraphs with a name attribute that has a value of "value".
-Not Commonly used in Web Development, but is in CSS3: --
-Regular Expressions: Using the carrot sign (^) with the attribute name, you can specify that the rule applies to only those elements with the attribute value that begins with the specified value:
Syntax: element[attribute^="valueAtStart"]{rule;}
Ex: p[name^="bacon"]{color:red;}
-this will apply the rule to any paragraph with a name attribute that has a value beginning with "bacon". i.e.
To apply the rule to anything that ends with a set of characters in the value, use the $ sign. Ex: p[name$="bacon"]{color:red;} for a
element.
-------------------
Tutorial 6: Intro to Pseudo Classes in CSS3
Purpose of a pseudo class is to have more control over all elements or children.
Use the nth-child keyword:
syntax: element:nth-child(numberOfChildElement){rule;}
Ex: p:nth-child(3){color:green;}
-this will make every 3rd child that is a paragraph colored green.
Note: Specifying a number for nth-child is not common and basically useless.
***What is useful is specifying a keyword such as odd or even.
Ex: p:nth-child(odd){color:green;}
-this will style every odd numbered child element that is a paragraph to be colored green.
This is useful if you have a long list of items like on an auction site, and it can make them easier to see.
-------------------------
Tutorial 7: Negation Pseudo-Classes
-Used to specify what to exclude from the CSS rules. Use the keyword :not, followed by the class name you want to exclude in parens and then the rule.
Syntax: :not(.className){rule;}
Ex: :not(.brent){color:red;}
-this will style all the paragraphs that are not classed as "brent" to the color red.
---------------------------
Tutorial 8: New CSS3 Selectors
1) > sign. used to select elements that have a specific parent.
Syntax:
parentElementName > elementName{rule;}
Ex:
div > p{color:yellow;}
-this will color all paragraphs that have parent of div to yellow.
2) + sign. used to affect the second element immediately following the first (they must have the same parent).
Syntax:
elementSelector.className + elementSelector {rule;}
Ex: p.brent + p {color:green;}
-this will turn every paragraph that follows a paragraph with a class of "brent" green.
3) ~ sign. this is used like the + sign above, but it allows information in between that last class selector.
i.e. if there is a between one of the paragraphs with a "brent" class. The CSS style rule will still apply to the paragraph after the span.
------------------------------------
Tutorial 9: Laying out the Website
Old traditional box style in CSS:
Create a div around all the contents of the body and give it an id.
Also, give an id to all sections of the website.
Ex:
----------------------
Tutorial 10: Starting the Styling (setting up for compatibility with older browsers using Traditional Box Style Method).
0) Assign an id to all sections of the website.
1) Set all the content to default margin and padding values of 0px. Some elements have a default padding and margin. You want to clear all of that to set everything up specifically without those values interfering.
To set this: in main.css - *{margin:0px;
padding: 0px;}
2) Change the style of the headings ( etc. tags).
Syntax:
headerSelector {font: weight sizePx fontFamily;}
Ex: h1{font: bold 20px Tahoma;}
3) Ensure that all browsers will read the format correctly (in block format)
-select all parts of site and make a rule to set display to block:
header, section, footer, aside, nav, article, hgroup{display:block;}
4) Align the body to center with text-align rule:
body{text-align:center;}
Note: you need this property to ensure that all content will be centered and look good in older browsers.
---------------------------
Tutorial 11: Styling the Navigation Menu
In main.css file:
1) style the main div with a border and a width:
Note:
-Website width should usually be set to between 950 and 1,000 px.
1,000 is a good number to use for working with elements later on since it is easy mathematically.
-Set the margin between 10-20px so the website content isn't jammed up against the edges. set the left and right margins to auto to center the content.
-set the text align for the body to left (text-align:left;)
Ex: main div in the body with an id of big_wrapper
#big_wrapper{
border: 1px solid black;
width:1000px;
margin: 20px auto;
text-align:left;
}
2) Style the header. you can use background colors to make the parts of the website easier to see and work with, and then change them to the colors you want after the layout is complete.
ex: