CSS is the best stuff ever!
|
Inline Styles
- Hi! Download the Part 2 materials and unzip them somewhere you can find them again, say, into a folder called "CSS_rocks". It should include an html page, a css page, and a folder of images.
- Open staticHTML.html in a text editor, and in your browser to keep tabs on your updates.
- We want the paragraph starting with "Have you ever seen..." to be a dark shade of green, and moved to the right about 10px.. Let's wrap that paragraph in <p></p> tags, and then let's give the first p tag a new kind of attribute: "Style". The final p tag should look like this:
<p style="color:CHOOSEAGREENCODE;margin-left:20px">
Pay special attention to the Quotation marks, and the Semicolons.
|
Attributes:
Style
Properties:
Color
margin |
Internal Stylesheets
- Let's add some overall styles for this webpage. In the head, after the <title></title> tag, let's open a style tag: <style> </style>. The, give the style tag the attribute type="text/css"
- In between these two tags, let's put some formatting information:
h3 {color:purple;
text-align:left; }
- Check your page. The phrase "A website dedicated to Elvis sighting." should now be left-aligned and white.
- All items that have a <h3> will look this way. Prove it by adding <h3></h3> tags around the phrase "Elvis News". You can remove the <p></p> tags there since the <h3> tags now take precedence
- Let's add another style here below the h3 style. Make all instances of <h1> tags aligned to the left using the text-align property
- Give it a look: our css has overwritten our <center> tag so that our title shows up left aligned.
- Let's set some styles for our <body> tag. Keeping them here is neater than keeping them in the content area. For all content in the body tag, make the font-family property "arial,sans-serif" . The browser will display all text as Ariel, unless that font isn't installed on the system, in which case it will try to find any sans-serif font. Make the body default font-size 12px and the default color "#CC3333".
- We can now add almost any property we want to any tag, so let's wrap the phrase "Have you ever seen The King in your local Wendy's or supermarket parking lot?" in <h4> tags. Then, in our stylesheet, let's make all <H4> tag's have a background-color of "#000" and a color of "#fff".
- Let's also center our <h4> tags using the text-align:center property, make it blink using the text-decoration:blink property (or you can underline it using the same property if blinking is too annoying), and finally, let's make it entirely uppercase using the text-transform:uppercase; property.
- Add one other Text Formatting property to the <h4> tag, from the list here
|
Properties:
Color
text-align
font-family
font-size
background-color
text-decoration
Other text formatting
|
| Lost? Already tried the 1 minute rule? Catch up using this sourcecode! |
More internal StyleSheets
- We have two unordered lists here and we want both of them to be blue. Add a <UL> selector to the stylesheet in our header, and make their color blue.
- Let's make the circles each <ul> into squares using the list-style-type property.
- Now it's kind of hard to see the links to our News items! Let's change all of the <a> links in the site to a #feffe6 by adding an "a" selector to our stylesheet.
- Very cool, but now we've lost that "mouseover effect" where links change colors when you roll your mouse over them. Let's add it back in with our own colors using "pseudoclasses", a special style used when a tag can have a couple different states. After the a tag, add the following:
a:link {color:#feffe6;}
a:visited {color:#feffe6;}
a:hover {color:orange}
a:active {color:purple}
Try messing with the colors to see what each one does.
- The standard <A> tag selector is no longer necessary in the stylesheet, but we can use it for something else. let's replace the color:##feffe6 ; property with a text decoration attribute to make all links have no underline, using the text-decoration:none; property.
|
Properties:
list-style-type
a:link, etc
text-decoration
css color |
| Lost? Already tried the 1 minute rule? Catch up using this sourcecode! |
External Stylesheets
- Create a new text file and name it name it "mystyles.css", or open the blank file mystyles.css you unzipped from the materials folder. It should sit in the same location as your staticHTML.html, file that you've been working on. This is where we'll put all of our external styles.
- Link the external stylesheet by going into your head area of index.html and placing the following line just before </head>. This tells the browser to expect an external file, and where to find it.
<link rel="stylesheet" type="text/css" href="mystyles.css">
- Let's place all of our style content in this file. Copy and paste all of the text inside of our style tags (but not the Style tags themselves) from the header of our html file into our new CSS file. Then, delete all that info from the header of your html file including the style tags, (which we no longer need)
- Test to see if your linking is working by making a couple small changes to the information in your css file. All of your styles should still be active in your html file even though you are now updating an external file.
- Now that we know everything is working, let's start influencing our page from the outside. Let's give our body tag a margin of 100 px and a padding of 100px; to make sure.
- If it is working, Change the margin and padding here each to 10. On tags you can't tell if they're immediately working like margin and padding, it's always good to start with a big number you know you'll recognise quickly before dialing them back to the actual amount you want.
|
Properties
margin
Padding |
Classes
- The dots on our News list are hard to read because all UL tags are now blue. Create a custom class that can only be applied to unordered lists:
ul.spottings {
color: #FF0 ;
}
- Now, in your HTML file on the Elvis Spottings <UL> tag, add a class attribute to our new class, spottings. The completed tag will look like: <ul class =spottings>. This class will inherit all of the details from the ul properties, but override the color property.
- Let's create a custom class that can apply to anything. Type:
.isbold{
font-weight:bold
}
- Now, let's apply "isbold" to the <li> tag surrounding the phrase "Waffle House in Sydney GA" because waffles are great. The completed tag will look like "<li class=isbold>"
- Apply "isbold" to the phrase "Recent spottings:". There is no tag on this phrase right now, so we can create one using <span>. The final phrase will read "<span class = isbold>Recent spottings:</span>"
- Look through your code and find any leftover tags that that are not a a compound tag - that is, any <font>, <b>, <i>, or <center> tags, in your html and replace them with a class. If you're feeling daring, replace the attributes in your <body> tag with properties in your css body tag. Except for layout, your html is now entirely CSS-based.
|
<span></span> |
DIV's
- Our navigation isn't so hot. We want a navigation bar that spans the width of our content area. Let's wrap the entire navigation html in div tags. It will look like this:
<div id=navigation><a href=...CONTENT HERE</div>
- Now that we have our nav bar, let's make it look like something. In CSS, create a definition for our new id:
#navigation { }
- Inside the { } let's set some properties, just as if we were creating a class. Lets make the background-color gray, the color white, the padding 5px, the font-weight: bold, and the width = 740px.
- This is close, but we want a border along the bottom of the navbar. Set the border-color to black and the set the border-style to solid. To get a border on just the bottom, we must first set the border-width to 0px, and then overwrite just the bottom border by setting border-bottom-width to 2px.
Extra bonus if you have time:
- Replace the table at the bottom of our content area with three <div> tags. The property you will need to make them line up horizontally is the float:left; property. Try different types of margins, and padding including a dotted border.
|
<div id=></div>
Properties:
background-color
Color
Padding
fontweight
width
border-style
border-width
border-bottom-width
float
|
| Lost? Already tried the 1 minute rule? Catch up using this sourcecode and here is the CSS file! |