Class Notes for Monday 2/11/19 & Wednesday 2/13/19
- See your Web Research Presentations
- Get to know CSS
- Learn targeting and inheritance
- Create an External CSS file
- Learn about CSS Selectors
- Build CSS using the CSS Designer in Dreamweaver
Download the Class Presentation PDF
Part1 Week 4 Homework - HTML
Part2 Week 4 Homework - CSS (top section)
Part3 Week 4 Homework - CSS (bottom section)
Web Research Presentations
Introduction to CSS
CSS, or Cascading Style Sheets, is how we style web pages and make them look the way they look. But it isn't just for text styles and layout, you can do so truly amazing art and animation with it as well:
- Like this amazing portrait art created entirely with CSS: http://diana-adrianne.com/purecss-francine/
- or these fun animated dogs: https://blog.codepen.io/2018/09/05/the-dogs-of-codepen/. (Click on the "Run Pen" button to see the animation, click the "CSS" button to take a peek under the hood.)
A CSS rule is made up of the following:
- The selector points to the HTML element you want to style.
- The declaration block contains one or more declarations separated by semicolons.
- Each declaration includes a property name (what is to be changed) and a value (what it is to be changed to), separated by a colon.
- In the example above the h1 selector is being targeted.
- The declarations are indicating that everything with an h1 tag will be blue (color property) and 12px (font-size property).
CSS "cascades" which means children inherit the properties of their parents. By declaring the same properties on children, you can override the parent's properties.
Hex, RGB, and RGBa
- Hexadecimal color values are supported in all browsers and are specified with: #RRGGBB. RR (red), GG (green) and BB (blue) are hexadecimal integers between 00 (lowest) and FF (highest) specifying the intensity of the color.
Example: #000000 is black.
- RGB color values are supported in all browsers and specified with: rgb(red, green, blue). Each parameter (red, green, and blue) defines the intensity of the color as an integer between 0 (lowest) and 255 (highest).
Example: rgb(0,0,0) is black
- RGBa color values are similar to RGB except but with the addition of transparency. They are specified with: rgba(red, green, blue, alpha). The RGB parameters behave the same way, however the alpha defines the opacity of the color from 0 (completely transparent) to 1.0(completely opaque).
Example: rgba (0,0,0,0.5) is 50% transparent black.
Classes vs. IDs
- Classes have a "." before their name when used in CSS. When referenced in the HTML file, you do not use the "." but rather define it on an element as class="myClass". The class selector is used for styling and is not unique allowing you to use the same class on multiple elements. You can also use multiple classes on the same element.
Dreamweaver CSS Designer palette interface
Use the Dreamweaver CSS Designer feature to quickly build your CSS.
CSS Background Properties
- sets the background color of an element
- sets a background image for an element
- displays smooth transitions between two or more specified colors
- sets the starting position of a background image
- specifies the scale of a background image
- specifies where the background is cropped
- indicates if a background image will be repeated and on what axis
- specifies where the background image is positioned
- specifies whether the background image will be fixed or scroll with page
- attaches one or more shadows to an element
- position of the horizontal shadow
- position of the vertical shadow
- blur distance
- size of the shadow
- color of the shadow
- changes the shadow to inside an element
CSS Layout Properties
- sets the width for an element
- sets the height for an element
- when an element is responsive, this specifies the minimum width of the element
- when an element is responsive, this specifies the minimum height of the element
- when an element is responsive, this specifies the maximum width of the element
- when an element is responsive, this specifies the maximum height of the element
- indicates if, or how, an element is rendered
- tells the browser what sizing properties (width and height) to include - border-box or just the content-box
- specifies the amount of space around an element
- specifies the amount of space between the content of an element and its edge - increases the size of the element
- alters the way elements are positioned on a page
- specifies the side around which other elements flow around the floated element
- specifies the sides of an element that do not allow other floating elements - avoids a non-floating element going under a floating element
- overflow (x or y)
- determines what happens if the contents of a container exceed its size:
- increases the container’s size so that all of its contents are visible
- maintains the container’s size and clips content that doesn’t fit - no scroll bars are provided.
- adds scroll bars to the container regardless of whether the contents exceed the container’s size
- makes scroll bars appear only when the container’s contents exceed its boundaries
- determines the initial display condition of the content
- determines the stacking order of the content
- specifies how much you can see through an element
CSS Border Properties
- the tabs choices on the top
- choose full border around entire shape or top, right, bottom, and/or left border individually, where you can set different attributes for any side
- specifies the thickness of the border - top, bottom, left, and right can be done individually
- specifies the kind of border, such as solid, dashed, or double - top, bottom, left, and right can be done individually
- specifies the color of the border - top, bottom, left, and right can be done individually
- creates rounded corners
- specifies whether table borders are combined into a single border or detached
- sets the spacing between borders of adjacent table cells when the border-collapse option is set to separate
CSS Text Properties
- sets the text color
- sets the font family (or series of families) for the style - with the default font list browsers display text in the first font of the series that is installed on the user’s system - web fonts appear the same on all systems as the font data is online
- specifies Normal, Italic, or Oblique as the font style
- sets the small caps variant on text - Dreamweaver does not display this attribute in design mode
- applies a specific or relative amount of boldface to the font - normal is equivalent to 400 - bold is equivalent to 700
- defines the size of the text
- sets the height of the line on which the text is placed - this setting is traditionally called leading - select Normal to have the line height for the font size calculated automatically or enter an exact value
- text align
- sets left, right, center or justify alignment of text within the element
- adds an underline, overline, strike-through, or makes the text blink
- text indent
- specifies how far the first line of text indents
- adds a shadow to your text on the horizontal axis
- adds a shadow to your text on the verticle axis
- controls the amount of blur in the shadow
- specifies the color of the shadow
- changes the case of your text: capitalize, uppercase, or lowercase
- defines the amount of white space between letters
- defines the amount of white space between words
- tells the browser how to handle line breaks and spaces in a block of text
- aligns inline elements, such as text and images, in relation to elements that surround them
- sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside)
- specifies a custom image for bullets
- sets the appearance of bullets or number