Scribd
Upload
2 views5 pages

FWP Prelims Reviewer Handout 3

The document provides an overview of Cascading Style Sheets (CSS), detailing its role in enhancing the visual presentation of HTML webpages. It covers CSS syntax, internal and external stylesheets, text styling and formatting, color addition, background properties, and the box model. Additionally, it explains various border styles and properties related to margins and padding.

Uploaded by

Rimuru Tempest
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
2 views5 pages

FWP Prelims Reviewer Handout 3

The document provides an overview of Cascading Style Sheets (CSS), detailing its role in enhancing the visual presentation of HTML webpages. It covers CSS syntax, internal and external stylesheets, text styling and formatting, color addition, background properties, and the box model. Additionally, it explains various border styles and properties related to margins and padding.

Uploaded by

Rimuru Tempest
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/ 5

Subject: Fundamentals of Web Programming Term: Prelims

Section: BS401 Handout: 3

Connecting CSS to HTML (Casabona, 2020)


 Cascading Style Sheet (CSS)
- It supplies the style.
- It is used to change the look and user experience of a webpage, by targeting HTML
elements.
- It describes how a webpage should look in terms of colors, fonts, and spacing
among others.
- It can make the website look whatever the designer wants.
- CSS is currently using its third version CSS3. Allows animations, more visual effects,
and more support for layout features such as columns and grids.
- The version is more dependent on the user’s browser
- Older browsers are unlikely to support newer feature of CSS3.
- HTML and CSS are of the linked as they are both processed by a browser.
- Without CSS webpage will look much more than a Microsoft Word Document.

 CSS Syntax
- “cascading” means that styles are applied in the order they are encountered by the
browser. From top to the bottom of the style sheet.
- uses codes to define the styles to be applied to each element in a webpage.
- Style sheet is the collection of code statements.
o Syntax:

 p is the selector. Which is the specific HTML element to be styled with


CSS.
 Followed by opening and closing curly brace ({}) which contains
declarations.
 Declarations includes the property (font size, color) and the value (30px,
orange) and ends with semicolon (;).
 Internal Style Sheet
- Refers when the CSS ruleset is inside the HTML document. The <style> tag is used for
this approach which is placed between the opening and closing tag <head> tag or
anywhere the </html> tag.

 External Style Sheet


- Refers to when CSS ruleset is on a separate file.
- The CSS between <style> tag can be placed in a separate file using the .css extension.
- It needs to be referenced in the head of the HTML documents using the <link> tag.

- <link> tag uses the href attribute which refers to the relative or absolute URL of the
file.

Styling and Formatting

 Styling Text
- can have the biggest impact on the general design of the website.
- Traditionally web-safe fonts include Arial, Courier New, Georgia, Verdana, and New
Times Roman.
- In CSS, the font-family property is used to define the font.
o It is a comma-separated list of fonts from highest to lowest priority.
o This process is called font stack.

 Sizing Text
- Text can be resized using the font-size property.

- Pixels (px) is a fixed measurement that gives designer the most control over size.
- Percentage (%) has a default size of 16px.

 Formatting Text
o font-weight – allows the application of different boldness to the text including
normal is the unbold text, lighter which is the thinner than normal weight, bold
creates darker text, and bolder makes text thicker than the bold weight. Uses
font-weight: value; as descriptor.
o font-style – this property italicized text. It includes normal, straight text, italic,
oblique. It uses font-style: value; as its descriptor.
o text-decoration – allows emphasis lines to text. It includes none means no
change, underline to add a line under the text, overline adds line over the text,
and line-through same as strike. It uses text-decoration: value; as its descriptor.
o text-align – aligns the text horizontally. Uses text-align: value; as its descriptor.
Values include left, right, center, and justify.

 Adding Colors
- RGB: a comma-separated list of amounts of red, green, and blue in a color, ranging
from 0 to 255.
- Hexadecimal (hex) values: a six-character code that defines the RGB in a color
preceded by a #.
- Color names: a set of predefined names for colors. The easier method to use.

 Background Property
- This adds an image or a color to the background of the webpage.
- Background image can be set in Horizontal or vertical views.
- Uses background-image: value; as its descriptor. Value is the link of the image.
- background-repeat: no-repeat sets the background without repetition.
- repeat-x and repeat-y repeat the background horizontally or vertically.
 Box Model
- refers to how CCS sees every HTML element as if it is in its own box.
- “box” contains, borders, paddings, margins and content.

 Border
- Can be put on all four sides or put individually on any side.
- Can be also modified using colors, styles, widths, radius, and padding.
- Margin is the property that adds spacing around the content.
- Padding adds spacing within the elements or white space inside the container.
Style has following values and border styles:
 Dotted – consist of rounded dots that display on a border.
 Solid – a single, straight and solid border.
 Dashed – short dashes or line segments.
 Double – two-line solid border.
 Groove – a three-dimensional border that looks like it is carved.
 Ridge – a three-dimensional border that is opposite of the groove style.
 Inset – makes content in the border look like it is coming inside od the
canvas.
 Outset – makes the content in the border look it is coming outside of the
canvas.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy