CSS - Styling HTML

Document
AGATHA CHITUWA, Isaac S.
Mwakabira
Learning Outcome (s)
By the end of this lecture, students should:
● Understand the CSS syntax, key concepts and principles, and develop
a general understanding of how CSS can enhance the design of user
interfaces during the design and development of websites and web
applications.
● Learn to style web pages effectively using CSS, including the
application of CSS rules, principles, and best practices.
○ Specifically, the implementation of selectors, combinators, and
media queries, among others, for the design and development of
responsive and usable web interfaces.
Outline
● Syntax and CSS Selectors
○ Type, class, and ID selectors
○ Attribute selectors
○ Pseudo-classes and pseudo-elements
○ Combinators
● Cascade, Specificity & Inheritance
○ Cascade Layers
○ The CSS Box Model
● CSS Values and Units
○ Sizing HTML elements
● CSS Organisation - best practices, inline, internal, external.
● Advanced CSS
○ CSS layout: Normal Flow, Flexbox, CSS Grids, Floats, Positioning, Responsive Web Design
(RWD) and Media Queries
○ Emphasise the use of: Flexbox or CSS Grid; either of the two, not both
● Debugging CSS - CSS Validator
What is CSS?

CSS Stands for Cascading Style Sheet

● CSS describes how the html elements should be displayed on the page.
● A CSS file consists of rule set, which define the presentation element for a particular part of the
HTML document.
CSS Syntax

● A CSS rule set consists of a selector and a declaration block.

● A Rule Set has a selector and a declaration block.
● The declaration block is enclosed in { }.
● The declaration block contains one or more declarations separated by semicolons.
● Each declaration includes a property name and a value, separated by a colon.
● To make the CSS code more readable, you can put one declaration on each line.
CSS Syntax
CSS Syntax - More details

● Selector
○ Which element the rule applies to
● Declaration block.
○ How elements referred to in the selector should be styled
● Property
○ What aspects of the element you want to change
● Value
○ How elements referred to in the selector should be styled
CSS Selectors

● CSS selectors allow you to select and manipulate HTML elements.

● They are used to “find” HTML elements based on id, classes, types etc.
● Typically, selectors are one of 3 kinds:
○ element selector
○ Id selector
○ class selector
Element Selector

● The element selector selects elements based on the element name.

● Applied to all elements with the same name (tag).
Example:
p{
text-align: center;
color: red;
}
ID Selector

● The id selector uses the id attribute of an HTML tag to find the specific element.
● An id should be unique within a page.
● To find an element with a specific id, write the character formerly known as the pound / hashtag (#),
followed by the id of the element.
Example:

#para1 {
text-align: center;
color: red;
}
Class Selector

● The class selector finds elements with the specific class.

● The class selector uses the HTML class attribute.
● To find elements with a specific class, write a period character, followed by the name of the class.
●
Example:
.center {
text-align: center;
color: red;
}
Grouping Selectors

● In style sheets there are often elements with the same style.
● In the interest of code minimization, we can group selectors.
● Selectors are separated by commas

Example:
h1, h2, p {
text-align: center;
color: red;
}
Recap - Selectors

SELECTOR MEANING EXAMPLE

Universal Applies to all document elements *{}
Type Match element by name p{}
Class Match element by class name [Link] { }, .name { }
ID Match element by ID name p#name {}, #name { }
Child Match direct child elements li > a { }
Descendant Match descending elements li a { }
Adding CSS to your HTML document

There are 3 ways to do styling

● Inline Style - style elements are included as HTML attributes.

● Internal Style Sheets - a <style> tag is used within the HTML document to specify the presentation
elements.

● External Style Sheets - a separate “.css” file is used as a part of your set of documents.
○ It contains all the styling elements.
Inline CSS

● Used very rarely (when very few elements require styling).

● Add the style attribute to the relevant tag. The style attribute can contain any CSS property.

Example:
<h1 style=”color:blue;”> This is a heading. </h1>
Internal CSS

● Used when the current document has a unique style

● A <style>tag is used under the <head>tag of the document to define the styles
● The content of the <style>tag follows CSS syntax

Example:

<head>
<style>
body {
background-color: linen;
}
</style>
</head>
External CSS

● Used when a style is applied to many pages (like a theme).

● The look of the webpage can be changed by just changing one file.
● Each page must include a link to the style sheet with the tag. The tag goes inside the head section.
● An external stylesheet is written as a separate file with a “.css” extension.
● The external stylesheet should not contain any HTML tags.
CSS Best Practices

