Simple CSS
CSS definition • Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML… • CSS is designed primarily to enable the separation of document content (written in HTML…) from document presentation, including elements such as the layout, colors, and fonts Reference: wikipedia
Lets see what pages look like without CSS! • Please disable CSS on your browser • Recommend you do not use IE for web design, as IE is widely known for causing problems when doing web design. In IE8 – page, style, no style • Firefox brower - View- page style – no style
• Once you have disabled CSS on your browser, check out some of your favorite web pages to see what they look like without page styling. • Once you have done that, turn the CSS back on in your browser.
• This is the code view for the page you did in the last lesson. It includes a variety of simple HTML tags to present information on a page, but the results when seen in a browser are very basic.
• Code viewbasic web page
• What your basic web page looks like in a browser
â&#x20AC;˘ Open Notepad and add the following tag in the head section of your web page and then save your html file. <link rel="stylesheet" type="text/css" href="style.css" />
This tells the browser to find a file called style.css. We will be creating that file next and then you will see how CSS can make your web pages look great!
â&#x20AC;˘ Notice that the link to the CSS file is located in the head section of the web page.
â&#x20AC;˘ Open up Notepad or Notepad ++ and create a new, blank file save it and name it style.css. â&#x20AC;˘ Make sure you save it into the same folder where your index.html file is sitting!
Notice that this style.css file is saved into the same folder where your index.html file is sitting.
Blank file in Notepad, saved as style.css
• Lets add some style and formatting instructions to the css file and make the webpage look great! • Add the following to the css file: • body { background-color: #ED7684; } • Notice the curly brackets! • CSS is extremely picky – if the code is not 100% correct, the page won’t work! • Save the CSS file. • Now look at your HTML file in a browser. You should see a pink background color on the page. If you don’t, you need to go into troubleshooting mode and figure out why!
• CSS file
• Web page
Hex Colors • Now find a different background color for your page. You need a hex color code to do this. Find a hex color you like, and copy-paste the color code into the CSS file. Save the CSS file and load the HTML file back into the browser. You should see your new color! • There are lots of pages on the internet where you can find hex colors for your web pages. Here are a few! • http://users.rcn.com/giant.interport/COLOR/1ColorSpecifier.html • http://html-color-codes.info/ • http://colors.napcsweb.com/colorschemer/
â&#x20AC;˘ I like this one better! Change the color from pink to something else!
â&#x20AC;˘ Why is this dark green a bad choice for a background color?
â&#x20AC;˘ Have you changed the background color of your page from pink to something else? â&#x20AC;˘ Did you make sure the color is light enough so the black text can be seen on it?
Lets format the page margins! • Add the following code to the CSS file: margin-top:10px; margin-right:100px; margin-left:100px; • Save your CSS file and then re-load the HTML file in the browser. You should see some nice margins around the page that weren’t there before. If you don’t, you need to troubleshoot and figure out why!
â&#x20AC;˘ Notice page margins that were not there before
â&#x20AC;˘ Finally, letâ&#x20AC;&#x2122;s change the font to a generic sansserif, which tends to make online reading a bit easier on the eyes.
Reference: www.w3schools.com
To add some variety we will make the paragraph code “sans serif” Add the following to your CSS file: p { font-family: Helvetica, Arial, sans-serif; } Save the CSS file, re-load the HTML file into the browser and look at the fonts carefully – you should see the paragraph text has changed to “sans serif.
â&#x20AC;˘ Notice that the font of the paragraphs changed but the font for the list items did not change â&#x20AC;&#x201C; why?
Style the basic web page you created last lesson • Style the basic web page you created last day with a background color, page margins and sans-serif font styling of the <p> tags. Only the <p> tag should be sans-serif. • Include your CSS in an external style sheet, saved as “style.css”. Make sure there is a link in your html page so the browser will know where to find the CSS instructions. • Hand in both files: named index.html and style.css • You will be expected to know how to do these basic HTML and CSS procedures for the upcoming hands-on web design test.
References â&#x20AC;˘ http://www.w3schools.com/css/css_font.asp