Scribd
Upload
5 views

3 CSS

Uploaded by

FATIN HANNANI BINTI MOHD NASIR / UPM
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

3 CSS

Uploaded by

FATIN HANNANI BINTI MOHD NASIR / UPM
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

ECC4217 & 4207

WEB AND DATABASE


CASCADING STYLE SHEET (CSS)

Siti Mariam Shafie


[email protected]
▪ Understand the concept of CSS
Learning ▪ Understand the concept of CSS
Outcome ▪ Able to apply CSS in creating responsive web
pages following professional practice
What is CSS?
▪ Cascading style sheet: provide the means to control and change the
presentation/layout of multiple web pages all at once
▪ Style sheets allow you to impose a standard style on a whole
document, or even a whole collection of documents
▪ Style is specified for a tag by the values of its properties
▪ CSS describes how HTML elements should be displayed
Efficiency of code
Ease of maintenance
Why CSS is Accessibility
important? Device compatibility
Separate style from
content - why
separate? Web crawlers/search engines
It’s just good practice
CSS Syntax
▪ A CSS rule consists of a
selector and a declaration
block

▪ Example:
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style

Simple elements
(select selectors based on name, id, class)

Combinator selectors
Simple selectors based
Pseudo-class selectors
(select elements based
(select elements based (select elements based
on a specific relationship state
on name, id, class) on a certain state)
between them)

Pseudo-elements
(select and style aselectors
part of an element) Attribute
(select elements
selectorsbased on an attribute or attribute value)

Pseudo-elements Attribute selectors


selectors (select elements based
(select and style a part of on an attribute or
an element) attribute value)

https://www.w3schools.com/css/css_selectors.asp
How to apply CSS in HTML documents?

Internal External
Inline CSS
CSS CSS

https://www.w3schools.com/css/css_howto.asp
Inline CSS
▪ Style sheet appears as the value of the style attribute to apply a
unique style for a single element
▪ General form:
style = "property_1: value_1; property_2: value_2;
… property_n: value_n“
▪ Example:
<ul style = "list-style-type: square" >
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
Internal CSS
<!DOCTYPE html>
<html>
▪ Style sheet appears as a list of <head>
<style>
rules that are the content of a body {
<style> tag, inside the <head> background-color: linen;
}
of HTML
h1 {
▪ General form: color: maroon;
<style> margin-left: 40px;
rule list }
</style>
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
▪ External style sheets are in separate files, potentially on any server on
the Internet
▪ Written as text files with the MIME type text/css
▪ A <link> tag is used to specify that the browser is to fetch and use an
external style sheet file
<head>
<link rel="stylesheet" href="http://www.wherever.org/termpaper.css">
</head>

▪ Another way is to use @import Rule


Cascading Order
▪ All the styles in a page will "cascade" into a new "virtual"
style sheet by the following rules, where number one has the
highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
▪ So, an inline style has the highest priority, and will override
external and internal styles and browser defaults.
CSS Comments
▪ A CSS comment is placed
inside the <style> element,
and starts with /* and ends
with */
CSS Colors
▪ Predefined name: red, yellow, black, white, cyan, magenta, tomato, orange,
violet, dodgerblue, slateblue, gray, violet, mediumseagreen, lightgray, etc
▪ HEX value for color tomato: #ff6347
▪ RGB value for color tomato: rgb(255,99,71)
▪ HSL value for color tomato: hsl(9, 100%,64%)
▪ Tomato color with 50% transparent:
❑ rgba(255, 99, 71, 0.5)
❑ hsla(9, 100%, 64%, 0.5)
▪ Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
▪ Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.
▪ Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white

https://www.w3schools.com/css/css_colors.asp
CSS Properties
Background https://www.w3schools.com/css/css_background.asp
Control Border https://www.w3schools.com/css/css_border.asp
many Margin https://www.w3schools.com/css/css_margin.asp

style Padding https://www.w3schools.com/css/css_padding.asp


Height and width https://www.w3schools.com/css/css_dimension.asp
properties Text formatting https://www.w3schools.com/css/css_text.asp
of an Font https://www.w3schools.com/css/css_font.asp

element Link https://www.w3schools.com/css/css_link.asp


Display https://www.w3schools.com/css/css_display_visibility.asp
Position https://www.w3schools.com/css/css_positioning.asp
Many more: (e.g. p{ text-decoration: line-through; })
Also used in animation https://www.w3schools.com/css/css3_animations.asp
CSS Box Model
▪ In order to set the width and height of an element correctly in all
browsers, you need to know how the box model works
CSS distance units
HTML Layout Using CSS
▪ CSS float property
❑ Advantage: It is very easy to learn and use. You just learn how the float and clear properties work.
❑ Disadvantage: Floating elements are tied to the document flow, which may harm the flexibility.
▪ CSS framework
❑ Advantage: Speed up the development.
❑ Disadvantage: Less flexibility.
▪ CSS flexbox
❑ Advantage: It ensures that the page layout must accommodate different screen sizes and different
display devices.
❑ Disadvantages: It does not work in IE10 and earlier.
▪ CSS grid
❑ Advantage: Can align components into columns and rows
❑ Disadvantages: Not supported by every browser.

https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/css/css_templates.asp
Flexbox vs
Grid
CSS Coding Standards: Case Study
▪ WordPress
❑ https://developer.wordpress.org/coding-standards/wordpress-coding-
standards/css/

▪ Google
❑ https://google.github.io/styleguide/htmlcssguide.html
Responsive Web Design Layout
<div class="header">
<h1>My Website</h1>
<p>A website created by me.</p>
</div>
Header
<div class="navbar">
Navigation Bar <a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>

<div class="row">
Side Content Main Content
<div class="side">...</div>
<div class="main">...</div>
</div>

<div class="footer">
<h2>Footer</h2>
Footer </div>

https://www.w3schools.com/howto/howto_make_a_website.asp
CSS box-sizing Property
▪ The box-sizing property allows us to include the padding and border
in an element's total width and height
▪ If you set box-sizing: border-box; on an element, padding and border
are included in the width and height
▪ Example: .div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
https://www.w3schools.com/css/css3_box-sizing.asp
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
CSS Media Queries
▪ The @media rule, introduced in CSS2, made it possible to define
different style rules for different media types
▪ Syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}

▪ Example
@media screen and (min-width: 480px) { The media query will only apply if
body { the media type is screen and the
background-color: lightgreen; viewport is 480px wide or wider.
}
}

https://www.w3schools.com/css/css3_mediaqueries.asp
Make Responsive Layout
/* Responsive layout - when the screen is less than 700px wide, make the two columns
stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation
links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
} https://www.w3schools.com/css/css3_flexbox_responsive.asp
Questions
▪ What is the difference between HTML and CSS?
▪ What are the advantages and disadvantages of CSS?
▪ What is MIME type and give some examples of common MIME types.
▪ Which level of style sheet has highest precedence and explain how it affects the
document.
▪ Explain what kind of conflict may occur when there are two different values for
the same property on the same element. How does the browser solve it?
▪ What is CSS selector? What is the difference between id and class attribute
selectors? How to apply styles to the selector of these attributes?
▪ How to apply styles to all elements in a document?
▪ What are pseudo classes?
▪ Identify the available CSS properties in different categories with their function.
How to style <dt> and <dd> so they are on the
same line?

https://stackoverflow.com/questions/1713048/how-to-style-dt-and-dd-so-they-are-on-the-same-line
Solutions:
1) Using float
2) Without
float
3) Using
flexbox
*Note:
The flex property is a shorthand
property for the flex-grow, flex-
shrink, and flex-basis properties.

https://www.w3schools.com/css/css3_flexbox_items.asp
4) Using CSS
Grid
5) Using
Booststrap
To Speed up: CSS Frameworks
▪ Bootstrap
▪ Animate.css
▪ Foundation
▪ Ulkit
▪ Pure CSS
▪ etc

Responsive Web Design Sketch


Homework
▪ Try all CSS properties from W3Schools
▪ It is an advantage if you have CSS cheat sheet in hand when you use
the CSS properties in html document
References
▪ https://www.w3schools.com/css/
▪ https://www.w3schools.com/css/css_examples.asp

You might also like