WEB APPLICATION Lecture 3: CSS

DEVELOPMENT By: MSc. Tin Trinh

TODAY’S SCHEDULE
• Learn about CSS
• Familiar with W3Schools and use HTML editor in Browser
• Learn how to design Product slider and Shopping cart by HTML
• Check out the course website for all this and more:
https://courses.uit.edu.vn/course/view.php?id=11072
CSS INTRODUCTION
CSS

CSS stands for Cascading Style Sheets

CSS describes how HTML elements are to be displayed on

screen, paper, or in other media

CSS saves a lot of work. It can control the layout of multiple

web pages all at once

External stylesheets are stored in CSS files

CSS Demo - One HTML Page - Multiple Styles!

Check it out: https://www.w3schools.com/css/css_intro.asp

Why Use CSS?
• CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.
• Try it out:
https://www.w3schools.com/css/tryit.asp?filename=trycss_intro
CSS Syntax

• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
EXAMPLE
In this example all <p> elements will be center-
aligned, with a red text color:

•p is a selector in CSS (it points to the HTML element you want to style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value
Try it out: https://www.w3schools.com/css/tryit.asp?filename=trycss_syntax1
CSS SELECTORS
CSS SELECTORS
• A CSS selector selects the HTML element(s) you want to style.
• There are 5 types of selectors:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
• Try it out: https://www.w3schools.com/css/css_selectors.asp
The CSS element Selector
• The element selector selects HTML elements based on the element
name.
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.
• The id of an element is unique within a page, so the id selector is used
to select one unique element!
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.
The CSS class Selector
• The class selector selects HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character,
followed by the class name.
The CSS class Selector (cont)
• You can also specify that only specific HTML elements should be
affected by a class.
The CSS class Selector (cont)
• HTML elements can also refer to more than one class.
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same
style definitions.
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):
CSS HOW TO
How To Add CSS
• There are three ways of inserting a style sheet:
• External CSS (best option)
• Internal CSS
• Inline CSS
• Try it out: https://www.w3schools.com/css/css_howto.asp
External CSS
• With an external style sheet, you can change the look of an entire
website by changing just one file!
• Each HTML page must include a reference to the external style sheet
file inside the <link> element, inside the head section.
External CSS (cont)
• An external style sheet can be written in any text editor, and must be
saved with a .css extension.
• The external .css file should not contain any HTML tags.
• Here is how the "mystyle.css" file looks:
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
CSS COMMENTS
CSS Comments
• Comments are used to explain the code, and may help when you edit
the source code at a later date.
• Comments are ignored by browsers.
• A CSS comment is placed inside the <style> element, and starts with
/* and ends with */:
CSS Comments (cont)
• You can add comments wherever you want in the code:
CSS Comments (cont)
• Comments can also span multiple lines:
HTML and CSS Comments
CSS COLORS
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
CSS Color Names
• Try it out: https://www.w3schools.com/css/css_colors.asp
• In CSS, a color can be specified by using a predefined color name:
CSS Background Color
• You can set the background color for HTML elements:
CSS Text Color
• You can set the color of text:
CSS Border Color
• You can set the color of borders:
CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:
CSS HEX Colors
• A hexadecimal color is specified with: #RRGGBB, where the RR (red),
GG (green) and BB (blue) hexadecimal integers specify the
components of the color.
CSS HEX Colors
CSS HEX Colors
Exercise 1: Get Color code from website
• Install ColorZilla plugin in Google Chrome (other Color Pickers)
• Get color code of KidsPlaza Cyan and Concung Pink
Exercise 2: Get Color idea from Adobe Colors
• Given Concung Pink / KidsPlaza Cyan color in background. Define the
suitable color for TEXT
CSS BACKGROUNDS
CSS background properties
• CSS background properties:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (shorthand property)
• Try it out: https://www.w3schools.com/css/css_background.asp
CSS background-color
• The background-color property specifies the background color of an
element.
• With CSS, a color is most often specified by:
• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element.
It can take a value from 0.0 - 1.0. The lower value, the more
transparent:
CSS Background Image
• The background-image property specifies an image to use as the
background of an element.
• By default, the image is repeated so it covers the entire element.
CSS Background Image Repeat
• By default, the background-image property repeats an image both
horizontally and vertically.
• Some images should be repeated only horizontally or vertically, or
they will look strange, like this:
CSS background-position
• The background-position property is used to specify the position of
the background image.
CSS background - Shorthand property
• To shorten the code, it is also possible to specify all the background
properties in one single property. This is called a shorthand property.
CSS BORDERS
CSS Borders
• The CSS border properties allow you to specify the style, width, and
color of an element's border.
• Check it out: https://www.w3schools.com/css/css_border.asp
 CSS Border Style
