Cascading Style Sheets 3 Part 1 PDF

CASCADING STYLE SHEETS 3 – PART 1 ISP465 – INTRODUCTION TO FRONT-END DEVELOPMENT OUTLINES  Introduction to CSS3  CSS Selectors  CSS Properties  CSS Units  Applying CSS to HTML: In-Line, Internal, and External  CSS Div and Span WHAT IS CSS? CSS (Cascading Style Sheets)...

CASCADING STYLE SHEETS 3 – PART 1 ISP465 – INTRODUCTION TO FRONT-END DEVELOPMENT OUTLINES  Introduction to CSS3  CSS Selectors  CSS Properties  CSS Units  Applying CSS to HTML: In-Line, Internal, and External  CSS Div and Span WHAT IS CSS? CSS (Cascading Style Sheets) is for the formatting side of the Web CSS describes how rendered HTML documents should look CSS considers the physical and visual display of the document (the Style) ADVANTAGES OF CSS  The use of CSS separates document layout from document content  Different people can be responsible for the two parts  Document author can focus on content  Graphic designer can focus on layout  A single file can control the look of an entire web site  Easy to modify look of web site without affecting its contents  Easy to obtain a consistent look (the R in CRAP)  If done correctly, documents degrade gracefully on platforms that don't support visual formatting  CSS PROPERTY  HTML elements are style using CSS properties. Different HTML elements may have different CSS properties.  CSS properties can be organized into CSS rules. A CSS rule groups a set of CSS properties together, and applies all properties to the HTML elements matched by the CSS rule.  A CSS property declaration consists of a property name and a property value,  Some basic CSS properties to work with:  Text Properties  List Properties  Border Properties  Font Properties CSS SELECTOR: UNIVERSAL  The universal selector (*) selects all HTML elements on the page. CSS SELECTOR: HTML ELEMENTS  CSS selectors are used to "find" (or select) the HTML elements you want to style.  The element selector selects HTML elements based on the element name. CSS SELECTOR: ID  The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element is unique within a page, so the id selector is used to select one unique element!  To select an element with a specific id, write a hash (#) character, followed by the id of the element. CSS SELECTOR: CLASS  The class selector selects HTML elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the class name. CSS SELECTOR: GROUPING SELECTOR  The grouping selector selects all the HTML elements with the same style definitions. CSS SELECTOR: COMPOUND SELECTOR  A compound selector can mix the previous 3 types using more than one class, ID and/or tag.  This type of selector has a higher priority than the other methods. CSS UNIT  CSS units are numeric type values that are used to determine the size of a property such as a margin, width, height, padding, font-size, and etc. The margin is the property and 10px is the value of the property. px is the CSS unit called pixel.  Two types of length used on CSS:  Absolute  Relative CSS UNIT: ABSOLUTE  Absolute length units are fixed across everywhere else. Also, it remains absolute if the output device has a higher resolution.  Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.  the primary disadvantage is that, in many cases, the user has no control over those values (also depending on the browser). For instance, font sizes defined using absolute values are normally permanent.  The inch (in), the centimetre (cm), the millimetre (mm), the point (pt), and the pica (pc) are all absolute units. CSS UNIT: RELATIVE  Relative length units are relative to another element's size or settings.  For example, the relative font size of an element may be calculated using the parent element's font size.  The benefit of using relative units is that the font size, padding or other elements scale relative to everything else on the page.  CSS UNIT: RELATIVE EXAMPLE Full size px em rem Reduce size CSS UNIT: RULE OF THUMB px (absolute) % (relative) em (relative) Avoid using 'px' for font-sizes. Use Recommended using percentage for Use 'em' for font-size and mostly for small details like border layouts and width/height. margin/padding. and shadow. For example, laying out links on changes behaviour based on fixed in size navbar, placing image inside a div, property. not responsive etc. 1 em = parent font size. overrides user's browser preference Size is defined as percentage of if parent doesn't have size, default another value(parent element) to 16px (body). rem (relative) vw/vh (relative) Use 'rem' for font-size and vw/vh are relative to the margin/padding. width/height of the browser widows. 'rem is more consistent than 'em'. 100vw means full width of screen. relative to root HTML, default is 16px use vw/vh for bigger layouts, like background. useful for responsive website because everything is scales.  USING CSS  There are three ways to use CSS  External Style Sheets  Uses the LINK tag (in the document HEAD)  Internal Style Sheets  The STYLE tag (in the document HEAD)  Inline STYLE Attributes  The STYLE attribute (within another HTML tag) CSS: DIV AND SPAN TAGS  CSS: DIV AND SPAN TAGS  HTML has 2 tags, DIV and SPAN, that are specifically used with CSS and CLASS and ID attributes  A DIV tag contains a block of text – block level element  Like a paragraph, section heading, or title  A block-level element always starts on a new line.  A block-level element always takes up the full width available (stretches out to the left and right as far as it can).  A block level element has a top and a bottom margin, whereas an inline element does not.  A SPAN tag contains a short piece of text within a block – inline level element  Like a proper name, or a dollar amount  An inline element does not start on a new line.  An inline element only takes up as much width as necessary. THANK YOU