we using inline HTML attribute style are selecting node <ul> all inside red
declaration block starts with { ends with }
each rule terminates with a ; semicolon
rules are property name : property value, e.g. color : red;
we are setting font size to 1.5 x width of capital M
Use DW CSS Designer and/or Inspect Element to change color size of <p> content
Style Sheets can be:.
inline using style attribute, e.g. previous <ul> block
internal inside document using <style> tags
external separate .css file that is loaded
best pracitice use external style sheet
goal is consistent look and feel for entire site
Nota Bene, when you alter a Web Page, the browser may use cached a previous version, you may need to reload the page type F5 (FireFox ctrl^R) or refresh icon usually w address bar
Just loaded internal style color #ff7643 rrggbb best to use xll css color names; font arial
I just set the color red for paragraph, we normally put the style block inside <head>
External Style sheet is external CSS file, use a consistent name like webcast2.css, styles.css, we also organize into a assets, css or library folder. Note class site style named after student who created them, We always use mnemonics and consistent nomenclature.
Only true test: A well designed system can be both scaled and maintained over time.
Just loaded an external sheet, they should be in the <head> block, is this h1?
first check css page is loaded, Web Developer, error message, click the link file in fire bug
Keep rendering and browser cache in mind
In rendering we first get a server side file which may execute a server side script and load database info.
We then render on the server, browser execute JavaScript top down, and then renders the page (css & html),
note on my assignment pages, accordion is not rendered right away you can reload page
Pre-Tutorial:
Original Data files author github https://github.com/sawmac/css_mm_4e
To get all zip files use the green drop down button clone or download,
delete the finished folder, just use the test data.
cloak data folder and zip file. (you have a data/02 data folder)
Copy up data/02 data folder to 02
Tutorial - add inline style to <h1>
Open 02/index.html (Use DOM dialog analyze strucuture), best practicies set all foreign server calls to only //server not use the protocol first, if you do you have to match http and https
Create inline style for h1 color: #6A94CC -use split view, in split view rolloever color, use CSS color names - find a similar one, try out cornflowerBlue
Set h1 font-size: 3 x width of M i.e. 3em about twice default browser h3=default size; h2 1.2*h3; h1 = 1.2*1.2*default size; h2
Preview in browser, enable and disable the inline rule (right side checkbox) & box model notice height change
Exercise delete the in-line style we just created or preferrably convert to internal style
select inline rule, right^Click, css styles --> convert inline style to rule, add margin: 0;
now jump to 7 next tutorial
Tutorial - Create an internal style sheet
add <style> tag to head block
add </style>
inside style block h1 {
add closing french brace }
Note blocks beginning with { end with }, rules end with ; semicolon, whitespaces are for readability
add rule color:#6194cc
add rule font-size:3em; margin:0;
Live view preview page (design split works) - notice inspect in live view no orange margin,
Add internal rule...
p {
font-size: 1.25em;
color: #616161;
line-height: 150%;
margin-top: 10px;
margin-left: 60px;
} /* we can do this with css Designer */
Preview live view, have css designer open <style> current, use inspect, notice large left margin.
Tutorial Creating an External Style Sheet
Create external style sheet- styles.css, DW CSS Designer, Sources +, Create a new CSS Style Sheet
In NetBeans to add CSS to a File, right^click folder holding file, and select new Cascading Style Sheet
Add rule...
html {
padding-top: 25px;
background-image: url(images/bg_page.png);
}
Use CSS Designer, unlock padding, background icon, browse,
live view will show background, click styles.css to verify code
Add rule...
body {
width: 80%;
padding: 20px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,.5);
background-color: #E1EDEB;
}
Can paste code into split view; notice all changes in live view
Move all internal rules, to new external file
with CSS designer click and drag h1, and then p selector to styles.css;
can also cut (ctrl^x) and paste (ctrl^v)
Verify styles.css (click code button with styles.css selected)
File → Save all work (index.html) will save styles.css
Implement Google Web Font in head block, before style.css link...
<link href="https://fonts.googleapis.com/css?family=Varela+Round"
rel='stylesheet' ">
You should be using double quotes
Notice CSS designer, you have added an @font-face directive Varela Round font family, not being used
Make sure link to styles.css is present
Save and Preview
for h1 use Web font add...
font-family: 'Varela Round', 'Arial Black', serif;
font-weight: normal;
Attach same style sheet to another file in 02, (consistent look and feel)
Open 02/another_page.html
You can use DW attach new style or preferrably complete bullet 14
Copy & Paste Web Font, both lines are...
<link href='https://fonts.googleapis.com/css?family=Varela+Round'
rel='stylesheet'>
<link href="styles.css" rel="stylesheet">
Save and Preview
Styles.css add p font family..
font-family: "Palatino Linotype", Baskerville, serif;
Add rule after h2 for .intro class
.intro {
color: #666666;
font-family: 'Varela Round', Helvetica, sans-serif;
font-size: 1.2em;
margin-left: 0;
margin-bottom: 25px;
}
Note no intro class in HTML, add class="intro" to first paragraph in index.html and another_page.html
Can do this in live view + (add ID/class) or properties panel class .intro
Save all work, preview in browser
apply same rule to both <p> and <address> tags, add comma , address to p selector...
p, address { ... }
Save and upload all work
Create index.html page for use on CIM
Create index.html file
Create tutorial 1: index.html and another_page.html
Use Point to file ICON create links to both files.
usually w address bar