Cascading Style Sheets (CSS) - Basics
WIF2003 WEB PROGRAMMING
Objectives
Define CSS and the role that it plays in Web Development
Understand the "general rule" for CSS syntax
Understand types of CSS
Understand common formatting CSS properties
Configure color with CSS
Configure text with CSS
Understand the CSS selector
Configure span element with CSS
Configure horizontal rule element
Configure background image
Style Sheets
• Used for years in Desktop
Publishing
• Apply typographical styles and
spacing to printed media
Overview of
Cascading
CSS - The “adjectives”
Style Sheets
(CSS) • A flexible, cross-platform,
standards-based language
developed by the W3C
• describe how documents are
presented visually
• Describe how documents are
arranged and styled
Before and after adding CSS
Before adding CSS After adding CSS
The General Rule
Style sheets are composed of "Rules" that
describe the styling to be applied.
selector {
property: value;
anotherProperty: value;
}
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#Selectors
Examples
/*Make All h1's purple and 56px font*/
h1 {
color: purple;
font-size: 56px;
}
/*Give All img's a 3 pixels red border*/
img {
border-color: red;
border-width: 3px;
}
Examples
/*Select every other text input
and give it a 2pixels blue border:*/
input[type="text"]:nth-of-type(2n){
border:2px solid blue;
}
CSS Reference on MDN
To know more about CSS, visit:
https://developer.mozilla.org/en-
US/docs/Web/CSS
Sample bookstore UI:
https://codepen.io/TurkAysenur/pen/JjGKKrP
CSS
Advantages
Greater typography and page layout control
Style is separate from structure
Styles can be stored in a separate document
and associated with the web page
Potentially smaller documents
Easier site maintenance
Types of CSS
Inline Styles
body section
HTML style attribute
apply only to the specific element
Embedded Styles
head section
HTML style element
apply to the entire web page document
Types of CSS
External Styles
Separate text file with .css file extension
Associate with a HTML link element in the head section
of a web page
contains only style rules
does not contain any HTML tags
Imported Styles
Similar to External Styles
Import style rules from other style sheets.
Where do we write our styles?
Inline CSS Embedded CSS
<h3 style="color: pink;">ABC</h3> <html>
<head>
<h3 style="color: pink;">EGF</h3>
<title>About Rusty</title>
<p style="color: yellow;">TEST</p>
<style type="text/css">
li {
color: red;
}
</style>
</head>
</html>
Where do we write our styles?
Inline CSS Embedded CSS
<h3 style="color: pink;">ABC</h3> <html>
<head>
<h3 style="color: pink;">EGF</h3>
<title>About Rusty</title>
<p style="color: yellow;">TEST</p>
<style type="text/css">
li {
BAD IDEA! color: red;
}
</style>
</head>
</html>
Write our CSS using external
styles
Write our CSS in a separate CSS file using the <link> tag
Example (HTML code):
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<h1>I’m an h1 </h1>
<h3>And I’m an h3 </h3>
</body>
</html>
Write our CSS using external
styles
Example (CSS code in app.css file):
In app.css file: The Result:
h1 {
color: purple;
}
h3 {
color: pink;
}
Common Formatting CSS
Properties
Common CSS Properties, including:
background-color
color
font-family
font-size
font-style
font-weight
line-height
margin
text-align
text-decoration
width
Configure color
with CSS
Web color codes
RGB
Red, Green, Blue Channels
Each channel ranges from 0-255
Example: RGB (255, 87, 51)
Hex
Red, green, and blue channels
Each ranges from 0-255, represented with hexadecimal
A six-digit combination of numbers and letters
Example: #ff5733
Configure color with built in
colors
HTML CSS Result
<h1>I'm a big h1 {
scary h1</h1> color: red;
}
<h2>I'm a h2 {
confident h2</h2> color: cornflowerBlue;
}
<h3>I'm just a h3 {
little h3</h3> color: darkOrchid;
}
Configure color with
Hexadecimal color values
HTML CSS Result
<h1>I'm a big scary h1 {
h1</h1> color: #000000;
}
<h2>I'm a confident h2 {
h2</h2> color: #4B0082;
}
<h3>I'm just a h3 {
little h3</h3> color: #FF1493;
}
# + String of 6 hexadecimal numbers(from 0-F)
Configure color with RGB color
values
HTML CSS Result
<h1>I'm a big h1 {
scary h1</h1> color: rgb(0,255,0);
}
<h2>I'm a h2 {
confident h2</h2> color: rgb(100, 0, 100);
}
<h3>I'm just a h3 {
little h3</h3> color: rgb(11, 99, 150);
}
3 channels: Red, Green, and Blue. Each ranges from 0 - 255
Configure color with RGBA
color values
HTML CSS Result
<h1>I'm a big h1 {
scary h1</h1> color: rgba(11, 99, 150, 1);
}
<h2>I'm a h2 {
confident h2</h2> color: rgba(11, 99, 150, .6);
}
<h3>I'm just a h3 {
little h3</h3> color: rgba(11, 99, 150, .2);
}
Just like RGB, but with an alpha(transparency) channel.
Ranges from 0.0 - 1.0
Use 'color' to set text color and
'background' for background color
HTML CSS Result
<div> body {
<p>Hello</p> background: #95a5a6;
<p>Goodbye</p> }
</div> div{
background: #3498db;
}
p {
color: #ecf0f1;
}
Making Color Choices
How to choose a color scheme?
https://htmlcolorcodes.com/color-picker/
https://color.adobe.com/create/color-wheel
http://paletton.com
Rules and Guidelines:
https://elementor.com/blog/website-color-schemes/
https://www.flux-academy.com/blog/ultimate-guide-
to-choosing-colors-for-web-design
Configure text with CSS
CSS properties for configuring
text
font-weight
Configures the boldness of text
font-style
Configures text to an italic style
font-size
Configures the size of the text
font-family
Configures the font typeface of the text
More CSS TEXT Properties
line-height: Configures the height of the line of text
text-align: Configures alignment of text within a block
display element
text-indent: Configures the indentation of the first line of
text
text-decoration: Modifies the appearance of text with an
underline, overline, or line-through
text-transform: Configures the capitalization of text
letter-spacing: Configures space between text characters
word-spacing: Configures space between words
text-shadow: Configures a drop shadow on text
CSS properties for configuring text
The font-family Property
Not everyone has the same fonts installed in their computer
Configure a list of fonts and include a generic family name
Example:
p {
font-family: Arial, Verdana, sans-serif;
}
CSS Selector
CSS Selectors
CSS style rules can be configured for an:
a. HTML element selector
b. id selector
c. class selector
d. descendant selector
a. Element Selector
Select all instances of a given element
HTML CSS Result
<div> div{
<p>You say yes</p> background: purple;
<p>I say no</p> }
</div>
p {
<div> color: yellow;
<p>You say }
goodbye</p>
<p>I say hello </p>
</div>
b. ID Selector
Select an element with a given ID. Only one per page!
HTML CSS Result
<div> div{
<p>You say yes</p> background: purple;
<p>I say no</p> }
</div>
#special {
<div> color: yellow;
<p>You say }
goodbye</p>
<p id="special">I
say hello
</p></div>
c. Class Selector
Select all elements with a given class
HTML CSS Result
<div> div{
<p background: purple;
class="highlight">You }
say yes</p>
<p>I say no</p>
</div> .highlight{
background: yellow;
<div> }
<p
class="highlight">You
say goodbye</p>
<p>I say hello </p>
</div>
d. Descendant Selector
Select an element within the context of its container (parent) element.
HTML CSS Result
<div> div p {
<p>Paragraph 1 in background-color:
the div.</p> yellow;
<p>Paragraph 2 in
the div.</p>
<span><p>Paragraph
3 in the
div.</p></span>
</div>
<p>Paragraph 4. Not
in a div.</p>
<p>Paragraph 5. Not
in a div.</p>
Deciding to Configure a class
or id
Configure a class:
If the style may apply to more than one element on a page
Use the . (dot) notation in the style sheet.
Use the class attribute in the HTML.
Configure an id:
If the style is specific to only one element on a page
Use the # notation in the style sheet.
Use the id attribute in the HTML.
Span Element
Span Element
Purpose:
configure a specially formatted area
displayed in-line with other elements, such
as within a paragraph.
There is no additional empty space
above or below a span – it is inline
display.
Example – Span Element
HTML <p>Your needs are important to us at <span
class=“companyname">Acme Web Design</span>.
We will work with you to build your Web site.</p>
CSS .companyname {
font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
}
Result
Horizontal Rule Element
<hr>
Horizontal rule element
The HTML <hr> element represents a thematic
break between paragraph-level elements
For example, a change of scene in a story, or a
shift of topic with a section
Example of Horizontal line <hr>
HTML Result
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing
web pages.</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML
elements.</p>
</body>
</html>
Configures a horizontal line
<hr> with CSS
HTML CSS Result
<hr class="style1"> hr.style1{
<br> border-top: 1px solid
<hr class="style2"> #8c8b8b;
<br>
}
<hr class="style3">
<br>
hr.style2 {
border-top: 3px double
#8c8b8b;
}
hr.style3 {
border-top: 1px dashed
#8c8b8b;
}
Visit https://codepen.io/ibrahimjabbari/pen/ozinB for more <hr> CSS styles
Background Image
Background Image
The background property can also set a background image
HTML CSS Result
<div> body {
<p>Hello</p> background:
<p>Goodbye</p> url(https://i2.wp.com/beulah
</div
62.com/wp-
content/uploads/2015/11/Rain
bow_Ocean__by_Thelma1.jpg);
}
div{
background: rgba(0,0,0,.7);
}
p {
color: #ecf0f1;
}
CSS background-image
Property
By default, background images tile (repeat)
body {background-image: url(background1.gif);}
CSS background-repeat Property
Using background-repeat
trilliumbullet.gif:
h2 {
background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
}
CSS3 Multiple Background
Images
body { background-color: #f4ffe4; color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
no-repeat bottom right,
url(trilliumgradient.png); }
CSS Debugging Tips
Manually check syntax errors
Use W3C CSS Validator to check syntax errors
http://jigsaw.w3.org/css-validator/
Configure temporary background colors
Configure temporary borders
Use CSS comments to find the unexpected
/* the browser ignores this code */
Don’t expect your pages to look exactly the same in
all browsers!
Be patient!
Summary
This lecture introduced you to Cascading
Style Sheet Rules associated with color and
text on web pages.
You configured inline styles, embedded
styles, and external styles.
You applied CSS style rules to HTML element,
class, id, and descendent selectors.
You are able to submit your CSS to the W3C
CSS Validation test.
