CSS changes the font styles, backgrounds, and other visual elements, but it does much more than make a page attractive. CSS can also affect the usability and accessibility of page elements.
HTML is the skeleton that gives the page structure, but to create dynamic websites, developers use Cascading Style Sheets to modify the appearance and add function to the HTML framework.
Explain the function and purpose of the Cascading Style Sheets (CSS) technology
The purpose of CSS is to modify the appearance of HTML elements; CSS does not function on its own. Without HTML, there can be no CSS.
Three different ways to apply CSS to HTML:
Inline
The CSS rules are applied directly within the HTML tags. Internal
The CSS rules are applied to a code block that’s placed in the <head> of the HTML file. External
The CSS rules are added to a separate file and that file is referenced in the HTML <head>.
CSS Advantages
Less code means faster downloads Easier maintenance saves time and resources Wider range of attributes allows for more creative styles Increased compatibility works with different devices and browsers!
Explain the importance of using style guides when designing sites and documents
Style Guides
A style guide offers a comprehensive set of guidelines that not only inform but also streamline decision-making, allowing developers to focus on implementing designs rather than creating them.
This ensures that all team members have a clear direction and reduces the need for decision-making on-the-fly, which can lead to inconsistencies. They ensure that everyone involved in the development process is on the same page, which is essential for creating cohesive and effective websites. Reflecting Organizational Identity: A style guide is more than just a set of rules for colors and fonts; it encapsulates the organization's ethos—its philosophy, vision, and mission. This aligns every design element with the broader objectives of the organization, ensuring that the website communicates the desired brand message consistently across all pages. The style guide should also include the website's target audience and the organization's goals for reaching that audience. Ideally, the style guide should provide the developers with everything they need to know about the website before they start to build it. The style guide should include the terms of static design elements and styles, such as The organization's logo and color themes Behaviors and actions, such as which kinds of user interactions are acceptable. Characteristics of an effective style guide:
Provide logos and regulations for how they're used Offer guidance into logo and color use across different channels Establish standards for typography and image usage Set a baseline for voice, tone and messaging Ensuring all written content meets high standards for correctness and clarity, while also making sure it fits the unique style and needs of the brand it represents. From a practical point of view, style guides provide developers with usable media and content, such as:
Font families and font sizes Text and other images for content
CSS Terms and Syntax
In order to manipulate HTML elements, developers need to use a certain code and syntax. This is called the CSS Syntax.
The CSS syntax has three parts
Selector
The Selector is used to identify which specific elements will be modified by the CSS Examples:
p selects all <p> (paragraph) elements. .class selects all elements with the class attribute containing "class". #id selects the element with the specific id "id". There are multiple ways to select which elements will be modified by the CSS: ID selector targets elements using the ID attribute (#). It works best when you need to uniquely style a specific element once. Syntax: Prefix the ID value with a hash (#) to define an ID selector in CSS. Class selector works best when you need to apply CSS to multiple elements grouped under a class attribute (.) Syntax: Prefix the class name with a dot (.) to define a class selector in CSS. Tag selector targets page components without using attributes. It targets the tag itself (p). A tag selector targets all HTML elements of a specific type, such as <p>, <div>, or <h1>. This is useful for defining a uniform style for all elements of a certain type, ensuring consistency throughout the webpage. Syntax: Simply use the HTML tag name as the selector. Property
The Property is the type of attribute of HTML elements that you want to style. It defines the aspect of the element you want to change, such as its color, font, width, etc. Examples:
color adjusts the text color. font-size changes the size of the text. margin controls the space around elements. Declaration
The Declaration is the combination of the property and the value the selected element will take followed by a semicolon. It specifies how the selected HTML elements should be styled. It’s the combination of a CSS property and a value set for that property, ending with a semicolon. Examples:
color: red; is a declaration where color is the property, and red is the value. In the block { font-size: 14px; color: blue; }, there are two declarations: one setting the font size and the other setting the color.
Styling HTML elements that have specific attributes or attribute values
Example: Everywhere there is a paragraph element <p> that uses a certain border style, let’s say ‘Dotted’, will have a green background.
p[border-style] { background-color:green; }
p[border-style:dotted] { background-color:green; }
This also can be seen when using the first-of-type and last-of-type selector:
p:first-of-type { background:yellow; }
p:last-of-type { background:red; }
In this example, the CSS definitions would apply a yellow background color for the first paragraph, red for the last paragraph, and green to all other paragraphs in between CSS elements can also be referenced in conjunction with one another:
div p { background-color:yellow; } applies yellow background color to all <p> elements placed anywhere inside a <div> element; div>p { background-color:yellow; } applies yellow background color to all <p> elements immediately defined as a child of a <div> element; div+p { background-color:yellow; } applies yellow background color to all <p> elements not inside, but succeeding immediately a <div> element; div~p { background-color:yellow; } applies yellow background color to all <p> elements preceded by a <div> element with the same parent;
Values for the Position Property
Static
Default setting for any HTML element. Behavior: The element is positioned according to the normal flow of the page. It doesn’t respond to top, right, bottom, or left properties. Example: A paragraph following another paragraph without any specific positioning. Relative
Similar to static, but allows you to move the element from its normal position. Behavior: You can shift an element left, right, up, or down relative to where it would normally appear. Other content will not adjust to fit into any gap left by the element’s movement. Example: A paragraph that is moved 20 pixels to the right and 10 pixels down from where it would normally be. Fixed
Pinned to the viewport, which means it stays in the same place even if the page scrolls. Behavior: Useful for creating elements that the user should always see, like a navigation bar or a sidebar. Example: A navigation bar that stays at the top of the page when you scroll. Sticky
Hybrid between relative and fixed positioning. Behavior: An element is treated as relative until the page is scrolled to a certain point, at which it becomes fixed. This is great for elements you want to show only after scrolling past a certain point, like a "back to top" button. Example: A sidebar that becomes fixed after scrolling past it. Absolute
Positioned relative to its nearest positioned ancestor (i.e., an ancestor element with a position other than static). Behavior: It can be placed precisely within its containing element using top, right, bottom, or left properties. If no positioned ancestors are available, it uses the document body, and it moves as the page scrolls. Absolute positions an element relative to the parent. If there are no parents, then it will default to relative to the document body. Example: A box inside a relatively positioned container that is placed at the bottom right corner of the container. Inherit
Takes on the position value of its parent element. Behavior: Useful when you want to ensure that an element follows the positioning type of its parent without explicitly setting the same value. Example: A child div that inherits the positioning type from its parent. Initial
Reverts to the default value of the position property, which is static. Behavior: Useful for resetting the position of an element if it has been changed elsewhere. Example: A div that explicitly uses the default positioning even if styles elsewhere might have changed it.
Float Property
The float property can be used to position an element to the left or right side of its parent container, allowing text and inline elements to wrap around it.
Floating an element changes the behavior of that element and the block level elements that follow it in a normal flow.
Floating an element moves it to the left or right and removes it from the normal flow Left - The element must float on the left side of its containing block. Right - The element must float on the right side of its containing block. None - The element must not float. inline-start - The element must float on the start side of its containing block. That is the left side with ltr scripts, and the right side with rtl scripts. inline-end - The element must float on the end side of its containing block. That is the right side with ltr scripts, and the left side with rtl scripts. inherit - makes an element inherit the float value from its parent element.
Clear
The float property can also be used to float multiple elements at once. However, when multiple floated elements have different heights, it can affect their layout on the page. Specifically, elements can “bump” into each other and not allow other elements to properly move to the left or right.
The clear property specifies how elements should behave when they bump into each other on the page. It can take on one of the following values: left—the left side of the element will not touch any other element within the same containing element. right—the right side of the element will not touch any other element within the same containing element. both—neither side of the element will touch any other element within the same containing element. none—the element can touch either side. Document Flow
Document Flow is the way all the elements of a web page work together. This is controlled by the display property.
Display property
Display property - CSS code that controls the layout of an HTML page.
There are two element levels that define a document flow:
Block level: elements that stack vertically on a page. Inline level: The CSS display property provides the ability to make any element an inline element. This includes elements that are not inline by default such as paragraphs, divs, and headings Elements that stack horizontally on a page; Does not have a height and width property. Inline-Block level: Inline-block display combines features of both inline and block elements. Inline-block elements can appear next to each other and we can specify their dimensions using the width and height properties. Images are the best example of default inline-block elements. Elements that appear one below the other are described as block elements, in contrast to inline elements, which appear beside one another like the individual words in a paragraph. There are many values the display property can take. The most common are listed below:
Expected display (note that block is the default option for <div> tag):
Expected display (note that the encompassing <div> tag remains in block display, but the box1 and box2 width properties were discarded by the inline display option): Stacks items horizontally but does not permit the use of width and height properties Expected display (note that the encompassing <div> tag remains in block display, but now the box1 and box2 width properties were not discarded by the inline-block display option): Expected display (note that the change only needs to be done in the encompassing <div> tag and the container is stretched until the next <div> container): Expected display (note that the change only needs to be done in the encompassing <div> tag, but the number and size of columns, rows, and gaps need to be specified with the properties grid-template-columns, grid-template-rows, and grid-gap): Normal Flow
Normal Flow is what a document will have if the HTML page has not been modified by CSS yet.
This means that the elements will be set at default positions according to the browser. Many developers begin by creating a normal flow document before adding CSS, because it helps to focus on writing clean and well-structured code.
Using CSS3 to Position Content
Display options is a powerful tool that can be used to create consistent positioning of elements on a web page.
Normally, Position layouts fall under these two types:
Fixed-width layout - gives the layout a specific width and makes the layout non-responsive, which often becomes a problem for mobile devices and other smaller screens. Liquid Layout - this layout adjusts itself proportionate to the percentages given. Makes the layout responsive. Gives relative values to the widths of elements such as percentage or ems. This layout will maintain the amount of space they take up on a page regardless of the screen size. A lot more commonly used these days; Flex and Grid properties allow for the creation of these layouts without having to totally rely on the correct percentages. 
Unit 2: Cascading Style Sheets
