Scribd
Upload
23 views8 pages

LESSON Reviewer

Uploaded by

hafajutagana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views8 pages

LESSON Reviewer

Uploaded by

hafajutagana
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Lesson 7: Introduction to CSS

Three language that is used in creating a Web Page


1. HTML (Structure)
2. CSS (Appearance)
3. JavaScript (Actions)
Cascading refers to the set of rules for resolving conflicts with multiple CSS rules applied to the same elements.
Style is how you want a certain part of your page to look. You can set things like color, font, margins for HTML elements.
Sheets are like templates where set of rules for determining how the webpage will look is stored

Advantage of CSS
CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages.
Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time.
Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated
automatically.
Superior styles to HTML − CSS have much wider array of attributes than HTML, so you can give a far better look to your
HTML page in comparison to HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device.
Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS.

Who Creates and Maintains CSS? - CSS Working Group

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your
document. A style rule is made of three parts.
selector {property: value}
CSS Syntax Rules
selector {property: value}
1. Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like
<h1> or <table> etc.

2. Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS
properties. They could be color, border etc.
3. Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

Example:
CSS Selector
1. Element or Type selectors - The element selector selects HTML elements based on the element name.
element {property: value}
2. 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.
#id {property: value}
3. 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.
#class {property: value}
Note: The most important difference between ID’s and classes is that there can be only one ID on a page, but multiple
classes. An ID is more specific than a class. An element can have both ID and multiple classes.
4. Universal Selector - Rather than selecting elements of a specific type, the universal selector quite simply matches the
name of any element type.
* {property: value}
5. Descendant Selector
- A way to target elements that are descendants of a specific element.
- It allows you to style elements based on their relationship to another element in the HTML document hierarchy.
- The syntax for the descendant selector is simply placing a space between two selectors.
p d {property: value}
INSERTING A STYLE SHEET
1. Inline Styles
- An inline CSS is used to apply a unique style to a single HTML element.
- An inline CSS uses the style attribute of an HTML element.
<element style=”property: value;”>
2. Internal Style Sheet - Internal styles are defined within the section of an HTML page.
<style> selector {property:value} <style>
3. External Style Sheet
- Styles are specified in an external CSS file.
- Each page must include a reference to the external style sheet file inside the element.
<head> <link rel=”stylesheet” type=”text/css” href=”mycss.css” <head>

Some things you can change in CSS:


1. Colors
2. Type
3. Type Size
4. Backgrounds
5. Spacing
6. Sizes
7. Borders
8. Positions
Some things you can’t change in CSS:
1. Content
2. Markup

Lesson 8: CSS Properties


CSS Properties
1. CSS Colors
- CSS uses color values to specify a color.
- Typically, these are used to set a color either for the foreground of an element (text) or for the background of the
element.
- They can also be used to affect the color of borders and other decorative effects.

Colors Format

Format Syntax Example


1. Hex Code – a #RRGGBB p{color:#FF0000;}
hexadecimal is a 6-digit
representation of a color.
2. Short Hex Code - the 3 #RGB p{color:#6A7;}
digit hex code can only be
used when both the
values are the same for
each components.
3. RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
4. RGB Absolute - has rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
parameter between 0-
255.
RGBA Value - are an
extension of RGB color
values with an alpha
channel, which specifies
the opacity for a color.
Transparency from 0-10.
5. Keyword - using a aqua, black, green p{color:teal;}
predefined color name.
- Has 140 colors.
6. HSL (hue, saturation,
lightness)
- 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.

2. Backgrounds - CSS Background properties is used to define the background effects of an element.
List of Background Properties

1. Background-color
- The background-color property specifies the background color of an element.

2. Background-image
- The background-image property specifies an image to use as the background of an element.
3. Background-repeat
- By default, the background-image property repeats an image both horizontally and vertically.\

background-repeat: repeat-x; (horizontal)


background-repeat: repeat-y; (vertical)
background-repeat: no-repeat;

