2. 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
3. Syntax
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
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 Common]
• <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. 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.
19. 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.
20. 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
21. CSS Linking [External]
• 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">
23. Overwriting Link Defaults
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
24. In Class Exercise
Create a CSS file called example.css where you set a background color, header color and alignment, and
text color, size and font.
27. example.css text color, size, and font
• <style>
• p {
• color: blue;
• size: 12px;
• font: serif;
• }
• </style>
28. Check example.css in WYSIWYG First
• Put all of your pieces into the <style> tag within the <head> section of
your HTML “test” using your WYSIWYG
• Once checked, pull everything out of the <style> … </style> tag and put
into Notepad – save as example.css
29. Showing How Internal Works
• Put as file on courses.shu.edu
• Reference in an HTML file
• See if it works!
