Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download FVGCC - Intro to Web Part 2 - CSS
Transcript
FVGCC - INTRO TO WEB PART 2 - CSS
Fox Valley Girls Coding Club
CSS: Cascading Style Sheets
HTML tags define the structure of the page
Styles define the appearance of the HTML elements
How Can Styles be added to your Page? In one of 3 ways:
External Stylesheet: Can be in separate external .css file linked to the HTML page
Internal stylesheet: defined between <style></style> tags inside the <head> section of the
page to which they apply
In-Line Styles: can be defined in-line within the tag where you want them to appear
In-Line Styles – Attributes inside tags:
HTML tags can include attributes inside the opening tag; “style” is one attribute
Format is attributename = “attributevalue”
Attribute Name is “style”; the value of the style attribute is one or more pairs of
propertyname:propertyvalue;
The color attribute determines font color
The background-color determines color behind the text
<body style="background-color:aliceblue;">
<h1 style="color:orange;">Heading 1</h1>
<h2 style="color:red;">Heading 2</h2>
<h2>Another H2</h2>
<h3>Level 3 heading</h3>
<div><p>Hello</p></div>
</body>
For additional color names see:
http://www.w3schools.com/colors/colors_names.asp
Stylesheets
So far, we have defined in-line styles by adding style attributes directly to each tag we want
to style. We can also define them in stylesheets
Provides a consistent look throughout the site
Allows great flexibility in fine-tuning appearance
Format of internal and external stylesheets is the same but internal is embedded within the
HTML page and external is a separate file that is linked to the HTML page
© Fox Valley Girls Coding Club
Page 1 of 4
FVGCC - Intro to Web Part 2 - CSS
Page 1
FVGCC - INTRO TO WEB PART 2 - CSS
Fox Valley Girls Coding Club
Internal Stylesheet
Internal Stylesheet: defined between <style> tags in the <head> section of an HTML page
<head>
<title>Fun With Styles</title>
<style>
body {background-color: lemonchiffon;}
h3 {color: purple;}
</style>
</head>
Did you see a different result?!
If you followed along with the in-line styles example and then added this internal stylesheet, the
body background-color is picked up by the in-line style definition and will still be aliceblue. This is
how Cascading works! In-line styles override stylesheets!
External Stylesheet
External Stylesheet: a file with a .css extension is an essential part of styling your site
In NetBeans from the menu choose File New File
Select Cascading Style Sheet as the type
File Name: FVGCC.css
Just to get started, add a style definition (rule-set) that will affect the entire body section of
the HTML; choose whatever color you want for the background of your page
body {
background-color: antiquewhite;
font-family: “Arial”;
Rule-set starts with the selector name (in this case “body”; this determines which elements
will be affected by the rule-set
Selector name(s) are followed by one or more style declarations
© Fox Valley Girls Coding Club
Page 2 of 4
FVGCC - Intro to Web Part 2 - CSS
Page 2
FVGCC - INTRO TO WEB PART 2 - CSS
Fox Valley Girls Coding Club
o Each declaration is a name followed by a value; followed by a semi-colon
o The whole set of declarations for a rule-set is enclosed in curly braces
In the HTML file that you previously created add this <link> inside the <head> section; it can
go right after the <title> tag:
<head>
<title>Fun with Styles</title>
<link rel="stylesheet" type="text/css" href="FVGCC.css">
</head>
In-line styles will override those defined in a stylesheet
Styles defined in an internal stylesheet will override those defined in an external stylesheet;
see below for more on cascading
Delete or change the internal style sheet (<style> section) and/or in-line styles for those
styles that you want to control from the external style sheet.
What’s up with “Cascading” StyleSheets?
Style attributes for a particular element on your page may be defined in multiple places
Styles from .css file can be overridden by the internal stylesheet or an in-line style
In-line styles take precedence over stylesheets
Style declarations cascade and the style of a given element may be a “Frankenstein” (but in
a good way..) composed of pieces from multiple sources
Styles from containing elements cascade too….
Cascade Example:
CSS stylesheet declaration
body {font-family: ‘Arial’; color: black;}
Unless overridden by another style, the text on this page will be black in Arial font
Styles defined inside <head> on HTML Page:
<style>p{color: red;}</style>
On this page the paragraphs will have red text, except this next one:
o In-line:
<p style=“color:blue;”>I am blue</p>
o This paragraph will be blue!
Since Paragraphs are contained in the<body> they will all have Arial font as defined in the
stylesheet!
© Fox Valley Girls Coding Club
Page 3 of 4
FVGCC - Intro to Web Part 2 - CSS
Page 3
FVGCC - INTRO TO WEB PART 2 - CSS
Fox Valley Girls Coding Club
Try out some styles for different elements on your page:
Here are some ideas but you can choose to style any element you like
Add styles for each header level, choosing whatever colors you like; if you want to apply a
style to multiple tags at the same time use a comma-separated list in the selector. For
example, to left-align all 4 levels of headers add this to the CSS:
h1, h2, h3, h4{
text-align; left;
}
Try a different color for each header level; save changes and refresh your HTML page in
the Browser to see them:
h1 {
color: darkviolet;
}
h2 {
color: green;
}
Images:
Your picture may be too large or too small; we can control the size as well as many other things by
defining a style for the img tag; add this to your CSS file to set a fixed width for your images; the
height will adjust proportionately:
img {width: 400px; height: auto;}
Using a Class to fine-tune your styles:
A CSS class is a way to mark elements in the HTML to tie them to a specific style in the CSS
We define a class in the CSS with the “dot operator”, i.e. a period; so let’s define a style we can
apply to our favorite level 2 headings. Format is tag.classname; the style will only be applied to tags
h2 and only those h2 tags that also have a class attribute =”fave”:
h2.fave{color: green;}
Tag it in the HTML using the class attribute; note that we do not use the dot operator here in the
HTML:
<h2 class="fave>This is my favorite heading!</h2>
The Zen of CSS
Using the same HTML files but different CSS styles makes a world of difference!
Take a look at some of the amazing CSS at www.csszengarden.com
Be sure to look at the HTML file. It is the same for all of the examples!
It is the CSS that makes the difference!!!
© Fox Valley Girls Coding Club
Page 4 of 4
FVGCC - Intro to Web Part 2 - CSS
Page 4
