improve the look of your web page with css caroline hallam september 16, 2014
TRANSCRIPT
Improve the Look of Your Web Page
with CSS
Caroline Hallam
September 16, 2014
CSS we’re focusing on today⦿ Size⦿Color⦿ Font⦿Margins & Padding⦿Borders
Cascading Style Sheets⦿Cascading Style Sheets are used to
format the layout of web pages
⦿CSS helps web developers create a uniform look across several pages of a website
⦿Instead of defining the style of each block of text within a page’s HTML, commonly used styles will only need to be defined once in a CSS document
Types of CSS
Structure of CSS
selector {property: value;
property: value; property: value;
}
h1 { font-family: Arial,
Helvetica, sans-serif ; font-size: medium; color: #000000; }
Make sure to always check your syntax. You will break your CSS document if you forget a brace, colon, or semicolon.
Parents and Children⦿If one element contains another, it is
the parent of the contained, or child, element
⦿“Child” elements will inherit some properties from “parent” elements unless you specify otherwise
ExampleHTML:
<html> <body>
<p>Font is Arial due to parent/child relationship.
</p> </body></html>
CSS:
body {font-family: Arial, Helvetica, sans-serif;color: black;}
p {font-size: 20px;color: hotpink;}
Check it out!
Copyright Issues⦿Always note your source so it can be
traced
⦿Avoid using copyrighted materials as often as possible
⦿Take advantage of being in college – educational exception under fair use
⦿Always give credit where credit is due!
ColorsSeveral ways to specify colors in CSS:⦿By name
• this one works but is limited, since there are only a handful of colors with usable names.
• p {color:red;}⦿By hex code
• p {color:#12310f;}• p {color:#C30;}
⦿By rgb / rgba or hsla value• p {color:rgb(187, 49, 47);}• p {color:hsla(170, 50%, 45%, 1);}
Fonts⦿CSS can define the font style,
size, color, and boldness
⦿CSS Font Families
⦿Other Font Options
Size⦿Defined in CSS with width and height
properties
⦿ If you define only the width of an image, it will rescale the height to match
img {width: 10%}
⦿Try it out!
Liquid vs. Fixed Layout⦿In a fluid layout the sizes of areas
expand and collapse as you resize your browser window
⦿In a fixed layout, the sizes of areas stay the same because they are set by a specific numeric value
⦿A combination of these two layouts is known as elastic – DON’T USE IT!
Box Model
Box Model⦿When you are setting values for all
four sides of padding, margin, border etc… there is no need to say:
padding-top:10px; padding-right:0px;padding-bottom:10px;padding-left:0px;
Instead, you can write:padding:10px 0px 10px 0px;
⦿The order goes: top, right, bottom, left
Floats⦿Floating an element removes it from the
normal flow of the page and places it to the right or left
⦿Floating elements need an id and a width:#content {width:787px;border-top: solid #12310f 3px;border-left: solid #12310f 3px;padding: 20px;float:right;}
⦿To turn off float, use: clear:both;
Extra ResourcesW3Schools CSS Reference
CSS Pocket Reference
Getting Started with CSS
FirebugCSS validator
<div> tag⦿Defines a division or a section in an
HTML document
⦿Often used to group block elements to format them with styles
Example<div class="post">
<h2> Sweet Bunny! </h2>
<img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/
Easter_Bunny_Postcard_1907.jpg" class="postpic">
<p>Sweet roll halvah tootsie roll croissant chocolate bar. Muffin tootsie roll
candy applicake muffin gummies. Jelly beans ice cream wafer. Pudding jelly
beans cupcake marzipan soufflé soufflé ice cream biscuit. Dragée ice cream
topping jujubes. Soufflé caramels gingerbread fruitcake tiramisu soufflé gummi
bears lemon drops. </p>
</div>
<span> tag⦿Similar to a div except that a <span>
tag is used to group inline elements in a document
⦿Provides no visual change by itself, but it allows you to add styles to a specific section of content
⦿For example, highlighting/emphasizing a section or title between paragraphs
ExampleIn the body:
<span class=”highlight">You can add highlighted and colored text!</span>
In the CSS style sheet: .highlight {background-color: #FFFF00; color: red; font-size: 28pt;}
Translates to:You can add highlighted and colored text!
id Selector⦿Used to specify a style for a
single, unique element
⦿Uses the HTML id attribute
⦿Defined with a # in CSS style sheet
ExampleHTML:
<div id="banner"><h1>Module Name<h1></div>
CSS:
#banner {width: 400px;height: 120px;margin: 0;padding: 0;float: right;line-height: 95px;}
Check it out!
class Selector⦿Used to specify a style for a group of
elements
⦿Unlike the id selector, the class selector is most often used on several elements allowing you to set a particular style for many HTML elements with the same class
⦿Uses HTML class attribute
⦿Defined with a period . in the CSS style sheet
ExampleHTML:
<p class=“red”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class=“blue”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
CSS:
p.red { font-family: "Times New Roman", Georgia, Serif;
color:#FF0000; }p.blue {
font-family: Arial, Helvetica, sans-serif; color:#0000FF;
}Check it out!
Naming Selectors⦿Similar to HTML documents, you need to
carefully consider how you name your CSS selectors
⦿Avoid names that relate to presentation
⦿For example, if you set up your website with a red layout and label class=“red” – what will happen when you decide to change your layout to blue next week?
⦿Name selectors based on what they do not what they are such as mainimg instead of catpic
Specificity⦿When there are multiple rules that
could apply to the same element, the browser will use the most specific one•id is the most specific, then class, then an element with no id or class applied
⦿If there are equally specific rules that could apply (two classes) then the bottom-most in the style sheet applies