(Music) Hello and 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 <b> tag, as shown here.</b> 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 using (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 using (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) and 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 two ways, the <s> tag</s> or the <link> tag Style tag It “dirties” the page with a non-HTML code. You apply this style to only one page. 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. Link tag 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 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. Choose a layout type. Fluid: the height and width of elements is flexible and can expand or contract. Fixed: the height and width of elements remains the same.
