higher computing css. what is css? css: cascaded style sheets used to separate a web site’s...
TRANSCRIPT
HIGHER COMPUTINGCSS
WHAT IS CSS?
• CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
HOW DOES IT LOOK?• In the head section, add a style tag
<style> </style>
• Goes inside the style tag, add css code. <style> CSS code goes here </style>
• CSS code looks different than html code. Syntax for CSS code is:
• selector {property:value}• selector {property:value; property:value;…}
HOW DOES IT WORK?
• selector: Name of the tag. For example Body, p, h1 etc
• property: the property you want to change for example the colour, font, background image etc
• value: the value you want to give the property. For example 14 px, blue etc
CSS PRACTICECreate the following webpage using the script below:
<html>
<head>
<title> CSS example </title>
<style type="text/css">
body {background-color: red}
h1 {background-color: green}
h2 {background-color: yellow}
p {background-color: blue}
div {background-color:blue; color:white; font-size:4em}
</style>
</head>
<body>
<h1> This is a heading1 </h1>
<h2> This is a heading2 </h2>
<h3> This is a heading 3 </h3>
<div> This is a div tag</div>
<p> This is a paragraph </p>
</body>
</html>
HOW TO SPECIFY TEXT SIZE?
h1 {font-size: 12em or 12px, or 12pt or 12%}
• em is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
• px (such as font-size: 12px) is the unit for pixels.• pt (such as font-size: 12pt) is the unit for points.• % (such as font-size: 80%) 80% of the original
size.
CSS COLORS
• CSS brings 16,777,216 colors to your disposal.
• body {background-color: “red” or “#ff0000”}
• red
#ff0000
• There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
TEXT COLOR AND BACKGROUND COLOR PROPERTIES• Text color property: color
• Background color property: background-color
• Examples
• h1 { color: yellow; background-color: blue; }
CHANGING THE FONT TYPE• Property: font-family• This is the font itself, such as Times
New Roman, Arial, or Verdana.• The font you specify must be on the
user's computer( 'safe' fonts are arial, verdana and times new roman)
• Examples:• h1 {font-family: arial, helvetica}
CHANGING THE SIZE OF YOUR FONT
• Size of your font: font-size
• Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use heading tags (h1, h2 )
• Example:
• p {font-size: 14px}
MAKE IT BOLD AND/OR ITALIC
Property for bold: font-weight
Exampleh2 {font-weight: bold}
Property for italic: font-style
Exampleh3 {font-style: italic}
UNDERLINE TEXT• Property: text-decoration • text-decoration: overline, which
places a line above the text. • text-decoration: line-through, strike-
through.• text-decoration: underline • text-decoration: none• Example
• a {text-decoration: underline, color:blue}
TRANSFORM TEXT• Property: text-transform
• text-transform: capitalize turns the first letter of every word into uppercase.
• text-transform: uppercase turns everything into uppercase.
• text-transform: lowercase turns everything into lowercase.
• text-transform: none
ID AND CLASS SELECTORS
• What is you have 2 paragraphs that you want to look different?
p {color: blue} changes the style of all paragraphs!
• There are other ways select elements to style. They are called ID and CLASS selectors
ID SELECTOR• HTML code
• <body><p id=“para1”>
I’m paragraph 1!
</p>
<p id=“para2”>
I’m paragraph 2!
</p>
• </body>
CSS code<head><style type=“text/css”>#para1 {color:red}#para2 {color:blue}
</style></head>
CLASS SELECTOR• HTML code
• <body>• <p
class=“para1”>
• I’m paragraph 1!
• </p>
• <p class=“para2”>
• I’m paragraph 2!
• </p>
• </body>
CSS code<head><style type=“text/css”>.para1 {color:red}.para2 {color:blue}
</style></head>
WHAT’S THE DIFFERENCE?
• An id can only be used once.<body>
<h1 id=“red”>I’m the only red allowed! HaHa </h1>
</body>
• A class can be used many times<body>
<h1 class=“blue”>I’m blue </h1>
<p class=“blue”>I’m blue too!</p>
</body>
Thanks to J.Hubbard for some examples in this presentation