Scribd
Upload
42 views33 pages

02 CSS-Fundamentals-2

1. The document outlines CSS syntax, selectors, basic text styles, and margin, border and padding. 2. CSS syntax consists of rules with selectors and declarations to specify styling properties and values. Stylesheets can be included inline, embedded in HTML, or in an external CSS file. 3. CSS selectors are used to target specific elements for styling and include element, class, ID, attribute, and pseudo-class selectors. Selectors allow styling text, links, hover states, and more. 4. Basic text styles include properties for font, size, color, and styling lists. Relative font sizing scales fonts appropriately across devices.

Uploaded by

ahmednooh1402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views33 pages

02 CSS-Fundamentals-2

1. The document outlines CSS syntax, selectors, basic text styles, and margin, border and padding. 2. CSS syntax consists of rules with selectors and declarations to specify styling properties and values. Stylesheets can be included inline, embedded in HTML, or in an external CSS file. 3. CSS selectors are used to target specific elements for styling and include element, class, ID, attribute, and pseudo-class selectors. Selectors allow styling text, links, hover states, and more. 4. Basic text styles include properties for font, size, color, and styling lists. Relative font sizing scales fonts appropriately across devices.

Uploaded by

ahmednooh1402
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

1

Outline

1. CSS Syntax
2. CSS Selectors
3. Basic Text Styles
4. Margin, Border and Padding

2
CSS Syntax

3
CSS – Cascading Style Sheets
• CSS is used to control the presentation (look and
feel) and layout (positioning) of web page
elements
• Allows separating web page content from its
design and visual appearance
• Used in conjunction with HTML
• HTML is used for describing the content of a web
page, CSS is used for describing its presentation
• CSS a flexible, cross-platform, standards-based
styling language developed by the W 3 C
4
Style Sheets Syntax
• Stylesheets consist of rules that describe the
styling to be applied
o Each rule has selectors and declarations. A
declaration specifies a property and its value

o Declarations are separated by semicolons


o Properties and values are separated by colons
• Comment in CSS /* comment */

5
Ways to incorporate CSS in an HTML document
• Inline – style included as the attribute of an HTML tag:

• Embedded – CSS rules are contained in the head section:

• External - separate .css file referenced in the HTML:

√ Improve consistent look and feel, reusability and maintainability


6
The “Cascade”
• The last rule applied wins: Styles are applied in the
order that they're found, and last styles always
overwrite earlier styles in case of a conflict
<link rel="stylesheet" href="styles/qu-styles.css">
<link rel="stylesheet" href="styles/ceng-styles.css">
<link rel="stylesheet" href="styles/cse-styles.css">

cse styles will win in


case of a conflict

inline styles will win


in case of a conflict

7
Inheritance
• Inheritance means that child elements will inherit
the properties applied to a parent element

• Body selector has a


font, font-size, and
color applied to it:
o Every element inherits
those styles from the
body selector
o The style applied to h1
overrides the inherited
color => h1 element
appears in red berry
color 8
CSS Selectors

9
Selectors: used to select elements to style on an HTML page
• Element Selectors - matches a HTML element directly

10
Specificity
• We have 3 selectors for the
h1 with different colors
o What will the color be?

=> h1 would be blue


because the ID selector is more
specific than the others
• The style for a more specific
selector will be applied to
the element

11
Universal
• [*]: Selects all elements
o Used to override the browser default styles

*{
font-family: "Times New Roman";
color: blue;
}

12
An element can have more than one class

• Class Selector selects all


elements whose class
attribute matches the
selector
o The selector starts with a
period (.) followed by the
class name
o An element can have
more than one class

13
Combined Selectors
element, element div, p Selects all <div> elements and all <p>
elements
element element div p Selects all <p> descendant elements
inside <div> elements
element > element div > p Selects all <p> elements that are
direct child of <div> element

e.g.,
li a {text-decoration: none}
o This will match all <a> tags that are inside of <li>

https://www.w3schools.com/cssref/css_selectors.asp
14
Attribute Selectors
• Selects the elements whose attribute-value pair
matches the selector

[attribute ^= value] a[href ^= "https"] Selects every <a> element whose href
attribute value begins with "https"

[attribute $= value] a[href $= ".pdf"] Selects every <a> element whose href
attribute value ends with ".pdf"

[attribute *= value] a[href *= "qu"] Selects every <a> element whose href
attribute value contains "qu"

https://www.w3schools.com/cssref/css_selectors.asp