Best practices for writing your CSS to make it readable and easily maintainable:
● Formatting readable CSS - CSS is more readable to have each property and value pair on a new line.
● Comment your CSS - Adding comments to your CSS will help any future developer work with your
CSS file, but will also help you when you come back to the project after a break.
/* This is a CSS comment
It can be broken onto multiple lines. */
● Create logical sections in your stylesheet
○ It is a good idea to have all of the common styling first in the stylesheet.
■ This means all of the styles which will generally apply unless you do something special
with that element.
■ You will typically have rules set up for
● How to organise CSS style sheets??
Why use External Style Sheets?

When building a website there are several advantages to placing your CSS rules in a separate style sheet.
● All of your web pages can share the same style sheet. This is achieved by using the element on each
HTML page of your site to link to the same CSS document
● If you want to make a change to how your site appears, you only need to edit the one CSS file and all
of your pages will be updated
● The HTML code will be easier to read and edit because it does not have lots of CSS rules in the same
document.

It is generally considered good practice to have the content of the site separated from the rules that
determine how it appears.
When to consider placing CSS rules in the same
page as your HTML code.

Sometimes you might consider placing CSS rules in the same page as your
HTML code.

● If you are just creating a single page, you might decide to put the rules in the same file to keep
everything in one place
● If you have one page which requires a few extra rules (that are not used by the rest of the site), you
might consider using CSS in the same page.
Cascade & Specificity

How Css Rules Cascade???

If there are two or more rules that apply to the same element, it is important to understand which will take
precedence.
● SOURCE ORDER/LAST RULE - If the two selectors are identical, the latter of the two will take
precedence.
● SPECIFICITY - If one selector is more specific than the others, the more specific rule will take
precedence over more general ones
● IMPORTANT - You can add !important after any property value to indicate that it should be
considered more important than other rules that apply to the same element.
Inheritance

If you specify the font-family or color properties on the <body> element, they will apply to most child
elements. because the value of the font-family property is inherited by child elements.
● Add the style attribute to the relevant tag. The style attribute can contain any CSS property.

Example:

body {
font-family: Arial, Verdana, sans-serif;
color: #665544;
padding: 10px;
}
The Box Model

● 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:
○ content,
○ padding,
○ border and
○ margin.
● The adjacent image illustrates the box model
Parts of the box

Making up a block box in CSS we have the:

● Content - where text and images appear

● Padding - clears an area around the content. The padding is transparent
● Border - a border that goes around the padding and content
● Margin - clears an area outside the border. The margin is transparent
CSS Values and Units
● CSS rules contain declarations
○ which in turn are composed of properties and values.
○ Each property used in CSS has a value type that describes what kind of values it is allowed to have
● A value type in CSS is a way to define a collection of allowable values.
● This means that if you see <color> as valid you don't need to wonder which of the different types of color value
● [Link]
h1 {
color: black;
background-color: rgb(197 93 161);
}
● Numbers, lengths, and percentages
● [Link]
umbers_lengths_and_percentages
Color Values

● All CSS colors can be made from the

combination of three colors: RED, GREEN, BLUE
● These values can be calculated and represented
in a computer as:
○ HEX values #ff0000, #00ff00, #0000ff, #ffffff
○ RGB values rgb(255,0,0), rgb(0,255,0), etc…
○ HSL values hsl(0, 100%, 50%), hsl(240, 100%, 50%)
Advanced CSS

CSS has the following positioning schemes that allow you to control the layout of a page:
● Normal flow - Every block-level element appears on a new line, causing each item to appear lower
down the page than the previous one.
● Relative Positioning - This moves an element from the position it would be in normal flow, shifting it
to the top, right, bottom, or left of where it would have been placed
● Absolute positioning - This positions the element in relation to its containing element. It is taken out
of normal flow, meaning that it does not affect the position of any surrounding elements
● Fixed Positioning - Elements with fixed positioning do not affect the position of surrounding
elements and they do not move when the user scrolls up or down the page.
● Floating Elements - Floating an element allows you to take that element out of normal flow and
position it to the far left or right of a containing box.
Flexbox and css grid

The basic difference between CSS grid layout and CSS flexbox layout is that

● Flexbox was designed for layout in one dimension- either a row or a column.
● Grid was designed for two-dimensional layout - rows, and columns at the
same time.

Use Flexbox or CSS Grid; either of the two, not both

Responsive Web Design - Media Queries

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain
condition is true.
Debugging CSS

● CSS Validator
○ A tool for establishing validity of css rules applied to a page.
Summary
● Syntax and CSS Selectors
○ Type, class, and ID selectors
○ Attribute selectors
○ Pseudo-classes and pseudo-elements
○ Combinators
● Cascade, Specificity & Inheritance
○ Cascade Layers
○ CSS Box Model
● CSS Values and Units
○ Sizing HTML elements
● CSS Organisation - best practices, inline, internal, external.
● Advanced CSS
○ CSS layout
○ Use Flexbox or CSS Grid, not both
● Debugging CSS - CSS Validator
References

● [Link]
[Link]
● [Link]
● [Link]
● [Link]