Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
32 views

Week 4 and 5 - HTML STYLES and CSS

The document discusses various CSS concepts including style sheets, selectors, fonts, colors, text styles, backgrounds, borders, and the CSS box model. Key points covered include the different types of style sheets (inline, internal, external), common CSS selectors like element, ID, and class selectors, how to specify fonts, colors, text alignment and decoration, background colors, images, positioning and size, border properties, and an overview of the CSS box model and its components (content, padding, border, margin).

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Week 4 and 5 - HTML STYLES and CSS

The document discusses various CSS concepts including style sheets, selectors, fonts, colors, text styles, backgrounds, borders, and the CSS box model. Key points covered include the different types of style sheets (inline, internal, external), common CSS selectors like element, ID, and class selectors, how to specify fonts, colors, text alignment and decoration, background colors, images, positioning and size, border properties, and an overview of the CSS box model and its components (content, padding, border, margin).

Uploaded by

Maam Sheinnyx
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

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!

You might also like