15
Pseudo-classes
• Pseudo-classes are used to define an element
state. E.g.,
•Style an element when a mouse is over it (:hover)
• Style visited and unvisited links differently (:visited , :link)
• Style an element when it gets focus (:focus)
e.g.,
a:hover { color: red; } -> Style link on mouse over

16
Structural Pseudo-classes
:first-child tr:first-child First row of an HTML table

:last-child tr:last-child Last row of an HTML table

:nth-child(n) tr:nth-child(2) Second row of an HTML table

:nth-last-child(n) tr:nth-last-child(2) Second row of an HTML table,


counting from the last row
:nth-child(odd) tr:nth-child(odd) Every odd row of an HTML table
:nth-child(even) tr:nth-child(even) Every even row of an HTML
table

https://www.w3schools.com/cssref/trysel.asp
17
has selector
• CSS :has() selector allows us to style an element
based on its descendants
• e.g., assign a green background to any div having
p as its descendent

18
Pseudo-elements
• A CSS pseudo-element is used to style specified
parts of an element. E.g.,
o Style the first letter or line of an element

• Insert content around the selected element


p::before { content: "«"; }
Insert « before the content of each <p> element
p::after { content: "»"; }
Insert » after the content of each <p> element
19
Selectors Summary
• A style consists of a selector, followed by
property/value pairs
• Selectors:
o Element Selectors
o Class Selectors Examples
o ID Selectors
o Combined Selectors
o Attribute selectors
o Pseudo-classes
o Structural pseudo-classes
o Pseudo-elements
20
Basic Text Styles

21
Text-related CSS Properties

22
Text-related CSS Properties (2)

23
Font Sizing
Two ways to define font sizes in CSS
• Fixed Font Sizing: defines the size of fonts using
absolute units such as points (pt) or pixels (px)
• Relative Font Sizing: defines the size of fonts
using relative units such as em and rem units
o This allows fonts to scale appropriately to different
resolutions, browsers or platforms
o em is relative to the font-size of its direct or nearest
parent
o rem is relative to the font-size of the html (root)
element
24
Relative Font Sizing
body {font-size: .8em;
font-family: Verdana, Helvetica, Sans-Serif;}
h1 {font-size: 1.2em;}
div {font-size: .8em;}
li {font-size: .8em;}
p {font-size: .8em;}

25
Styles for Lists
• List properties are used to define the look and
feel of the list items
o Values for <ul>: circle, square,…
o Values for <ol>: upper-roman, lower-alpha
o Values for both: none

26
Practice …
• Use the W3Schools try-it-yourself editor to try
styling each of these properties
• Background
http://www.w3schools.com/css/css_background.asp
• Text
http://www.w3schools.com/css/css_text.asp
• Fonts
http://www.w3schools.com/css/css_font.asp
• Lists
https://www.w3schools.com/css/css_list.asp
27
Margin, Border and Padding

28
Box Model

• Each tag is a box, and its properties can be styled:


o Margin - the space that separates the boxes
o Border - the line around each edge of the box
o Padding - the space between the border and the contents

29
Margin and Padding
• Margin and padding define the spacing around the
element
o Numerical value, e.g. 0.8rem
o Can be defined for each of the four sides separately: margin-
top, padding-left, … or using short rules:
• margin: 0.8rem;
o Sets all four sides to have margin of 0.8rem

• margin: 10px 20px;


o top and bottom to 10px, left and right to 20px

• margin: 1px 3px 5px 7px;


o top, right, bottom, left (clockwise from top)

• Same for padding


30
Borders
• Border style:
border-width:1px;
border-style:solid;
border-color:red;
o border-width: thin, medium, thick or numerical value
o border-color: color alias or RGB value
o border-style: none, dotted, dashed, solid, double, …
• Shorthand rule for setting border properties:
border: 1px solid red;
• Can specify different borders for the sides using: border-
top, border-left, border-right, border-bottom
31
Rounded Corner & Centered Box

.centered-rounded-box {
display: flex;
column-gap: 1rem;
align-items: center;

padding: 0.5rem;
border: 1px solid saddlebrown;
border-radius: 15px; Rounded Corner
box
width:80%;
margin: auto;
} Centered box

32
References
• CSS Tutorials http://www.w3schools.com/css/
• CSS Course https://web.dev/learn/css/
• Cheat sheet https://htmlcheatsheet.com/css/
• CSS developer guide
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
• Selectors
http://code.tutsplus.com/tutorials/the-30-css-selectors-
you-must-memorize--net-16048

33

You might also like