2. HW 3 and Project 1 Review
• HW 3 Example and Project 1 Example at
• http://pirate.shu.edu/~marinom6/work.html
• Please Note only previously due HW assignments are posted on my
pirate.shu.edu web space
3. Why CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
• Websites generally have sub-folders where CSS files are stored
4. Stylesheets
• While HTML defines where structures start and end, stylesheets define what they
look like
• When used properly, stylesheets allow for a consistent look and feel throughout a
website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the header section
• Inline: the style is defined inside an existing tag, usually in the body section
5. How to use the 3 Methods
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file
6. Inline Example
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element to blue, and
the text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>
7. Internal Example
• An internal CSS is used to define a style for a single
HTML page.
• An internal CSS is defined in the <head> section of
an HTML page, within a <style> element.
• The following example sets the text color of ALL the
<h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue"
background color:
• <html>
• <head>
• <style>
• body {background-color: powderblue;}
• h1 {color: blue;}
• p {color: red;}
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
8. External Example [Most Comon]
• <html>
• <head>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
10. Beyond CSS Basics
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes
11. Changing Stylesheets
• Changing a stylesheet on the fly can be done on the server when the request
is received. For example, the webserver can determine the type of browser
(Internet Explorer, Firefox, Chrome, iPhone, Blackberry) and render the
page appropriately
• You can also give that functionality to the user. Perhaps the user might want
a larger font or a different color. With JavaScript, you can create a button
that changes the stylesheet for the entire page.
12. Two More Stylesheet Examples
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}
13. How Stylesheets are put together
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />
14. Stylesheet styles
• #id – ID’s are used to define large structures in an HTML document. Each
id can be used only once in each HTML document.
• .class – Classes are styles that can be reused and applied to different elements
via a class parameter, such as <h1 class=“name”> …</h1>
• Element – elements are used to redefine how existing HTML elements (tags)
are to be formatted.
17. <style></style> tag
• The <style> tag is very important when using CSS code inside an HTML file
• All the CSS code must be in between the <style> and </style>
• Otherwise it is not recognized
18. Building Assignment 4 Example
Start with the basics:
<html>
<head>
</head>
<body>
</body>
</html>
19. Building Assignment 4
• Put some sample text inside the body section
• Make sure they appear before you add your stylesheet
• <h1>Test</h1>
• <p>Random text here</p>
20. Building Assignment 4
• Place your style tag within the body section of your
HTML code
• <style>
• </style>
21. Building Assignment 4
• body {
• background-color: put your background color here;
• }
• h1 {
• color: put text color here;
• }
• p {
• color: put text color here;
• }
22. Building Assignment 4
• When saving your file as a .css file you only need the information on the
previous slide
• The “building” example is if you were to do an internal example of CSS
23. CSS Properties
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
24. CSS Properties
• The CSS border property defines a border around an HTML element.
• The CSS padding property defines a padding (space) between the text and
the border.
• The CSS margin property defines a margin (space) outside the border.
25. CSS Properties
• Use the HTML style attribute for inline
styling
• Use the HTML <style> element to define
internal CSS
• Use the HTML <link> element to refer to
an external CSS file
• Use the HTML <head> element to store
<style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text
fonts
• Use the CSS font-size property for text
sizes
• Use the CSS border property for borders
• Use the CSS padding property for space
inside the border
• Use the CSS margin property for space
outside the border
26. CSS Linking
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current web site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current page:
• <link rel="stylesheet" href="styles.css">