4. Background-position
- Position of an image can be set by using:
background-position: right top;

3. Shorthand Property - to shorten the code, it is also possible to specify all the background properties in one single
property.
When using the shorthand property, the order of the property values is:
a. background-color
b. background-image
c. background-repeat
d. background-attachment
e. background-position
Example:
body {
background: #00ff00 url(“img_tree.jpeg”) no-repeat right top;
}
4. Text Color - color property is used to set the color of the text.
Example:
H1{
background-color: green;
color: white;
}
5. Text Alignment – a property used to set the horizontal alignment of a text.
text-decoration-line: overline underline;
text-decoration-color: blue;
text-decoration-style: dashed;
text-decoration-thickness: 5px;
Shorthand Property:
p{
text-decoration: overline underline purple dashed 10px;
}
6. Text Transformation – the text-transform property is used to specify uppercase and lowercase letters in a text.
text-transform: uppercase; (to all caps)
text-transform: lowercase; (to small)
text-transform: capitalize; (first letter cap)

7. CSS Font - In CSS there are five generic font families:


a. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
b. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
c. Monospace fonts here all the letters have the same fixed width. They create a mechanical look.
d. Cursive fonts imitate human handwriting.
e. Fantasy fonts are decorative/playful fonts.

8. Font Family - this should hold several font names as a "fallback" system, to ensure maximum compatibility
between browsers/operating systems.

Example: font-family: "Times New Roman", Times, serif;

9. Font Style - this property is mostly used to specify italic text.

Example:

font-style: normal;

font-style: italic;

font-style: oblique;

10. Font Weight - this property specifies the weight of a font:

Example:

font-weight: normal;
font-weight: bold;

11. Font Size – this value can be an absolute, or relative size.

Example: font-size: 40px; (16px=1em)

Absolute size:

- Sets the text to a specified size.


- Does not allow a user to change the text size in all browsers (bad for accessibility reasons).
- Absolute size is useful when the physical size of the output is known.

Relative size:

- Sets the size relative to surrounding elements.


- Allows a user to change the text size in browsers.

12. Margins – To the CSS margin properties are used to create space around elements, outside of any defined
borders.

Example:

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

Shorthand Property:

margin: 100px 100px 150px 80px;

13. Padding - the CSS padding properties are used to generate space around an element's content, inside of any
defined borders.

Example:

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

Shorthand Property:

padding: 20px 30px 40px 50px;


Week 3

What is Bootstrap

Bootstrap is a powerful front-end framework for faster and easier web development.

Bootstrap gives the ability to create flexible and responsive web layouts with much less efforts.

History of Bootstrap

Bootstrap was known as Twitter Blueprint.

Developed by Mark Otto and Jacob Thornton at Twitter in mid 2010.

It was released as an open-source product in August 2011 on GitHub.

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust depends on the screen.

A list of reasons why to learn Bootstrap?

A list of reasons why to learn Bootstrap?

1. Mobile First Approach


2. Browser Support
3. Easy to Get Started
4. Responsive Design

Bootstrap Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page

The grid system is responsive, and the columns will rearrange automatically depending on the screen size.

If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Bootstrap Breakpoints

Extra Small (xs): Used for screens smaller than 576 pixels. This is typically the default styling for mobile devices.

Small (sm): Used for screens equal to or larger than 576 pixels. This is commonly used for small tablets and larger
mobile devices.

Medium (md): Used for screens equal to or larger than 768 pixels. This is typically used for larger tablets and small
laptops.

Large (lg): Used for screens equal to or larger than 992 pixels. This is commonly used for larger laptops and desktops.

Extra Large (xl): Used for screens equal to or larger than 1200 pixels. This is typically used for larger desktop
monitors.

What is Responsive Design?

Responsive web design is a process of designing and building websites to provide better accessibility and optimal
viewing experience to the user by optimizing it for different devices.

You might also like