• Module 1 Internal CSS
• Module 1 External CSS

Module 1

There are three ways to introduce CSS. Inline, internal, and external.

• Inline uses the style attribute of HTML, which applies to the individual tag.
• The style tag goes in the head of the document and applies to the entire document.
• External uses a link tag to connect a .css file to the HTML file.

There are many different way to use measurements in webpages, here are a few.

• mm "Refers to millimeter, it is used to specify the measurements in millimeters."
• cm "Refers to centimeter, it is used to specify the measurements in centimeters."
• Q "Refers to Quarter-millimeters, it is used to specify the measurements in centimeters."
• in "Refers to inches, it is used to specify the measurement in inches."
• pt "Refers to point, it is used to specify the measurements in points."
• pc "Refers to picas, it is used to specify the measurement in picas."
• px "Refers to pixels, it is used to specify the measurement in pixels."

Selectors in CSS refer to what type of object is being modified. For example if the selector is h2, then the following CSS properties will affect the h2 tag.

Properties in CSS refer to the specific things being changed about an object. Such as font size or background color.

Values are the numbers used for properties. An example being, if we are changing the font-size, our property would be 16px or something similar.

• Module 2

Module 2

CSS offers several methods to apply colors to your web elements. You can use:

• Named Colors: Predefined color names (e.g., red, blue).
• HEX Codes: A six-digit code preceded by a hash (e.g., #3498db).
• RGB/RGBA: Specify colors using the red, green, and blue components, with rgba() allowing for transparency via the fourth parameter.

The CSS box model is essential for designing and laying out web pages. It consists of:

• Content: The actual content (text, image, etc.) of the box.
• Padding: The space between the content and the border.
• Border: The edge that surrounds the padding and content.
• Margin: The space outside the border, separating the box from other elements.

Module 3

• Module 3 Background Color
• Module 3 Background Image

There are two types of backgrounds discussed in this module, images and colors.

In the colors section I have three examples of background colors showing the different methods of setting color

In the images sections I also have three examples of how images can be set for the background. The first one uses the background-size: contain. The second uses background: strech, the third does not allow the background to repeat

Module 4

• Module 4

There are five types of selectors in CSS

• DIV: A block-level container used to group other elements together for styling and layout purposes
• SPAN: An inline container used to apply styles or manipulate specific parts of text within a larger block of content
• CLASS: A reusable CSS selector that can be applied to multiple elements for styling or scripting
• ID: A unique identifier for a single element on a page. IDs should not be reused for multiple elements
• CHILD: Targets only direct children of a specific parent

Module 5

• Module 5

Here are all of the criteria we are going over in this week.

• Pseudo-classes (like :hover, :first-child)
• My example uses :hover to turn the button dark blue.
• Pseudo-elements (like ::before, ::after)
• My example changes text with the heading class to start with "before text!! "
• float to place elements side by side
• My example has a few div boxes line up horizontally with the float: left attribute
• clear to prevent elements from wrapping around floated elements
• My example uses clear: both to push elements below the floated boxes