Week 4 and 5:
WBDV111
COMPUTER STUDIES
OUR LADY OF FATIMA UNIVERSITY – Q.C
<style>: The Style
Information
element
Deprecated
• <acronym> • <dir> • <menuitem> • <rtc>
• <applet> • <font> • <nobr> • <shadow>
• <bgsound> • <frame> • <noembed> • <spacer>
• <big> • <frameset> • <noframes> • <strike>
• <blink> • <image> • <param> • <tt>
• <center> • <keygen> • <plaintext> • <xmp>
• <content> • <marquee> • <rb>
Introducing CSS
• Cascading Style Sheets or CSS
is responsible for the
appearance, styling, and
aesthetics of a web page.
• It is used to create rules that
determine how HTML
elements will appear.
This is how it should look in the browser:
Style Sheets
• In-line Style Sheet = stores style information inside any HTML
tag; needs no external file
• External Style Sheet = a separate document where all style
information are stored
• Internal Style Sheet = stores style information in the <head> tag;
needs no external file
Inline styles can be used in any element in the HTML document.
To apply styling to
an element, simply use
the style attribute.
This is how it should look in the browser:
MOST COMMONLY USED
INLINE STYLE
• background-color for background color
• color for text colors
• font-family for text fonts
• font-size for text sizes
• text-align for text alignment
Internal CSS is located within an HTML document. It is often used when you want to
define styles that are unique to that particular web page.
It is identified using the
<style> tag within the
<head> section of the
HTML document.
External CSS is used to you have multiple web pages that share similar styling.
External styles are defined by
the <link> element which is
located inside the <head>
section of the HTML page.
Create a new file called style.css.
Using CSS and Not Attributes
Syntax
CSS rules consist of selector and declaration blocks.
• The selector identifies the HTML element to be styled.
• The declaration block contains the property and value pairs that determine how the
element will be styled.
Each pair is separated by a semicolon (;). The declaration block is enclosed in curly braces
({}).
Selectors
Element selector selects an HTML element based on its name.
This is how it should look in the browser:
ID selector is use when you just want to style specific instances of a particular element.
This is how it should look in the browser:
CSS ID selectors are indicated by a hash (#) followed by the ID of the
element.
Class selector points to an HTML element bearing the indicated class attribute.
This is how it should look
in the browser:
Class selectors are indicated by a period (.) followed by the class name.
Comments is use as reminders of why you chose those styles or assigned such values.
A CSS comment starts with /* and ends with */. Comments are ignored by the browser.
Formatting and
Styling Text
Fonts
The font-family property allows you to change the fonts in HTML.
You can specify either a
generic font family such as
“serif,” “sans-serif,”
or “monospace,” or a specific
font family such as “Arial” or
“Times New Roman.”
This is how it should look
in the browser:
Font
Property Value/s Example
Font Family any typeface font-family: arial;
Font Size (Old 7 Size Font System) font-size: 8em;
larger, smaller, ___%, ___pt,
___em
Font Style italic, normal, oblique font-style: oblique;
Font Weight normal, lighter, bold, bolder font-weight: bolder;
(multiples of 100, where 100
= lightest and 900 = boldest)
Colors
You can assign colors to different elements by indicating a value to its color property in
CSS.
HEX (short for hexadecimal)
colors are set using this
format: #RRGGBB. RR, GG,
and BB are red, green, and
blue values, respectively, and
range from 00 to FF (from
lowest to highest intensity).
This is how it should look
in the browser:
While not commonly used for
text elements, background
colors (through the
background-color property)
can also be set using color
names, HEX, and RGB values.
This is how it should look
in the browser:
Color
name red
RGB value example for red
rgb (255, 0, 0)
RGB-HEX code example for red
#ff0000 or #f00
Text Styles
The text-decoration property allows you to add lines to text.
You can set the value to
overline, line-through,
underline, or a combination
of the three.
This is how it should look
in the browser:
Text Alignment
The text-align property is used to set the alignment of the text. It can be set to left,
right, center, or justified.
This is how it should look
in the browser:
Text
Property Value/s Example
Text Align left, right, center, justify text-align: center;
Text Decoration overline, line-through, underline, text-decoration: overline;
none
Text Transform capitalize, uppercase, lowercase, text-transform: uppercase
none
Letter Spacing normal, __em letter-spacing: 1em;
Word Spacing normal, __em word-spacing: normal;
Line Height normal, __%, __em line-height: 230%;
Backgrounds and
Borders
Backgrounds
Color
This is how it should look
in the browser:
Opacity
You can also adjust the opacity or transparency of an element using the opacity
property. It takes a value from 0.0 to 1.0 ranging from transparent to opaque.
This is how it should look
in the browser:
Background Image
This is how it should look
in the browser:
Background Repeat
repeat-x repeat-y
no-repeat
Background Position
✓ top left
✓ center left
✓ bottom left
✓ top right
✓ center right
✓ bottom right
✓ top center
✓ center center
✓ bottom center
You can also use X%
Y% values for more
control.
This is how it should look in the browser:
Background Attachment
Background Size
You can set the width and height of the image
based on pixel values.
This is how it should look in the browser:
You can also use percentages relative to its Using contain would display the whole
parent element’s width and height. background image within the element.
This is how it should look in the This is how it should look in the
browser: browser:
Using cover ensures that the background covers
the whole element.
This is how it should look in the
browser:
Borders
This is how it should look in the browser:
Border-color allows you to set the color of the outline.
Border-width property determines how thick the element’s border is in px, pt, em,
and cm values. You can also use medium, thin, and thick.
This is how it should look in the
browser:
Border-style specifies how the border would look. It can be none (default), solid,
dotted, dashed, and double.
This is how it should look in the
browser:
You can also use 3D styles such as groove, ridge, inset, and outset.
This is how it should look in the
browser:
Selective Border Application
This is how it should look in the
browser:
Laying Out
Elements
CSS Box Model
This is how it should look in the
browser:
Each element can be viewed to follow this Here are some basic ideas behind the model.
box model. ✓ The content can be any text or image or
division (div).
✓ The content has a border surrounding it.
✓ Between the content and the border is a
space called padding.
✓ Around the border is a space called margin.
You can manipulate certain properties of
elements to affect how these boxes
behave. You can:
✓ Set the width and height.
✓ Make borders visible or invisible.
✓ Configure how the boxes flow in relation to
other elements on the page.
The DIV Element
This is how it should look in the browser:
With style
DIVs are basically just containers in which
you can place elements so that you can
style them as a group.
Padding
BEFORE AFTER
Padding can take on any length value. Length values in CSS can be absolute
(px, pt, in, and cm) or relative (em and %).
Margins
BEFORE
AFTER
Like padding, the margin property can take on length values.
Laying Out Elements
Width and Height
The display property determines
how elements flow in the web
page. It can be set to the following
values:
✓ Block
✓ Inline
✓ inline-block
✓ none
This is how it should look in the
browser:
Combining Properties
Have a DIV appear in the middle.
Text-align only affects text
elements. To center DIVs, you
need to assign auto as its margin-
left and margin-right values.
This is how it should look in the
browser:
Combining Properties
Have the DIVs appear alongside each other like
columns. You can use the inline block display
property alongside the width and height
properties in your DIVs to have them display
side-by-side.
This is how it should look in the
browser:
Responsive Design
Ensures that web pages display
properly regardless of the device Without flex
being used.
Flexbox is a container that allows
you to organize its contents in a
grid.
With flex
Flex-wrap
With flex-wrap
Try resizing your browser window.
With flex
THANK YOU FOR
LISTENING!
Don't hesitate to ask any questions!
