Fundamentals of Cascading Style Sheet (CSS) PDF

IT2301 FUNDAMENTALS OF CASCADING STYLE SHEET (CSS) Connecting CSS to HTML (Casabona, 2020) As HTML provides the structure of the webpage, Cascading Style Sheet (CSS) supplies the style. CSS describes how a webpage should look in terms of colors, fonts, and spacing among others. It...

IT2301 FUNDAMENTALS OF CASCADING STYLE SHEET (CSS) Connecting CSS to HTML (Casabona, 2020) As HTML provides the structure of the webpage, Cascading Style Sheet (CSS) supplies the style. CSS describes how a webpage should look in terms of colors, fonts, and spacing among others. It can make the website look whatever the designer wants. CSS is currently on its third version, CSS3, which allows animations, more visual effects, and more support for layout features such as columns and grids. This version is more dependent on the user’s browsers. With HTML, browsers treat unknown tags as plain text, making them render properly, while older browsers are unlikely to support newer features of CSS3. Although HTML and CSS perform different functions for a website, they are often linked as they are both processed by a browser. They are also the two (2) fundamental languages for making modern websites, though HMTL is only required to make a webpage, without CSS, the webpage will not look much more than a Microsoft Word document. Figure 1. HTML only. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc. Figure 2. HTML with CSS. Retrieved from Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc. 03 Handout 1 *Property of STI  [email protected] Page 1 of 6  IT2301 CSS Syntax (Casabona, 2020) CSS is used to change the look and user experience of a webpage by targeting HTML elements and applying different styles such as formatting the text, changing the font, or arranging the layout. The “cascading” part of CSS means that styles are applied in the order they are encountered by the browser, from the top of the style sheet to the bottom. If line 1 is defined that paragraphs should have blue text, and line 10 is defined to have red, the paragraphs will have red text. CSS uses codes to define the styles to be applied to each element in a webpage. A collection of these code statements is called a style sheet which can be stored in the HTML document they apply to or in separate text files. A CSS statement or ruleset contains several parts. p { In this syntax, p is the selector, which is the specific HTML element to be styled font-size: 30px; with CSS. The selector is followed by an opening and closing curly brace which color: orange; contains the declaration. The declaration includes the property (font size, } color), and the value (30px, orange), and ends with a semicolon (;). There are two (2) primary approaches to adding CSS to any webpage: as an internal style sheet in the HTML document and as an external style sheet in a separate file. Internal Style Sheet It refers to when the CSS ruleset is inside the HTML document. The tag is used for this approach which is placed between the opening and closing tag or anywhere before the tag such as: Reminder to be kind. Output: p { font-size: 30px; color: orange; } External Style Sheet It refers to when the CSS ruleset is on a separate file. The CSS between the tags can be placed in a separate file using the.css extension which will only have the rulesets. It needs to be referenced in the head of the HTML documents using the tag. Using style.css for example, the syntax would look like this: The tag uses the href attribute which refers to the relative or between the current document and the linked document. 03 Handout 1 *Property of STI  [email protected] Page 2 of 6  IT2301 Styling and Formatting Styling Text It can have the biggest impact on the general design of the website. There are several fonts, but traditionally web-safe fonts include Arial, Courier New, Georgia, Verdana, and Times New Roman. In CSS, the font-family property is used to define the font. It is a comma-separated list of fonts from highest to lowest priority, with the font to be used listed first and followed by others in the order they are to be used. This process is called font stack. p { This code tells the browser to use Times New Roman first. font-family: Times New Roman, If it is not available, it uses Cambria as a fallback. It uses "Cambria", serif; the system’s default serif font if it is also unavailable. } To set the default font for the whole website: 1. At the top of the.css file, type body { This targets the elements within the tag which will inherit the assigned font styles. 2. Type font-family: 3. Type Futura, Times New Roman, Helvetica, sans-serif; Futura is only installed on macOS by default, so this font stack provides more widely available fonts. 4. Type }, save the file, and test it on any browser. Sizing Text Text can be resized using the font-size property such as: p { Different units of measurement are used in this property. Pixels (px) is a fixed font-size: 30px; measurement that gives designers the most control over the size, and } Percentage (%), which has a default size of 16px. Formatting Text The font-weight property allows the application of different boldness to text including normal which is the unbolded text, lighter which is thinner than the normal weight, bold which creates darker text, and bolder which makes text thicker than the bold weight. It uses font-weight: value; as its descriptor. The font-style property italicizes text. It includes normal which is the normal, straight text, italic which uses the italic style, and oblique which uses the oblique style. It uses font-style: value; as its descriptor. The text-decoration property allows emphasis lines to text. It includes none which means no change, underline to add a like under the text, overline which adds a line over the text, and line-through which is the same as a strike. It uses text-decoration: value; as its descriptor. The text-align property aligns the text horizontally. It uses text-align: value; as its descriptor. The values include left, right, center, and justify. 03 Handout 1 *Property of STI  [email protected] Page 3 of 6  IT2301 Adding Colors Finding the right color scheme for a website is essential to good design. Codes and names of acceptable colors are available on the Internet. There are three (3) methods to define colors in CSS: RGB: A comma-separated list of the amount of red, green, and blue in a color, ranging from 0 to 255. Hexadecimal (hex) values: A six-character code that defines the RGB in a color preceded by a #. Color names: A set of predefined names for colors. The easier method to use. Background Property This adds an image or a color to the background of the webpage. The background image can be set in horizontal and vertical views. It uses background-image: value; as its descriptor. The value is the link to the image. The descriptor background-repeat: no-repeat sets the background without repetition, while repeat-x; and repeat-y values repeat the background horizontally and vertically, respectively, To set a background color for a style in CSS: 1. In the.css file, type the name of the desired selector to apply the style rule. For example, body. 2. Type { to begin the declaration block. 3. Type the name of the desired property to be defined and its value. For example, to turn the page blue, type background:#0000FF; 4. Type the next property to define including its value. To make the body text white, type color:#FFFFFF; 5. Type } to close the declaration block and the style rule. 03 Handout 1 *Property of STI  [email protected] Page 4 of 6  IT2301 The Box Model (Casabona, 2020) The box model refers to how CSS sees every HTML element as if it is in its own box. This “box” consists of borders, paddings, margins, and content. By default, when a browser loads a webpage, the boxes flow on the page sequence as it encounters them in the code. This process is often called the normal flow. Figure 3. The box model. Border This can be put on all four sides or put individually on any side. This can also be modified using colors, styles, width, radius, margin, and padding. Margin is the property that adds spacing around the content, while padding adds spacing within the elements or white space inside the container. For style, it has the following values and border styles: Dotted – consists of rounded dots that display on a border. Solid – a single, straight, and solid border. Dashed – short dashes or line segments. Double – a two-line solid border. Groove – a three-dimensional border that looks like it is carved into the page. Ridge – a three-dimensional border that is opposite of the groove style. Inset – makes content in the border look like it is coming inside of the canvas. Outset – makes content in the border look like it is coming outside of the canvas. 03 Handout 1 *Property of STI  [email protected] Page 5 of 6  IT2301 Syntax Table for Border Color, Style, and Width Syntax Description Creates a border around all four sides. The 5px is the width of the border: 5px solid black; border, solid specifies the line type of a border, and black specifies the color of a border. border-top: 5px solid black; Adds a border on top of an element. border-right: 5px solid black; Adds border on the right side of an element. border-bottom: 5px solid black; Adds a border at the bottom of an element. border-left: 5px solid black; Adds a border on the left side of an element. border-color: blue; Adds a color on all sides of a border. Specifies the colors on all sides of a border. The first color refers border-color: blue yellow red to the top border, the second color to the right side, the third color black; to the bottom, and the last color to the left side. Specifies the colors for the top, bottom, right and left borders. border-color: blue red black; The first color refers to the top border, the second color to the right and left borders, and the last color to the bottom border. Specifies the colors for the top and bottom borders and left and border-color: blue red; right borders. The first color refers to the top and bottom borders, while the second color refers to the right and left borders. border-top-color: red; Sets the color of any specified border. border-style: solid; Displays a straight and solid border around all four sides. Specifies the style on all sides of a border. The first style refers border-style: dotted solid dashed to the top border, the second style to the right side, the third style double; to the bottom, and the last style to the left side. Specifies the styles for the top, bottom, right and left borders. border-style: groove ridge inset; The first style refers to the top border, the second style to the right and left borders, and the last style to the bottom border. Specifies the styles for the top and bottom borders and left and border-style: solid dotted; right borders. The first style refers to the top and bottom borders, while the second style refers to the right and left borders. border-specificside-style: Sets the style of any specified border. value; border-width: 5px; Sets the border width equally on all sides. Specifies the width on all sides of a border. The first width refers border-width: 2px 5px 3px 8px; to the top border, the second to the right side, the third to the bottom, and the last style to the left side. Specifies the width for the top, bottom, right and left borders. border-width: 2px 3px 5px; The first width refers to the top border, the second width to the right and left borders, and the last width to the bottom border. Specifies the width for the top and bottom borders and left and border-width: 4px 5px; right borders. The first width refers to the top and bottom borders, while the second refers to the right and left borders. border-right-width: 10px; Sets the width of any specified border. margin: auto; Sets the content to the center of the container Table 1. Syntax table The concept for setting up the width is the same as setting up the radius, margin, and padding. References: Casabona, J. (2020). Visual quickstart guide: HTML and CSS. Pearson Education, Inc. Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous. Addison-Wesley. 03 Handout 1 *Property of STI  [email protected] Page 6 of 6