Lesson 2 CSS PDF

Prepared by Mr. Renato L. Adriano II, MSIT WHAT IS CSS? CSS stands for Cascading Style Sheets. CSS was designed by Hakon Wium Lie. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all...

Prepared by Mr. Renato L. Adriano II, MSIT WHAT IS CSS? CSS stands for Cascading Style Sheets. CSS was designed by Hakon Wium Lie. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External style sheets are stored in CSS files. WHY USE CSS? Saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. WHY USE CSS? Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.  CSS SYNTAX ▪ Selector points to the HTML element you want to style. ▪ The declaration block contains one or more declarations separated by semicolons. ▪ Each declaration includes a CSS property name and a value, separated by a colon. ▪ CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. CSS SELECTORS  CSS SELECTORS CSS selectors are used to "find" (or select) HTML elements based on their: ▪ Element ▪ ID ▪ Class ▪ Attribute ▪ Grouping ▪ Universal ELEMENT SELECTOR ID SELECTOR CLASS SELECTOR AT T R I B U T E S E L E C T O R GROUPING SELECTOR UNIVERSAL SELECTOR HOW TO INSERT CSS?  HOW TO INSERT CSS? There are three ways of inserting a style sheet: ▪ Inline Style ▪ Internal Style Sheet ▪ External Style Sheet INLINE STYLE INTERNAL STYLE SHEET EXTERNAL STYLE SHEET CSS COLORS CSS FONTS  CSS FONT-FAMILY ▪ The font style of a text is set with the font-family property. ▪ The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. ▪ Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. ▪ If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".  CSS FONT-STYLE ▪ The font-style property is mostly used to specify italic text. ▪ This property has three values: ▪ normal - The text is shown normally ▪ italic - The text is shown in italics ▪ oblique - The text is "leaning" (oblique is very similar to italic, but less supported)  CSS FONT-SIZE ▪ The font-size property sets the size of the text. ▪ Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. ▪ Always use the proper HTML tags, like - for headings and for paragraphs. FONT SIZE WITH PIXELS FONT SIZE WITH EM FONT WEIGHT FO N T VA R I A N T TEXT ALIGN left, right or justify C S S BAC KG RO U N D BAC KGROUND COLOR BAC KGROUND I MAG E B A C KG R O U N D R E P E AT - X ( H O R I Z O N TA L ) B A C KG R O U N D R E P E AT - Y (VERTICAL) P O S I T I O N A N D AT TA C H M E N T POSITION: top bottom right center left ATTACHMENT: fixed scroll  CSS LINKS With CSS, links can be styled in many different ways.  FOUR LINK STATES links can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user’s mouse over it a:active - a link the moment it is clicked NOTE: This must be declared in order. FOUR LINK STATES LINK TEXT DECORATION LINK BACKGROUND COLOR  CSS LIST The list-style-type property specifies the type of list item marker. LIST ITEM MARKERS ORDERED LIST UNORDERED LIST  CSS CONTENT The content property is used with the ::before and ::after pseudo- elements, to insert generated content.  CSS CONTENT Different types of contents: ▪ None - sets the content, if specified, to nothing. ▪ Normal - default value. Sets the content, if specified, to normal, which default is "none" (which is nothing). ▪ String - sets the content to the text you specify. ▪ Counter - sets the content as a counter. ▪ Attr(attribute) - sets the content as one of the selector's attribute. ▪ Open-quote - sets the content to be an opening quote. ▪ Close-quote - sets the content to be a closing quote. ▪ No-open-quote - removes the opening quote from the content, if specified. ▪ No-close-quote - removes the closing quote from the content, if specified. ▪ Url(url) - sets the content to be some kind of media (an image, a sound, a video, etc.). ▪ Inherit - inherits this property from its parent element. none, normal and string counter attr(attribute) open quote and close quote no quote url(url) inherit  CSS BOX MODEL All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The image below illustrates the box model:  CSS BORDERS The CSS border properties allow you to specify the style, width, and color of an element's border. thin or thick INDIVIDUAL BORDER PROPERTIES  BORDER RADIUS The border-radius property defines the radius of the element's corners. Tip: This property allows you to add rounded corners to elements!  CSS MARGINS Margins are used to create space around elements, outside of any defined borders. MARGIN SHORTHAND PROPERTY  C S S PA D D I N G Padding is used to create space around an element's content, inside of any defined borders. PA D D I N G S H O R T H A N D PROPERTY CSS HEIGHT & WIDTH The CSS height and width properties are used to set the height and width of an element.  CSS POSITIONS The position property specifies the type of positioning method used for an element (relative, absolute, fixed, or sticky)  C S S F L O AT The CSS float property specifies how an element should float.  CSS CLEAR The CSS clear property specifies what elements can float beside the cleared element and on which side. CSS TRANSITION CSS transitions allows you to change property values smoothly, over a given duration. transition  transition BEFORE TRANSITION AFTER TRANSITION transition  transition BEFORE TRANSITION AFTER TRANSITION C S S A N I M AT I O N CSS allows animation of HTML elements without using JavaScript or Flash. from and to animation: changeColor 3s linear 0s 1 normal;  from and to BEFORE ANIMATION AFTER ANIMATION percentage animation: changeColor 10s ease 1s infinite reverse; percentage percentage animation: changePosition 4s ease 0s infinite alternate; percentage CSS DROP CAP CSS DROP CAP CSS DROP CAP SAMPLE HTML & CSS EXPECTED OUTPUT CODE #1 OUTPUT #1 CODE #2 OUTPUT #2 CODE #3 OUTPUT #3 CODE #4 OUTPUT #4 CODE #5 OUTPUT #5 FINAL CODE FINAL OUTPUT END OF L E S S O NE N D O F CHAPTER https://www.w3schools.com