Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

CLS 550 Lecture No. 4 Style Sheet (continuing)

memorize.ai (lvl 286)

(0)

18 cards

()

Section 1

Preview this deck

CSS Box Model

Front

1 / 18

CSS

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (18)

Section 1

(18 cards)

CSS Box Model

Front

-Each block element such as a header, nav, main, and footer element is displayed in a browser as a box with content. -The CSS box model describes content boxes on a webpage. -The MARGIN provides passive white space between block elements.Sets the amount of space around the block element (top, right, bottom, left) -margin: 20 px; -margin-top: 2em; -margin-bottom: 150%; -The BORDER separates the padding and the margin of the block element. Sets the format of the block element's border. border: solid 1px #000000; -BORDER-STYLE = Designates the style or a border. border-top-style: solid; border-top-style: dotted; -BORDER-WIDTH = Designates the width of a border border-top-width: 1px; border-bottom-width: thick; -BORDER-COLOR = Designates the border color. border-top-color: #000000; border-bottom-color: gray; BORDER-RADIUS = Rounds the corners of a block element's border. border-radius: 10px; -BOX-SHADOW = adds a shadow to a block element's border. box-shadow: 8px 8px 8px #000000; -PADDING is the passive white space between the content and the border of a block element. Sets the amount of space between content and the border or its block element. -padding: 10 px; -padding:-left: 1.5em; -padding-right: 125%

Back

FORMATS USED TO DISPLAY IMAGES ON THE WEB

Front

GIF = Lossless Compression (LITTLE COLORS-VECTOR) Limited to 8 bit color (256 unique colors) Screen captures/line art Allows animation PNG = Lossless Compression 24 bit color no animation (IN BETWEEN GIF and JPEG) JPEG = Lossy compression (MORE COLORS) Limited to 2 bit color (16,777,216 unique colors) Photographs Flat-color images like logos usually work best as GIFs or PNGs. Full-color images like photos usually work best as JPEGs.

Back

Inline elements

Front

are displayed without line breaks so they flow within the same line. Inline content always appears within block elements.

Back

Other Property

Front

background-color: #CCC; height: 900px; width: 600px; border: thick solid #F00; background-image: url(images/veggie_background.jpg); background-repeat: no-repeat;

Back

CHOOSING A HOST PROVIDER

Front

-Know your hosting needs -Server reliability and uptimes guarantees -⬆ Mission Critical ⬆ $$$$ -99% Uptime means possible 3 days a year down (.99x365) -Hosting upgrade options -Allows for future growth -Numbers of add-on domain -Signup prices vs renewal prices -Refund policy and free trial period -Hosting features -e-commerce features and support -Control panel -Account limitation -Environmental Friendliness -Email hosting (email@yourdomain.com) -Subscription period -Site backup -Live chat/telephone support

Back

CMS Requirements

Front

-PHP - http://php.net MySQL - http://mysql.org (need ability to create MySQL database) -Apache - http://httpd.apache.org -CMS (latest full version) - http://wordpress.org, http://joomla.org, orhttp://drupal.org ftp or shell access to your web server

Back

STEPS IN SETTING UP A CMS WEBSITE

Front

1.- Register your domain (Disney.com) name www.godaddy.com 2.- Create a host account This will house the website files (web server) 3.- Point your domain name's DNS (at registrar) to YOUR HOST PROVIDER'S SERVER 4.- Create a DATABASE AND USER (server) 5.- Create a FTP user for www public directory (server) 6.- Download your CMS from one of the CMS (Domain name IP)

Back

A block element

Front

Appears as a block because it starts and ends with a new line, such as the main element or a paragraph element.

Back

File Compression

Front

-the creation of a smaller file from a larger file -Stores data in a format that requires less space than the original format. WHY COMPRESSION? -Storage = Compressed files take up less space. -Speed/efficiency - in many cases smaller files can be executed or read in less time. -BANDWIDTH/TRANSFER TIME - SMALLER FILES TAKE LESS TIME TO DOWNLOAD/UPLOAD