• The border-style property specifies what
kind of border to display.
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect
depends on the border-color value
• ridge - Defines a 3D ridged border. The effect
depends on the border-color value
• inset - Defines a 3D inset border. The effect
depends on the border-color value
• outset - Defines a 3D outset border. The effect
depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border
• The border-style property can have from one to
four values (for the top border, right border,
bottom border, and the left border).
 CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one
of the three pre-defined values: thin, medium, or thick:
 Specific Side Widths
• The border-width property can have from one to four values (for the top
border, right border, bottom border, and the left border):
 CSS Border Color
• The border-color property is used to set the color of the four borders.
 CSS Border - Shorthand Property
• To shorten the code, it is also possible to specify all the individual border properties in one
property.
• The border property is a shorthand property for the following individual border properties:
• border-width
• border-style (required)
• border-color
CSS Rounded Borders
• The border-radius property is used to add rounded borders to an
element:
CSS BOX MODEL
Margin, Padding
The CSS Box Model
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The CSS Box Model
CSS Margins
• Margins are used to create space around elements, outside of any defined
borders.
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
• All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
CSS Margins (cont)
CSS Margins (cont)
The auto Value
• You can set the margin property to auto to horizontally center the
element within its container.
• The element will then take up the specified width, and the remaining
space will be split equally between the left and right margins.
CSS Margins (cont)
The inherit Value
• This example lets the left margin of the <p class="ex1"> element be
inherited from the parent element (<div>):
CSS Padding
CSS has properties for specifying the padding for each side of an
element:
padding-top
padding-right
padding-bottom
padding-left
All the padding properties can have the following values:
length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element
CSS Padding (cont)
Exercise 3: TRY BOX MODEL BY CHROME INSPECT TOOL

Try it out: https://www.w3schools.com/css/tryit.asp?filename=trycss_padding_intro

CSS Height, Width and Max-width
• The CSS height and width properties are used to set the height and
width of an element.
• The CSS max-width property is used to set the maximum width of an
element.
• The height and width properties do not include padding, borders, or
margins. It sets the height/width of the area inside the padding,
border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm, etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
CSS Height, Width and Max-width (examples)
Setting max-width
• The max-width property is used to set the maximum width of an element.
• The max-width can be specified in length values, like px, cm, etc., or in
percent (%) of the containing block, or set to none (this is default. Means
that there is no maximum width).
• The problem with the <div> above occurs when the browser window is
smaller than the width of the element (500px). The browser then adds a
horizontal scrollbar to the page.
• Using max-width instead, in this situation, will improve the browser's
handling of small windows.
CSS TEXT (FONTS)
CSS TABLES
CSS ICONS
Icons can easily be added to your HTML page, by using an icon library.
Summary
• Learn how to use CSS to style Website
HOMEWORK 1: DESIGN BUTTONS

• Reference link for getting color code:

https://getbootstrap.com/docs/4.1/components/buttons/
HOMEWORK 2: DESIGN A LAYOUT BY HTML & CSS

Resource: https://www.w3schools.com/css/css_website_layout.asp
References
[1] W3Schools - CSS
[2] Jon Duckett - HTML & CSS - Design and Build Websites - Wiley
(2011)
THANK YOUR FOR YOUR LISTENING