CSS is the best stuff ever!

A simple primer, Prepared by Zoe F
Materials Part 2 from http://www.binaryspark.com/classes/CSS_rocks/materials.zip

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 20px.. 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. Now we're aligned left, but why isn't this color changing? It's because our H3 Color is being overwritten by "<font color="#996600">" because that shows up closer to the content.
  • Let's delete "<font color="#996600">" and "/font" from around A Website dedicated to Elvis Sightings. It should now be left-aligned and purple.
  • All items that have a <h3> and aren't being overwritten 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 Arial, 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 underlined using the text-decoration property, 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 News <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.

<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!

Advanced

  • 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. Make this a purely CSS document, with no non-compound tags
  • Give one of your divs a border and rounded corners. See if you can make the corners an oval shape rather than a pure circle
  • Give one of your boxes a nice shadow.
  • Use a Universal selector to make all of your content act a certain ways, and a Child selector to make some of your content unique from the rest when its nested.
  • Select and modify a piece of content based on its html Attribute
  • Give some of your content transparency.
  • Animate part of your design using a transition.
  • Animate part of your design using a transformation.
  • Give an element of your design a gradient.
  • Make the color or some other element of your design reactive to the size of user's screen using Media.
  • Make it display differently if the user is viewing it on a mobile device vs a computer browser.

 

 

Rounded Corners

Shadows

Universal and child selectors

Transparency

Attribute-based modification

Transitions

Transformations

Gradients

Media