Back

CSS TEXT PROPERTIES

Front

- font family = specific and general font names: font-family: Cambria, "Times New Roman", serif font-family: Verdana, Arial, sans serif - font-size = Absolute or relative size of a font font-size: 1.5em; font-size: 50% font-size: x-large; font-size: 14pt; - font-weight = weight of a font font-weight: bold; font-weight: bolder; font-weight: lighter; - font-style = Style of a font font-style: normal; font-style: italic; font-style: oblique; - text-align = Alignment of text text-align: center; text-align: right; text-align: justify; - color = Color of text color: red; color: blue; color: green;

Back

CHOOSING THE RIGHTDOMAIN

Front

-Do your homework -Check your completions web sites -Look what other similar domains are doing -Search for available domains -Choose names that are easy to type and remember -Avoid difficult or odd spelling words -Avoid special characters, hyphens, or numbers -Avoid cryptic words -Choose .com -most people assume a name ends in .com -Don't register trademarked domains -Avoidlegal challenges Check your domain at www.uspto.gov -Avoid domains that are too similar -domains that are just a variation of another domain -Check Availability on social media sites

Back

UNDERSTANDING INLINE ELEMENTS AND BLOCK ELEMENTS

Front

-HTML elements are positioned on the webpage as a block or as inline content.

Back

<div>

Front

The <div> tag defines a division or a section in an HTML document. -you can place content directly within sets of <div> tags. -The <div> tag is used to group block-elements to format them with CSS. <div style+"color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>

Back

CSS Colors

Front

HTML uses color names or codes to designate color values. Two types of color codes can be used with CSS: -Hexadecimal values consist of a six-digit number code: background-color: #808080; - RGB (red, green, blue) color values background-color: rgba (0,51,153,.2)

Back

COMPRESSION TYPES

Front

- Lossless Compression - no data is lost, compression process is reversible. gif, png, & tiff - Lossy compression - Some data is lost during compression. This process is irreversible. jpg & tiff. (NEVER USE IT)

Back

DEFINING SEMI-OPAQUE COLORS Opacity

Front

Defines how solid a color appears. A color's opacity is specifies using the following properties: -rgba(red, green, blue, opacity) -hsla(hue, saturation, lightness, opacity) Where opacity sets the opacity of the color ranging from 0 (completely transparent) up to 1.0 (completely opaque) To use a color in a style rule declaration, use the color value as the property value. For example, to style a background color as gray use, background-color: #808080; Black = #000000 rgba(0,0,0) White = #FFFFFF rgba(255,255,255) Red = #FF0000 rgba(255,0,0) Green = #008000 rgba(0,128,0) Blue = #0000FF rgba(0,0,255) Yellow = #FFFF00 rgba(255,255,0) Orange = #FFA500 rgba(255,165,0) Gray = #80,80,80 rgba(128,128,128)

Back

Setting the Margin and Border Spaces

Front

-To set the size of the margin around block-level elements, use: margin: size; margin-top: size; margin-right: size; margin-bottom: size; margin-left: size; -To set the width of the padding space, use the following padding property: padding: size; padding-top right bottom left: size; -To set the size of the border space, use: border-width: size; border-top right bottom left: size;

Back

Fallback Values

Front

They are the additional values provided for the font-family property in case the browser does not support the primary font. CSS measures font sizes using many measurement units: - em = Relative to the default font size of the element. font-size 1.25em; (recommended by W3C: sizes are relative to the browser's default font size) - % = Relative to the default font size of the element. font-size: 50%; (recommended by W3C: sizes are relative to the browser's default font size) - px = Number of pixels. font-size: 2 px; (Depends on screen resolution) - pt = Number of points. font-size 12pt; (use for printing webpages) - keyword = Relative to a limited range of sizes. font-size: xx-small; (Sizes are relative to the browser's default font size but size options are limited)

Back