Welcome to CSS - Styling HTML After watching this video, you will be able to: Explain what a Cascade Style Sheet (CSS) is Describe how to use CSS to format HTML elements Describe how to use CSS in HTML documents to format web pages By using a combination of HTML5, JavaScript, and cascading style sheets, developers can create web pages that can be displayed on desktop computers and mobile devices. These technologies have powerful features that can be used to show rich interactive applications without requiring plug-in technologies, like the Flash media player. HTML documents might be rendered to a browser window, or through a speech synthesizer to provide assistive technologies for vision impaired people. Being able to meet accessibility requirements is one advantage of using HTML markup over browser plug-ins for delivering interactive content. CSS is the design that is layered over the top of an HTML web page CSS is a style sheet language that describes how HTML elements are displayed What makes the style sheet “cascading” is that developers can apply CSS to create a uniform look throughout each element of each page of the website Child and descendant elements often inherit styles that are defined for parent elements, however, exceptions to this rule do exist. For websites, it is an important concept to separate the data from the design The data is sent to the browser by using HTML, and the design is applied to that data by using a CSS This separation allows people to render a web page without your design if they have special accessibility needs It allows machines (such as search engines) to index a website without the design interfering You can code CSS as a style attribute in an HTML tag, a head section of a document, or an external document The preference is to code CSS in external documents (referred to as style sheets) You can use CSS to control a document’s appearance and specify style rules for the following web page elements: Fonts Text Colors Backgrounds Sizes Borders Spacing Positioning Visual effects Tables and Lists CSS style element are structured like this. In this example, the html-tag-name can be one of the following elements: Any of the tags you find in HTML code (for example, <a>, <div>, <li>, or <label>, etc.) An id reference that is displayed with a preceding hash symbol (#) in CSS code A class reference that is displayed with a preceding dot/period (.) symbol in CSS code When making a site design, begin by establishing the base style. Establish a base style by styling the <body> tag, as shown here. This example makes the following styles: Sets the background color: off-white (background-color) Ensures that the font color is black (color) Ensures that all content edges match the edge of the browser window frame (margin and padding) Horizontally aligns the textual content to the left (text-align) Sets the font size to the browser’s default (font-size) and uses a sans-serif (a font without the little flicks around the edges) as font family (font-family) These settings are simple. Generally, follow these guidelines: When a color is specified, use Red-Green-Blue (RGB) hexadecimal light values. When a size is specified, use pixels (indicated by a px after the number); an em, which is indicated by em after the number (that is, the size of the font multiplied by the specified number); or a percentage, which is indicated by a % after the number. Text can be aligned left, right, or center. Floats can also be left or right. Vertical alignments must be top, middle, or bottom. Fonts can be any specific font or font family (serif, sans-serif, or monospace) or even a downloadable font. One of the most important decisions you must make when you are determining the design of your website is whether to use a fluid or a fixed layout: A fluid layout: is a layout in which the height and width of elements is flexible and can expand or contract based on the browser window, the operating system, and other user preferences. You specify these elements mostly by using percentages and ems. A fixed layout: is a layout where you specify the height and width of elements, and those values remain the same regardless of which operating system or browser you use to access the website. You specify these elements mostly by using pixels When determining the layout, consider also the pros and cons for fluid and fixed layouts The type of layout you choose depends on the type and amount of content and the target audience of the website. To apply a CSS, you must tell the browser where to look for it. This step is the only true point where HTML references a CSS. You can make the reference in one of three ways: Inline CSS This is used for a single HTML element, But the HTML document can get messy very quickly as more styles get added To use this method, insert the "style" attribute inside any HTML element then there is an Internal CSS. This is used for a single page, however It “dirties” the page with a non-HTML code If you copy and paste this style on each page, this approach increases the load time of each page, which causes the user to wait longer To use this method, the <style> tag must be used, with your CSS code inside Finally, there's the external CSS. This method is used to style an entire website You can link to it from other pages, which ensures a clean HTML and a smaller page size To use this method, the <link> tag must be added to the <head> tag section in your HTML code While it's not recommended, it is possible to use a combination of all three ways. In this case, if more than one CSS method points to an element, the type with the highest priority will override the others and be applied to that element. The order of precedence for CSS styles is inline CSS, which has a higher priority than internal CSS, which, in turn, has a higher priority than external CSS. In this video, you learned: CSS creates a uniform look throughout each element of each page of the website CSS design is separate from the data Design can be removed for special accessibility renders Search engines can index the website without the design interfering CSS is usually coded in external style sheets Create base styles for your website first You also learned you must choose a layout type Fluid: the height and width of elements is flexible and can expand or contract or Fixed: the height and width of elements remains the same And finally, HTML references CSS in three ways: Inline CSS, Internal CSS, and External CSS.
