Note: Check the page source or Inspect page with Debugger utilities like: `FireBug, Inspect/ Inspect Element` (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML/CSS code/tags/properties).
19 |
20 |
21 |
When Designer/Developer writes CSS to show custom look it overwrites browser default styles and apply `custom styles`
22 | - Many HTML elements come with browser specific some default CSS properties which can sometimes result in unknown/unwanted behaviour
26 |
27 |
28 | >Getting Started with CSS
29 |
30 |
In this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML.
31 | If you're just starting out in the world of web development, start learning from here
32 | Well, let's get started with the most popular style sheet language.
A CSS rule consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document.
34 |
35 |
36 |
37 |
38 |
Selectors are used to declare which of the markup elements a style applies to.
39 | The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute.
40 |
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
36 |
37 |
5.2. Formatting text
38 |
39 |
40 |
CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.
41 |
Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of the space between lines and letters, and how the text is aligned within the content box
What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):
40 |
41 |
42 |
Importance / !important
43 |
Specificity
44 |
Inheritance (Source order)
45 |
46 |
47 |
3 Inheritance
48 |
49 |
50 |
Inheritance simply means using some properties from parent/container elements to child
51 |
The inherit keyword specifies that a property should inherit its value from its parent element
52 |
Latest/last rules applied will win over earlier rules
53 |
Styles are cumulative; so the final rendering of elements depends not only on selectors directly target the element but also any properties that might be inherited from parent/top level elements
54 |
Note: All child elements in documents inherits properties from CSS rules applied to body/parent/container elements
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
43 |
44 |
05.3. color
45 |
46 |
47 |
Colors are pretty powerful way to express different feelings and emotions in our human life and play an important role while desinging UI or UX
48 |
Typically, `color` is used to set a color either for the foreground of an element (i.e., its text), for the background of the element, or else affect the color of borders/decorative effects
49 |
The CSS `color` property defines the foreground color (text color), `background-color` property defines the background color of an element
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
37 |
38 |
5.1. Working with fonts
39 |
40 |
41 |
Controlling `typography-text-font` is one of the most important thing to do with CSS
42 |
CSS `Font` property is used to control the look of font-texts
43 |
By the use of CSS font property you can change the font type, font-text size, color, style, bold etc.
44 |
Font styles: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
3.11. Authoring options / Where and How to add CSS
33 |
34 |
CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):
35 |
36 |
37 |
External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]
38 |
Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]
39 |
Inline stylesheet [Using the style attribute in any HTML start tag]
40 |
41 |
42 |
2. Internal stylesheet (Embedded stylesheet)
43 |
44 |
45 |
Internal (Embedded) CSS is used to apply CSS on a single/specific document or page
46 |
An Internal style sheet may be useful if one single page has a unique style
47 |
An Internal/Embedded style sheets only affect the document they are embedded in
48 |
`style` tag is used to write internal styles under `head` section (binds to current file only)
49 |
Used in small non-scalable apps (it isn't quite as efficient as external stylesheets)
3.11. Authoring options / Where and How to add CSS
18 |
19 |
CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):
20 |
21 |
22 |
External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]
23 |
Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]
24 |
Inline stylesheet [Using the style attribute in any HTML start tag]
25 |
26 |
27 |
1. External stylesheet (Separation of concern)
28 |
29 |
30 |
We can put required css styles into one seperate .css file
31 |
External stylesheet is like a normal text file with `.css extension` containing styles for html markup
32 |
Most of the time we have to use external style sheet (.css file) to seperate Markup, Style, and Script from a web document
33 |
`link` tag is used under `head` section to embed/import/link external css file which can be used in various html pages
34 |
Advantage of external css file over internal(embedded)/inline css is that a `single css file can be used in multiple pages` of an application to get flexibility & consistency over styling (efficient)
35 |
An external style sheet `holds all the style rules` in a separate document that you can link from any HTML file on your site.
36 |
External style sheets are the `most flexible` because with an external style sheet, you can change the look of an entire website by changing just one file.
What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):
50 |
51 |
52 |
Importance / !important
53 |
Specificity
54 |
Inheritance (Source order)
55 |
56 |
57 |
2 Specificity
58 |
59 |
60 |
Specificity is basically a measure of how specific a selector/rule is
61 |
If more conflicting CSS rules comes to the same element, than the browser follows some rules to determine which one is most specific selector to apply and wins out
62 |
`ID selectors` have an even higher specificity than class selectors and lowest is element selectors
63 |
Note: The only way to win against an ID selector is to use `!important` or using `inline styles`. The only way to win against an `!important` is to include another !important declaration
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
40 |
41 |
05.16. reset css
42 |
43 |
44 |
CSS Reset is a set of styles that nullify a browsers default style sheet
45 |
CSS Reset allows designers to avoid conflicts between their styles and browser default styles
46 |
Every browser has its own default `user agent stylesheet`, that it uses to make unstyled websites appear more beautiful/legible. (By default apply variable font-sizes to H1 to H6, certain amount of padding to almost every element, make links blue and visited links purple, give tables a certain amount of border and padding)
47 |
Using a CSS Reset, we can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible
48 |
The goal of a reset style is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings etc.
Selector allows us to tell the browser which element/tag on the page we want to style
31 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
32 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
33 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
34 |
35 |
Selector allows us to tell the browser which element/tag on the page we want to style.
36 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
37 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
38 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
39 |
40 |
41 |
3.7. Universal Selector
42 |
43 |
44 |
The universal selector selects all the elements on the page
45 |
Rather selecting elements of a specific type, the universal selector simply matches the name of any element type
46 |
The universal selector is used as a wildcard * character
47 |
48 |
49 |
The universal selector selects all the elements on the page . Rather selecting elements of a specific type, the universal selector simply matches the name of any element type. The universal selector is used as a wildcard * character.
50 |
Selector allows us to tell the browser which element/tag on the page we want to style
36 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
37 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
38 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
39 |
40 |
Selector allows us to tell the browser which element/tag on the page we want to style.
41 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
42 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
43 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
44 |
45 |
46 |
03.04.selector.element.tag.type.html
47 |
48 |
49 |
The element selector target/find/selects the HTML element/tag by name
50 |
Global selectors based on any HTML element/tag name
51 |
This is the simplest way to target all elements of a given element/tag/type
52 |
53 |
54 |
The element selector target/find/selects the HTML element/tag by name. Global selectors based on any HTML element/tag name. This is the simplest way to target all elements of a given element/tag/type.
55 |
3.11. Authoring options / Where and How to add CSS
40 |
41 |
CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):
42 |
43 |
44 |
External stylesheet (Separation of concern) [Using the link element, pointing to an external CSS file]
45 |
Internal stylesheet (Embedded stylesheet) [Using the style element in the head section of a document]
46 |
Inline stylesheet [Using the style attribute in any HTML start tag]
47 |
48 |
49 |
3. Inline stylesheet
50 |
51 |
52 |
We can write/apply style directly into an HTML element
53 |
Inline CSS is used to apply CSS on a single line or element
54 |
`style` attribute is used to write inline styles specific to an element `p style="color:blue;">Some Text /p`
55 |
`Please don't use this, unless you really have to! It is really a `bad practice and bad for maintenance` (you might have to update the same information multiple times per document)
56 |
Used in small non-scalable apps (kind of last moment patch/solution)
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
39 |
40 |
05.6. CSS box model
41 |
42 |
43 |
The Box Model refers to the physical properties of an elements rectangular box
44 |
Every element displayed is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page
45 |
The Bpx Model concepts helps to make layout/designing task easier
46 |
47 |
48 |
Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)
49 |
50 |
51 |
Margin = Space outside/around an element
52 |
Border = Rectangular outline/border surrouding an element/box
53 |
Padding = Breathing space inside an element border
54 |
Total width of an element: left border + left padding + content width + right padding + right border
55 |
56 |
57 | The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
58 |
Selector allows us to tell the browser which element/tag on the page we want to style
33 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
34 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
35 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
36 |
37 |
Selector allows us to tell the browser which element/tag on the page we want to style.
38 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
39 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
40 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
41 |
42 |
43 |
3.6. ID Selector
44 |
45 |
46 |
The id selector selects the id attribute of an HTML element to select a specific element
47 |
It is used with a hash/pound character # followed by the id name
48 |
Attribute selector based on specific id attributes applied to HTML element/tag
49 |
An `id` is always `single/unique` within the page so it is chosen to select a single, unique element in web page
50 |
#id is very important attribute while dealing with HTML+CSS to make and target single unique thing
51 |
52 |
53 |
The id selector selects the id attribute of an HTML element to select a specific element. It is used with a hash/pound character # followed by the id name. Attribute selector based on specific id attributes applied to HTML element/tag.
54 |
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
60 |
61 |
5.15. CSS Vendor Prefixes (CSS Browser Prefixes)
62 |
63 |
64 |
Vendor Prefixes allows browsers manufacturers to add support for `proprietory features which are still in development`
65 |
Browser manufacturers have used browser specific `prefixes for experimental APIs`
66 |
Vendor Prefixes gives designer/developer an opportunity to use experimental/evolving features-properties
67 |
CSS vendor prefixes/CSS browser prefixes, are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers
68 |
Note: CSS vendor prefixes/CSS browser prefixes are used only for latest CSS3 properties which are not fully developed/supported by all browser
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
49 |
50 |
05.10. Element Positioning
51 |
52 |
53 |
Positioning allows to take an element on the page and `control where and how it can be positioned`
54 |
The CSS `position property` is used to `set position` for an element
55 |
It is also used to place an element `behind another` and also useful for `scripted animation effect`
56 |
57 |
58 |
CSS positioning schemes
59 |
60 |
61 |
Normal Flow
62 |
Element Floating
63 |
Absolute Positioning
64 |
65 |
66 |
67 |
Relative Positioning
68 |
69 |
70 |
Elements are still considered as part of normal document flow, but one can offset the elements from its normal position using top, right, bottom, or left offset values
71 |
Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)
72 |
Relative Positioning helps to nudge or re-position an element from its `current position/location`
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
46 |
47 |
05.7. CSS box model: margin
48 |
49 |
50 |
Margin is `Space outside/around an element`, Margin represent the `space between elements`
51 |
Margin values are not calculated as part of an elements total width
52 |
The margins does `not have a background-color`, it is `completely transparent`
53 |
Margin can be defined either to Top, Right, Bottom, Left or to each side of an element
54 |
55 |
56 |
Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)
57 |
58 |
59 |
Margin = Space outside/around an element
60 |
Border = Rectangular outline/border surrouding an element/box
61 |
Padding = Breathing space inside an element border
62 |
Total width of an element: left border + left padding + content width + right padding + right border
63 |
64 |
65 | The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
66 |
Selector allows us to tell the browser which element/tag on the page we want to style
38 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
39 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
40 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
41 |
42 |
Selector allows us to tell the browser which element/tag on the page we want to style.
43 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
44 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
45 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
46 |
47 |
48 |
3.5. Class Selector
49 |
50 |
51 |
The class selector selects HTML elements with a specific class attribute
52 |
It is used with a period character . (full stop symbol) followed by the class name
53 |
Attribute selector based on `class attributes` applied to HTML element/tag
54 |
Generic set of rules applied to similar looking item
55 |
.class is very important attribute while dealing with HTML+CSS as similar looking/output based things on web page usually belongs to one class
56 |
57 |
58 |
The class selector selects HTML elements with a specific class attribute . It is used with a period character . (full stop symbol) followed by the class name. Attribute selector based on `class attributes` applied to HTML element/tag.
59 |
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
46 |
47 |
05.8. CSS box model: padding
48 |
49 |
50 |
Padding is the `breathing space inside an element border` which holds the content aways from edge/border and allows readibility
51 |
CSS Padding property is used to define the space between the element content and the element border
52 |
`Padding is inside` and Margin is outside
53 |
Padding can be defined either to Top, Right, Bottom, Left or to each side of an element
54 |
55 |
56 |
Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)
57 |
58 |
59 |
Margin = Space outside/around an element
60 |
Border = Rectangular outline/border surrouding an element/box
61 |
Padding = Breathing space inside an element border
62 |
Total width of an element: left border + left padding + content width + right padding + right border
63 |
64 |
65 | The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
66 |
Selector allows us to tell the browser which element/tag on the page we want to style
50 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
51 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
52 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
53 |
54 |
55 |
Selector allows us to tell the browser which element/tag on the page we want to style.
56 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
57 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
58 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
59 |
60 |
61 |
3.9. conditional descendent Selector
62 |
63 |
64 |
Highly specific selector that target elements based on their location within other elements
65 |
You can use this selector when you need to select an element that is the descendant/inside of another element
66 |
You want to apply a style rule to a particular element only when it lies inside a particular element
67 |
White space is used to denote hierarchy of element (parent nested child)
68 |
69 |
70 |
Highly specific selector that target elements based on their location within other elements . You can use this selector when you need to select an element that is the descendant/inside of another element. You want to apply a style rule to a particular element only when it lies inside a particular element.
71 |
Selector allows us to tell the browser which element/tag on the page we want to style
69 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
70 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
71 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
72 |
73 |
3.10. pseudo class Selector
74 |
75 |
76 |
pseudo means `not actually but having the appearance of; pretended; false or spurious;`
77 |
Pseudo class selectors are CSS selectors with a colon preceding them `:`
78 |
A CSS pseudo-class is a keyword added to a selector that specifies a `special state` of the selected element(s) like `hover, active, focus, visited, link`
79 |
Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree
80 |
a pseudo-class is basically a special state or specific characteristic of an element that can be targeted with CSS. A few common pseudo-classes are `:link, :visited, :hover, :active`
Selector allows us to tell the browser which element/tag on the page we want to style
74 |
CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more
75 |
Selector may target: Single element, group of elements, .class, #id, any specific conditional element
76 |
Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style
77 |
78 |
Selector allows us to tell the browser which element/tag on the page we want to style.
79 | - CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
80 | - Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
81 | - Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
82 |
83 |
84 |
3.8. group/grouping Selector
85 |
86 |
87 |
Group/Grouping selector allows you to group different types of selectors together that share similar formattings
88 |
Grouping selector is used to minimize the code, its efficient
89 |
It also prevents you from repeating the same style rules over and over again
90 |
You can apply a style to many selectors, Just separate the selectors with a comma
91 |
Commas are used to separate each selector in grouping
92 |
93 |
94 |
Group/Grouping selector allows you to group different types of selectors together that share similar formattings . Grouping selector is used to minimize the code, its efficient. It also prevents you from repeating the same style rules over and over again.
95 |
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
51 |
52 |
05.10. Element Positioning
53 |
54 |
55 |
Positioning allows to take an element on the page and `control where and how it can be positioned`
56 |
The CSS `position property` is used to `set position` for an element
57 |
It is also used to place an element `behind another` and also useful for `scripted animation effect`
58 |
59 |
60 |
CSS positioning schemes
61 |
62 |
63 |
Normal Flow
64 |
Element Floating
65 |
Absolute Positioning
66 |
67 |
68 |
Fixed Positioning 1 :
69 |
70 |
71 |
The fixed positioning property helps to put the text fixed on the browser
72 |
Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`
73 |
As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it
74 |
Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)
75 |
76 |
77 |
78 |
Fixed Positioning 2 :
79 |
80 |
81 |
The fixed positioning property helps to put the text fixed on the browser
82 |
Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`
83 |
As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it
84 |
Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)
85 |
86 |
87 |
88 |
89 |
Fixed Positioning 3 :
90 |
91 |
92 |
The fixed positioning property helps to put the text fixed on the browser
93 |
Fixed Positioned elements are considered to be an Absolute Positioned elements itself but it always positioned relative to the `active viewport`
94 |
As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesnt affects it
95 |
Fixed positioning is a subcategory of absolute positioning (difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
115 |
116 |
05.9. CSS box model: border
117 |
118 |
119 |
Border defines the `outside edge` of an element
120 |
Widely used to define/apply `decorative effects/visual seperation` to an element
121 |
Border of an element goes around the padding and content
122 |
Borders are defined with 3 properties: `border-width, border-style, border-color, border-radius`
123 |
Border can be defined either to Top, Right, Bottom, Left or to whole element
124 |
125 |
126 |
Box Model consists of properties like: Margins, Borders, Padding and content width, height (these properties make physical dimension of an element)
127 |
128 |
129 |
Margin = Space outside/around an element
130 |
Border = Rectangular outline/border surrouding an element/box
131 |
Padding = Breathing space inside an element border
132 |
Total width of an element: left border + left padding + content width + right padding + right border
133 |
134 |
135 |
136 |
border: solid
137 |
border: dashed
138 |
border: dotted
139 |
border: double
140 |
border: ridge
141 |
border: groove
142 |
border: border-style:multiple type border
143 |
border: border-radius: rounded corner
144 |
border: border-radius: rounded corner: design
145 |
146 |
147 |
Colors channel logo created with border-radius
148 |
149 |
150 |
151 |
152 |
153 |
154 | The following diagram demonstrates how the margin, padding, and border CSS properties determines how much space an element can take on a web page:
155 |
4 |
5 | CSS3 Fundamentals
6 | =====================
7 |
8 | CSS stands for Cascading Style Sheets through which we add styles, colors, layouts, design, and look-feel appearance to the web page.
9 |
10 | CSS is a stylesheet language that allows you to control the appearance of your web pages. This hands-on course will demonstrate the concepts that form the foundation of CSS, creating a CSS file, writing basic CSS selectors, setting up various CSS properties, and explains how to use this stylesheet language to add colors and other design elements to take your web pages beyond standard black & white text/background. Will learn guidelines for page layouts with floats, Setting a font family, font size, text color, how the box model defines the spacing and sizing of page elements, styling text, and managing basic layouts. It Will also explores the tools needed to work with CSS, how to use selectors to target elements, and more.
11 |
12 | ### Prerequisites for current course / What you need to know
13 | To move forward with CSS you must need basic knowledge of XHTML/HTML/HTML5. It's an added advantage if you know basic concepts like Web, Internet, Web Page, URL, images, Web Design with XHTML/HTML/HTML5 etc. Its advisable to view [Web Design Development Foundations-Web Technology Fundamentals](https://github.com/dinanathsj29/web-design-development-fundamentals) and [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials) before jumping into CSS3 fundamentals.
14 |
15 | Topics include
16 | =====================
17 |
18 | 1. [Course introduction](#section-1-course-introduction)
19 | 2. [Introducing CSS](#section-2-introducing-css)
20 | 3. [CSS basics](#section-3-css-basics)
21 | 4. [CSS specifications](#section-4-css-specifications)
22 | 5. [Common CSS concepts](#section-5-common-css-concepts)
23 | 6. [CSS resources](#section-6-css-resources)
24 | 7. [What's the next Step?](#section-7-whats-the-next-step)
25 |
26 | Section 1. Course introduction
27 | =====================
28 |
29 | ### 1.1. Welcome
30 | Hi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to CSS3 Fundamentals. This course is designed to introduce you to basic CSS concepts, terminology, and tools. It's perfect for any new web designer/developer looking for a good starting point with CSS. We Will start by exploring the basics of CSS, what CSS is?, syntax, how CSS works, use CSS to create websites, using CSS on a wide variety of platforms. I will start by giving an overview of CSS, CSS features, browser support, followed by formatting text, layouts, images, box model, positioning, CSS online tools, and resources.
31 |
32 | Section 2. Introducing CSS
33 | =====================
34 |
35 | ### 2.1. Importance
36 |
37 | ### 3 pillars / core Languages/Technologies used for Front End Web Design/Development:
38 |
39 | 1. **HTML (HyperText Markup Language)** - Markup language, essential page structure/content, readable and convey structure to the user, text layout model, page mark-up, text, tags, data, details for pages, images, tables, anchor links, forms
40 | - HTML is an acronym that stands for `HyperText Markup Language` which is used for creating `web pages and web applications
41 | - HTML is not a programming language; it is a markup language that defines the structure of your content ie. document
42 |
43 | 2. **`CSS (Cascading Style Sheet) - Style Sheet language, page design / presentation / layouts / styling / formattings, look and feel, creative part of web pages`**
44 | - CSS is a stylesheet language that allows you to control the appearance (look and feel) of your webpages
45 |
46 | 3. **JavaScript (JS)** - Scripting language, dynamic page behavior, logics, conditions and validations, events (mouse click, hover), interactivity with the user/events, dynamic updates in a web page
47 | - JavaScript is a `scripting language of the web that allows you to do interactivity with the user, implement conditions and validations, dynamic updates in a web page, etc.
48 |
49 | > **Syntax & Example**:
50 | ```html
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | 02.01.css.intro.html
60 |
61 |
62 |
71 |
72 |
73 |
74 |
75 |
76 |
02.01.css.intro.html
77 |
78 |
79 | >Getting Started with CSS
80 |
81 |
In this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML.
82 | If you're just starting in the world of web development, start learning from here
83 | Well, let's get started with the most popular style sheet language.
84 |
85 |
86 |
87 |
88 | ```
89 |
90 | ### 2.2. What is CSS?
91 | - CSS stands for `Cascading Style Sheets`
92 | - CSS is `presentational, styling, formatting language` developed to `control look and feel` of HTML documents
93 | - CSS is the Stylesheet language/technology developed to create Page Designs / Layouts / Styling / Formattings, look and feel of web pages
94 | - CSS is the `key presentational technology` that is used in website design
95 | - Cascading refers to the way that CSS apply one style on top of another
96 | - HTML controls the structure of web page, `CSS controls the presentation/styles/design`
97 | - Stylesheets are a collection of formatting/styling/presentation rules
98 |
99 | > **Example**: HTML is like a new Raw concrete Building structure, CSS is like skin (outside of the building looks)
100 |
101 | ### 2.3. Why use CSS? (Benefits of CSS)
102 | - Separate styles/presentation rules from content (separation of concern)
103 | - CSS provides better & high-end controls over the look and feel
104 | - With CSS Designer/Developers gain lots of flexibility & consistency over styling
105 | - Highly modularise web design with external independent .css files
106 | - CSS is significant as it applies one style to many elements/tags
107 | - Apply one style to many styles
108 | - Apply a set of styles to many documents of an application
109 | - Target different media like Screen, Print, Mobile device
110 |
111 | ### 2.4 Advantages of CSS
112 | One of the biggest advantages of using CSS is that it allows the separation of style and layout from the content of the document. Let us have a look at some more advantages of using CSS:
113 | - Easy maintenance (separate .css file)
114 | - CSS save lots of time on styling multiple pages/application(re-usability)
115 | - Pages load faster (separation of concern)
116 | - Superior styles to HTML (Provide more attributes)
117 | - Multiple device compatibility (manage/handle devices with different resolution)
118 | - Global web standards
119 |
120 | ### 2.5. Prerequisites of using CSS (Cascading Style Sheets)
121 | #### Tools for building web sites-web pages/writing HTML & CSS
122 |
123 | 1. **Text Editor/HTML Editor** - `NotePad, NotePad++, SublimeText, Atom, Brackets, Coda, Visual Studio Code, DreamWeaver` etc.
124 | - A CSS file (.css) is a text file itself consists of CSS style & properties, so to create/modify a CSS file we can use any text editor.
125 | 2. **Browsers To view output of .html pages with .CSS styles** - `Google Chrome, Mozilla Firefox, Internet Explorer, Safari` etc.
126 | - Once the .html/.htm file is created and saved, we can create a .CSS file and link within HTML and then we can see its output in any latest web browser.
127 |
128 |
129 |
130 |
131 | Image - Widely used modern browsers
132 |
133 |
134 |
135 | Section 3. CSS basics
136 | =====================
137 |
138 | ### 3.1. Default Browser styles
139 | - Open any HTML page (Unstyled / No CSS used) in browser, have a look on content styles
140 | > **Note**: Saying Unstyled is not accurate as every browser apply own default style set to visual CSS rules `user agent stylesheet` on every elements like `
548 |
549 |
550 | ```
551 |
552 | ### 3.11. Authoring options / Where and How to add CSS
553 | CSS is linked/added to HTML pages to format the document according to information in the style sheet. Styles can be added/written/located/inserted in 3 different ways (at 3 different places one can write css):
554 |
555 | 1. **External stylesheet** (Separation of concern) *[Using the ` element`, pointing to an external CSS file]*
556 | 2. **Internal stylesheet** (Embedded stylesheet) *[Using the `
621 |
622 | ```
623 |
624 | #### 3. Inline stylesheet
625 | - We can write/apply style directly into an HTML element
626 | - Inline CSS is used to apply CSS on a single line or element
627 | - `style` attribute is used to write inline styles specific to an element `
Some Text
`
628 | - Please don't use this, unless you really have to! It is really a `bad practice and bad for maintenance` (you might have to update the same information multiple times per document)
629 | - Used in small non-scalable apps (kind of last moment patch/solution)
630 |
631 | > **Syntax & Example**:
632 | ```html
633 |
634 |
637 |
638 |
639 |
Syntax: Welcome to HTML
643 |
644 | ```
645 |
646 | #### CSS authoring points/understandings:
647 | - Most of the projects rely heavily on external stylesheets
648 | - Internal (Embedded) styles are mainly used to overwrite external styles
649 | - Inline-styles are like last moment fix/patch/solution to achieve the required style output
650 | - One should plan an overall site strategy for style placement
651 |
652 | ### 3.12. How Browsers apply styles
653 | #### 3.12.1 Selector reading mechanism
654 | - Browser reads selectors from `Right to Left`
655 | - > **Note**: .content p span { color: blue; }
656 | - First, the browser will select all **`span`**
657 | - Secondly, it will scan for **`p`**
658 | - After filtering all results it will check that **`p`** and **`span`** are present inside **`.content`** class or not
659 | > Its advisable to find out and write an efficient, simplified version of a selector
660 |
661 | #### 3.12.2. The Cascade mechanism
662 | - CSS is an abbreviation for Cascading Style Sheets, which indicates that the notion of the cascade is important while working with styles
663 | - If multiple CSS rules will have selectors matching the same element in such cases, which CSS rule "wins", and is finally applied to the element? This is controlled by a mechanism called the Cascade;
664 |
665 | #### 3.12.3. CSS apply order
666 | 1. External stylesheet (Separation of concern)
667 | 2. Internal stylesheet (Embedded stylesheet)
668 | 3. Inline stylesheet
669 | > **Note**: If any styles conflict with each other then the `latest/most recent and closest/nearest` set of styles overwrites the earlier style
670 | > **Note**: Cascade simply means `last rule applied wins!`
671 |
672 | #### 3.12.4. The cascade dependency factors
673 | What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):
674 | 1. Importance / !important
675 | 2. Specificity
676 | 3. Inheritance (Source order)
677 |
678 | #### 1. Importance / !important
679 | - `!important` - One property/keyword to rule all!
680 | - In CSS, there is a special piece of syntax you can use to make sure that a certain declaration will always win over all others: `!important`
681 | - The `!important` rule is used for overriding the previously assigned CSS declarations OR to make the current rule as a supreme rule
682 | - It is strongly recommended that you `never use !important` unless you absolutely have to
683 |
684 | > **Syntax & **Example**:
685 | ```css
686 | .paraText {
687 | background-color: gray;
688 | border: none !important;
689 | }
690 |
691 | p {
692 | background-color: blue;
693 | color: white;
694 | padding: 5px;
695 | border: 2px dashed black;
696 | }
697 | ```
698 |
699 | ```html
700 |
701 |
One selector to rule them all!
702 |
703 | ```
704 |
705 | #### 2. Specificity
706 | - Specificity is basically a measure of how specific a selector/rule is
707 | - If more conflicting CSS rules comes to the same element then the browser follows some rules to determine which one is the most specific selector to apply and wins out
708 | - **`ID selectors` have an even higher specificity than `class selectors` and lowest is `element selectors`**
709 | > **Note**: The only way to win against an ID selector is to use `!important` or using `inline styles`. The only way to win against an `!important` is to include another !important declaration
710 |
711 | #### Specificity points Chart/Table (ICE)
712 |
713 | | Selector | Points | | | | |
714 | | --------------------- |:------------------:|:-----:|:---------:|:---------:|-----------------:|
715 | | | style attribute | ID | Classes | Element | Specificity Score |
716 | | body (Element/Tag) | 0 | 0 | 0 | 1 | 0001 |
717 | | .class (.content) | 0 | 0 | 1 | 0 | 0010 |
718 | | #id (#mainContent) | 0 | 1 | 0 | 0 | 0100 |
719 | | **No selector, but style attribute** | 1 | 0 | 0 | 0 | **1000** |
720 | | div p | 0 | 0 | 0 | 2 | 0002 |
721 | | #mainContent p | 0 | 1 | 0 | 1 | 0101 |
722 | | .content p | 0 | 0 | 1 | 1 | 0011 |
723 | | #mainContent .content p | 0 | 1 | 1 | 1 | 0111 |
724 |
725 | > **Note**: Selector/Rule with more score/points finally wins
726 |
727 | > **Syntax & Example**:
728 | ```html
729 |
730 |
760 |
761 |
762 |
763 |
What selectors win out in the cascade depends on three factors (listed in order of weight — earlier ones will overrule later ones):
764 |
765 | ```
766 |
767 | #### 3. Inheritance (Source order)
768 | - Inheritance simply means using some properties from parent/container elements to a child
769 | - The inherit keyword specifies that a property should inherit its value from its parent element
770 | - Latest/last rules applied will win over earlier rules
771 | - Styles are cumulative; so the final rendering of elements depends not only on selectors directly target the element but also on any properties that might be inherited from parent/top-level elements
772 | - **Note**: All child elements in documents inherit properties from CSS rules applied to body/parent/container elements
773 |
774 | > **Syntax & Example**:
775 | ```html
776 |
777 |
799 | ```
800 |
801 | ### 3.13. How CSS works with HTML structure
802 | CSS works with the structure of the HTML document along the browser parse the HTML code, find the right element, and style accordingly.
803 | > **Load HTML -> Parse HTML -> Load CSS -> Parse CSS -> Browser creates DOM Tree with (parsed HTML + CSS) -> Display into Browser**
804 |
805 | **Guidelines for writing HTML**:
806 | - Focus on writing clean, Semantic, consistent, and efficient HTML markup/code
807 | - It's impossible to write an efficient CSS Without a logical, consistent HTML structure
808 | - Structure the HTML so that it adds meaning to the content
809 | - Don't focus on styling when initially structuring HTML markup/code
810 |
811 | **Best Practices to write HTML & CSS**:
812 | - **HTML**
813 | - Use consistent HTML structure through-out web page/app
814 | - Organize code with comments
815 | - Refactor code as and when necessary
816 | - Separate content from style
817 | - Use the Alternative Text & Title Attribute on Images
818 | - Make Use of Semantic Elements
819 | - Avoid non-semantic markup
820 |
821 | - **CSS**
822 | - Use meaningful classes and Id's (descriptive names with a role like - content, sidebar, authors, quotes)
823 | - Modularize Styles for Reuse
824 | - Write CSS Using Multiple Lines & Spaces
825 | - Use Proper Class Names
826 | - Build Proficient Selectors (Avoid long selectors)
827 | - Use Shorthand Properties & Values
828 | - Use Shorthand Hexadecimal Color Values
829 | - Group & Align Vendor Prefixes
830 |
831 | ### 3.14. Browser rendering differences
832 | - Browsers developed independently of each other, so different browser rendering engines parse, renders, and displays output differently
833 | - Each browser has its own different parsers, policies, preferences on how to render and display content
834 | > **Note**: `Hack` code designed to overcome an error/Browser rendering differences of a specific browser
835 |
836 | #### Common Rendering Engines
837 |
838 | | Engine | Browser |
839 | | ------------- |---------------|
840 | | Trident | Internet Explorer, (AOL - America Online), Windows Mobile |
841 | | Presto | Opera |
842 | | Gecko | Mozilla FF, Camino |
843 | | Webkit | Safari, Google Chrome |
844 |
845 | #### W3C and Web standards (World Wide Web Consortium)
846 | - `W3C (World Wide Web Consortium) is the main International Standards Organization for the World Wide Web help in `developing protocols and guidelines that ensure long-term growth for the Web
847 | - W3C (World Wide Web Consortium) started in the year 1994 to issue recommendations for web technologies
848 | - Check web standards for consistent design (The Web Standard Project): www.webstandards.org
849 | - W3C website: https://www.w3.org/
850 |
851 | ### 3.15. CSS Comments
852 | - Comments are useful for organizing styles, annotating code, or communicating code scenarios with team members
853 | - CSS comments are generally `written to explain your code`
854 | - Comments are also great for debugging, understanding code logic, purpose, etc. because you can comment out lines of code
855 | - It is very helpful for the users who read your code so that they can easily `understand the code`
856 | - Comments are `ignored by browsers`, it is `good for developers`
857 | - Single or multiple lines comment is written as: `/* code */`
858 |
859 | > **Syntax & Example**:
860 | ```html
861 |
862 |
871 | ```
872 |
873 | Section 4. CSS specifications
874 | =====================
875 |
876 | CSS is constantly changing and evolving, new features and capabilities are added to enhance design/styling.
877 | Initially/Originally HTML elements and attributes used to define basic styles like **bold**, *italics*, size, text color, background color etc.
878 |
879 | ### 4.1. History of CSS
880 | | Year | History |
881 | | ------------- |-----------------------|
882 | | 1996 | CSS 1.0 released |
883 | | 1998 | CSS 2.0 released |
884 |
885 | > **Note**:
886 | - Early browser versions focused on market shares rather than compliance & standards
887 | - Initially, due to no Web Standards, many browser companies had proprietary features, standards, and elements
888 |
889 | | 2004 | 2.1 recommendations |
890 | | ------------- |-----------------------------------------------|
891 | | 2005 | 2.1 version moved to working draft by W3C (Due to non-implementation of a feature from browsers) |
892 | | 2007 | CSS 2.1 Candidate recommendation |
893 | | 2011 | CSS 2.1 Fully recommended |
894 |
895 | > **Note**:
896 | - CSS3 is not a single specification
897 | - CSS/CSS3 now published as a series of modularised specifications
898 | - Different features/utilities are released separately like selectors, borders, box-shadow, text-shadow, animations, transitions, media query, etc.
899 |
900 | ### 4.2. The Current State of CSS
901 | CSS is changing in nature, so significant changes keep on happening in the specification.
902 |
903 | - [CSS current work](https://www.w3.org/Style/CSS/current-work.en.html)
904 | - [CSS current state](https://www.w3.org/standards/techs/css#w3c_all)
905 | - [All CSS specifications](https://www.w3.org/Style/CSS/specs.en.html)
906 |
907 | ### 4.3. Checking browser support:
908 | - CSS is a constantly changing and evolving language, many features are implemented and many more are implementing. As a Web Designer/Developer you must know which features works and supports in a browser and which are not
909 | - There are many rendering inconsistencies from browser to browser due to frequent version changes or CSS specifications updations
910 |
911 | > Online resources to check browser support:
912 | - https://caniuse.com (Support tables for HTML5, CSS3, etc)
913 | - https://quirksmode.org (Compatibility overview - maintained by Peter-Paul Koch)
914 | - https://en.wikipedia.org/wiki/Comparison_of_browser_engines_(CSS_support)
915 | - https://www.w3schools.com/cssref/css3_browsersupport.asp
916 | - http://www.positioniseverything.net/ (Modern browser bugs explained in detail!)
917 | - Browser development companies proprietary websites
918 |
919 | Section 5. Common CSS concepts
920 | =====================
921 |
922 | There are many CSS concepts and properties we use in day-to-day CSS work, lets dive into some of the common concepts used while working with CSS.
923 |
924 | ### 5.1. Working with fonts
925 | - Controlling `typography-text-font` is one of the most important things to do with CSS
926 | - CSS `Font` property is used to control the look of font-texts
927 | - By the use of the CSS font property, you can change the font type, font-text size, color, style, bold, etc.
928 | - **Font styles**: Properties that affect the font that is applied to the text, affecting what font is applied, how big it is, whether it is bold, italic, etc.
929 | > **Example/font attributes-properties**: font-family, font-size, color, font-style, font-weight, font-variant. https://www.fontsquirrel.com/
930 |
931 | #### CSS Font Choices
932 | 1. System Fonts
933 | 2. Web Fonts
934 |
935 | 1. **System Fonts**:
936 | - Older / Widely supported basic fonts
937 | - Limited numbers of fonts to use/apply
938 | - Only installed fonts on user/client machine to used/viewed
939 | - **Example**: (4 main categories of fonts families)
940 | - **generic fonts family:** Serif, Sans-Serif, MonoSpace, Cursive**
941 | - **font family**: Times, Arial, Courier, Comic Sans
942 | - **Requesting fonts in fallback manner (Font stacks)**: `selector { font-family: Arial, Helvetica, Verdana, Sans-serif; }` (if requested font not available use default `serif` fonts)
943 | 2. **Web Fonts**:
944 | - Emerging technique
945 | - Lack of support in older browsers
946 | - Web Fonts refer to the technique of having the browser download and install fonts that are requested in the pages styles using the `@font-face` syntax/method
947 | - https://fonts.adobe.com/ https://fonts.google.com/
948 |
949 | > **Syntax & Example**:
950 | ```html
951 |
952 |
969 | ```
970 |
971 | ### 5.2. Formatting text
972 | - CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively
973 | - **Text layout styles**: Properties that affect the spacing and other layout features of the text, allowing manipulation of the space between lines and letters, and how the text is aligned within the content box
974 | > **Example**: color, text-align, text-decoration, text-transform, line-height, direction, word-spacing, text-shadow
975 |
976 | > **Syntax & Example**:
977 | ```html
978 |
979 |
995 | ```
996 |
997 | ### 5.3. Color
998 | - Colors are a pretty powerful way to express different feelings and emotions in our human life and play an important role while designing UI or UX
999 | - Typically, `color` is used to set a color either for the foreground of an element (i.e., its text), for the background of the element, or else affect the color of borders/decorative effects
1000 | - The CSS `color` property defines the foreground color (text color), `background-color` property defines the background color of an element
1001 | > **Example**: color, border-color, background-color
1002 |
1003 | **One can specify color values in various formats, Following table lists all the possible formats**:
1004 | | Format | Syntax | Example
1005 | | ----------------- |-----------------------|-------------------------------|
1006 | | Hex Code | #RRGGBB | h1 { color:#FF0000; } |
1007 | | Short Hex Code | #RGB | h1 { color:#F00; } |
1008 | | RGB % | rgb(red%,green%,blue%) | h1 { color:rgb(50%,50%,50%); }|
1009 | | RGB Absolute | rgb(red,green,blue) | h1 { color:rgb(0,0,255); } |
1010 | | RGBA | rgb(red,green,blue, alpha)| h1 { color:rgb(0,0,255,0.5); } |
1011 | | HSL | hsl(hue, saturation, lightness)| h1 { color: hsl(140, 50%, 60%); } |
1012 | | HSLA | hsl(hue, saturation, lightness, alpha)| h1 { color: hsl(140, 50%, 60%, 0.5); } |
1013 | | Keyword/color name| red, black, etc. | h1 { color:teal; } |
1014 |
1015 | > **Note:**
1016 | > - RGB stands for Red Green Blue (3 main colors of web/screen)
1017 | > - defines the intensity of the color between 0 and 255.
1018 | > - HSL stands for Hue Saturation Lightness
1019 | > - ***Hue*** is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue
1020 | > - ***Saturation*** is a percentage value, 0% means a shade of gray, and 100% is the full color.
1021 | > - ***Lightness*** is also a percentage, 0% is black, 50% is neither light or dark, 100% is white
1022 | > - 150+ color keywords/color names are supported by CSS
1023 |
1024 | > **Syntax & Example**:
1025 | ```html
1026 |
1027 |
1050 | ```
1051 |
1052 | ### 5.4. Common Measurement units
1053 | - Units are used to specify non-zero length values in CSS properties
1054 | - Length measured can be either `absolute units such as pixels, points and so on, or `relative such as percentages (%) and em` units
1055 | - CSS properties take "length" values, such as width, height, margin, padding, font-size, border-width etc.
1056 |
1057 | **There are two unit types:**
1058 | 1. Absolute Values/Units
1059 | 2. Relative Values/Units
1060 |
1061 | 1. **Absolute Values/Units**
1062 | - Absolute values are also referred to as fixed values specify exact measurement values
1063 | - Typically used when physical properties of user agents are known
1064 | - The absolute length units will appear as exactly as the size mentioned
1065 | - Absolute physical units such as `in, cm, mm`, etc. should be used for `print media and similar high-resolution devices.
1066 | - An on-screen display such as `desktop and lower-resolution devices`, it is recommended to use the `pixel or em` units.
1067 | - **Example**: in (inches), cm (centimeters), mm (millimeters), pt (points), pc (picas), * px (pixel units)
1068 | > **Note**: * px (Pixels Units) are relative to the viewing device.
1069 |
1070 | 2. **Relative Values/Units**
1071 | - Relative Values/Units are relative to the units of parent/container or other elements
1072 | - **Example**: %, em, rem, vw (viewport width), vh (viewport height)
1073 |
1074 | | Unit | Description | Example |
1075 | |:-------:|---------------------------------------------------------|---------------------------------------------------------|
1076 | | % | Relative to the parent/container element | p { font-size: 200%; } |
1077 | | em | Relative to the current font-size (a base font size), (1em = base size of the current font) | p { font-size: 2em; } |
1078 | | rem | Relative to the font-size of the root element | p { font-size: 2rem } |
1079 | | vw | Relative to 1% of the width of viewport* | div { width: 100vw } |
1080 | | vh | Relative to 1% of the height of viewport* | div { height: 100vh } |
1081 |
1082 | > **Note**: * Viewport = the browser window size
1083 |
1084 | > **Syntax & Example**:
1085 | ```html
1086 |
1087 |
1123 |
1124 |
1125 |
1126 |
1127 |
1128 |
1129 |
1130 |
1131 |
5. Common CSS Concepts
1132 |
1133 |
There are many CSS concepts and properties we use in day to day CSS work, lets dive into some of the common concepts used while working with CSS.
1134 |
1135 |
05.4. Common Measurement units
1136 |
1137 |
1138 |
Units are used to specify non-zero length value in CSS properties
1139 |
Length measured can be either `absolute units such as pixels, points` and so on, or `relative such as percentages (%) and em` units
1140 |
CSS properties take "length" values, such as width, height, margin, padding, font-size, border-width etc.
1141 |
1142 |
1143 |
**There are two unit types:**
1144 |
1145 |
1146 |
Absolute Values/Units
1147 |
Relative Values/Units
1148 |
1149 |
1150 |
1151 |
1152 |
1153 |
1154 |
1155 | ```
1156 |
1157 | ### 5.5. Backgrounds
1158 | - CSS background properties are used to define background styles/effects for the elements
1159 |
1160 | ### Background Properties
1161 | The CSS provides several properties for styling the background of an element, like:
1162 | 1. **background-color**
1163 | - The `background-color` property is used to set the `background color` of an element
1164 | 2. **background-image**
1165 | - The `background-image` property `set an image as a background` of an HTML element
1166 | 3. **background-repeat**
1167 | - By default, the `background-image` property `repeats an image` both horizontally and vertically
1168 | - By using `background-repeat` property one can control how a background image is tiled in the background of an HTML element
1169 | - Properties like `repeat-x & repeat-y` are used to repeat images horizontally (x-axis) or vertically (y-axis) respectively
1170 | 4. **background-attachment**
1171 | - The `background-attachment` property determines whether the background image is `fixed with regard to the viewport or scrolls` along with the containing block
1172 | - Sets whether a background image is fixed or scrolls with the rest of the page
1173 | - The background-attachment property is used to control the scrolling of an image in the background
1174 | 5. **background-position**
1175 | - The `background-position` property is used to control the position of the background image
1176 | - The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.
1177 | - Sets the starting position of a background image
1178 |
1179 | > **Syntax & Example**:
1180 | ```css
1181 |
1182 |
1227 |
1228 |
1229 |
1230 |
**background-color**
1231 |
**background-image**
1232 |
**background-repeat**
1233 |
**background-attachment** uncomment and check body styles
1234 |
**background-position**
1235 |
**background-position**
1236 |
1237 | ```
1238 |
1239 | ### 5.6. Box Model
1240 | - The Box Model refers to the physical properties of an element rectangular box
1241 | - Every element displayed is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page
1242 | - The Box Model concepts help to make layout/designing tasks easier
1243 | - **Box Model consists of properties like**: Margins, Borders, Padding and content width, height (these properties make the physical dimension of an element)
1244 | - Margin = Space outside/around an element
1245 | - Border = Rectangular outline/border surrouding an element/box
1246 | - Padding = Breathing space inside an element border
1247 | > Total width of an element: left border + left padding + content width + right padding + right border
1248 |
1249 | The following diagram demonstrates how the margin, padding, and border CSS properties determine how much space an element can take on a web page:
1250 |
1271 |
1272 |
1273 | ```
1274 |
1275 | ### 5.7. Margin
1276 | - The margin is `Space outside/around an element`, Margin represents the `space between elements`
1277 | - Margin values are not calculated as part of an elements total width
1278 | - The margins do `not have a background-color`, it is `completely transparent`
1279 | - `Margin is outside` and Padding is inside
1280 | - Margin can be defined either to Top, Right, Bottom, Left or to each side of an element
1281 |
1282 | > **Syntax & Example**:
1283 | ```css
1284 | element {
1285 | margin: margin-width/value;
1286 | }
1287 |
1288 |
1289 | div {
1290 | margin: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
1291 | margin-left: 50px; /* all sides equally */
1292 | }
1293 |
1294 | --------------------
1295 |
1296 | .normalList li:nth-child(odd) {
1297 | /* margin: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
1298 | /* margin: 10px 20px; /* pair top-bottom & right-left */
1299 | margin: 15px; /* all sides equally */
1300 | background-color: bisque;
1301 | }
1302 | ```
1303 |
1304 |
1305 | ```html
1306 |
1307 |
Margin is `Space outside/around an element`, Margin represent the `space between elements`
1308 |
Margin values are not calculated as part of an elements total width
1309 |
The margins does `not have a background-color`, it is `completely transparent`
1310 |
Margin can be defined either to Top, Right, Bottom, Left or to each side of an element
1311 |
1312 | ```
1313 |
1314 | ### 5.8. Padding
1315 | - Padding is the `breathing space inside an element border` which holds the content away from edge/border and allows readability
1316 | - CSS Padding property is used to define the space between the element content and the element border
1317 | - `Padding is inside` and Margin is outside
1318 | - Padding can be defined either to Top, Right, Bottom, Left, or to each side of an element
1319 |
1320 | > **Syntax & Example**:
1321 | ```css
1322 | element {
1323 | padding: padding-width/value;
1324 | }
1325 |
1326 | div {
1327 | padding: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
1328 | padding-top: 50px; /* all sides equally */
1329 | }
1330 |
1331 | --------------------
1332 |
1333 | .normalList li:nth-child(odd) {
1334 | /* padding: 10px 20px 10px 20px; /* Top, Right, Bottom, Left */
1335 | /* padding: 10px 20px; /* pair top-bottom & right-left */
1336 | padding: 15px; /* all sides equally */
1337 | background-color: bisque;
1338 | }
1339 | ```
1340 |
1341 | ```html
1342 |
1343 |
Padding is the `breathing space inside an element border` which holds the content aways from edge/border and allows readibility
1344 |
CSS Padding property is used to define the space between the element content and the element border
1345 |
`Padding is inside` and Margin is outside
1346 |
Padding can be defined either to Top, Right, Bottom, Left or to each side of an element
1467 |
1468 | ```
1469 |
1470 | ### 5.10. Element Positioning
1471 | - Positioning allows to take an element on the page and `control where and how it can be positioned`
1472 | - The CSS `position property` is used to `set position` for an element
1473 | - It is also used to place an element `behind another` and is also useful for `scripted animation effect`
1474 |
1475 | #### CSS positioning schemes
1476 | - Normal Flow
1477 | - Element Floating
1478 | - Absolute Positioning
1479 |
1480 | - **Normal Flow**
1481 | - The default layout method of CSS and Browser
1482 | - Elements defined in HTML page stacks and show the layout/Document Flow in the browser (`static` is default positioning)
1483 | - `position` property is used to position elements manually
1484 |
1485 | > **Syntax & Example**:
1486 | ```css
1487 | div {
1488 | position: static | relative | absolute | fixed | inherit
1489 | }
1490 | ```
1491 |
1492 | #### Relative Positioning
1493 | - Elements are still considered as part of normal document flow, but one can offset the elements from their normal position using top, right, bottom, or left offset values
1494 | - Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)
1495 | - Relative Positioning helps to nudge or re-position an element from its `current position/location`
1496 |
1497 | > **Syntax & Example**:
1498 | ```html
1499 |
1500 |
1526 |
1527 |
1528 |
1529 |
1530 |
1531 |
1532 |
1533 |
1534 |
1535 |
Relative Positioning
1536 |
1537 |
1538 |
Elements are still considered as part of normal document flow, but one can offset the elements from its normal position using top, right, bottom, or left offset values
1539 |
Relative positioning changes the position of the HTML element `relative to where it normally` appears (`positioned relative to its normal position`)
1540 |
Relative Positioning helps to nudge or re-position an element from its `current position/location`
1541 |
1542 |
1543 |
1544 |
1545 |
1546 |
1547 |
1548 |
1549 | ```
1550 |
1551 | - **Element Floating**
1552 | - Floating simply denotes an element `shifted/placed on the left or right side`
1553 |
1554 | - **Absolute Positioning**
1555 | - Absolute Positioning is `not considered as a part of Normal Document flow`
1556 | - Absolute Positioning removes the document from Normal Document flow and repositioned based on top, right, bottom, or left offset values
1557 | - Other elements in flow move up and take empty space made by an absolute positioned element
1558 | - Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport
1559 |
1560 | > **Syntax & Example**:
1561 | ```html
1562 |
1563 |
1589 |
1590 |
1591 |
1592 |
1593 |
1594 |
1595 |
1596 |
1597 |
1598 |
Absolute Positioning
1599 |
1600 |
1601 |
Absolute Positioning is `not considered as a part of Normal Document flow`
1602 |
Absolute Positioning removes the document from Normal Document flow and respositioned based on top, right, bottom, or left offset values
1603 |
Other elements in flow moves up and takes empty space made by an absolute positioned element
1604 |
Elements are placed relative to the nearest positioned ancestor/parent element OR body OR viewport
1605 |
1606 |
1607 |
1608 |
1609 |
1610 |
1611 |
1612 |
1613 | ```
1614 |
1615 | #### Fixed Positioning
1616 | - The fixed positioning property helps to put the text fixed on the browser
1617 | - Fixed Positioned elements are considered to be an Absolute Positioned elements themselves but it always positioned relative to the `active viewport`
1618 | - As Fixed Positioned elements are positioned relative to the `active viewport` scrollbar doesn't affect it
1619 | - Fixed positioning is a subcategory of absolute positioning (the difference is, a fixed positioned element is fixed with respect to the browser's viewport and does not move when scrolled)
1620 |
1621 | > **Syntax & Example**:
1622 | ```html
1623 |
1624 |
1652 |
1653 |
1654 |
1655 |
1656 |
1657 |
1658 |
1659 |
1660 |
Fixed Positioning 1 :
1661 |
1662 |
1663 |
1664 |
1665 |
1666 |
1667 | ```
1668 |
1669 | ### 5.11. Floats
1670 | - Floating simply denotes an element shifted/placed on the left or right side
1671 | - Floating is one of the widely used CSS layout techniques
1672 | - Floats are used to create: Layout Design, Horizontal Menu/Navigation, Columnar/Column Layouts
1673 | - The CSS float property is a `positioning property`
1674 | - The `float` property is used for positioning and formatting content e.g. let box/an image float left or right side of a container
1675 | - `clear: both` property is used to stop the floats of an element and start the normal document flow
1676 |
1677 | ### How Float works
1678 | - Elements are floated only horizontally. So it is possible only to float elements left or right, not up or down
1679 | - A floated element may be moved as far to the left or the right as possible. it simply means that a floated element can display at the extreme left or extreme right
1680 | - The elements before the floating element will not be affected. The elements after the floating element will flow around it
1681 | - If the image floated to the right, the texts flow around it, to the left and if the image floated to the left, the text flows around it, to the right
1682 |
1683 | > **Note**: A floated element is taken `out of the normal flow and shifted to the left or right` as far as possible in the space available of the containing element. Other elements normally flow around the floated items, unless they are prevented from doing so by their `clear` property.
1684 |
1685 | > **Syntax & Example**:
1686 | ```css
1687 | div {
1688 | float: left | righ | none | inherit
1689 | }
1690 |
1691 | div {
1692 | clear: both;
1693 | }
1694 | ```
1695 |
1696 | ```html
1697 |
1698 |
1736 |
1737 |
1738 |
@ left - float: left;
1739 |
@ right - float: right;
1740 |
@ normal float - clear:both
1741 | ```
1742 |
1743 | ### 5.12. Basic Layout Concepts
1744 | - Create different `content regions` with DIVs or New HTML5 Semantics Tags and then do `region styling` as per layout requirements.
1745 | There are different ways to create multicolumn layouts. Each way/layout technique has its pros and cons:
1746 | 1. **HTML Layout using Tables `(not recommended)`**
1747 | - Use Table, TR, TD tag to create a whole layout
1748 | - Table-based layouts are not at all flexible and difficult to manage and modify
1749 | 2. **Layouts using Div and Span `(CSS float property)`**
1750 | - You can use `Div - the block level element` to create a complete web layout with CSS `float` property
1751 | - It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
1752 | - Floating elements are tied to the document flow, which may harm the flexibility, and sometimes it's difficult to manage the whole layout
1753 | 3. **HTML5 Semantic Tags based Layout`(CSS float property)`**
1754 | - You can use HTML5 semantic tags like main, header, nav, section, article, aside, footer, etc. to create a fully functional web layout
1755 | - It is a common and widely used technique to create entire web layouts using the CSS float property (float - helps to align block-level elements)
1756 | 4. **CSS flexbox Layout**
1757 | - Flexbox is a new layout mode in CSS3
1758 | 5. **CSS framework**
1759 | - Create layout faster and quicker by using a framework like Bootstrap,W3.CSS or so
1760 | 6. **CSS grid Layout**
1761 | - The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
1762 | - The CSS grid layout is a new layout model optimized for two-dimensional layouts.
1763 | - It's ideal for website layouts, forms, image galleries, and anything that requires precise and responsive positioning.
1764 |
1765 | #### 1. Creating Table-based Layout `(not recommended)`
1766 | - The purpose of the `
` element is to display tabular data
1767 | - The simplest and most popular way of creating layouts is using HTML `
` tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.
1768 | - The `
` element was not designed to be a layout tool! Before the introduction to Div tag, web designers/developers use to follow table-based layout
1769 | > **Note**: Do not use tables for your page layout! They will make code length, tedious and brings a mess into your code
1770 |
1771 | > **Syntax & Example (CSS Table base layout)**:
1772 | ```
1773 |
1774 | Please Check example/demo: 05.12.1a.html.table.layout & 05.12.1b.css.table.layout
1775 |
1776 | ```
1777 |
1778 | #### 2. Layouts using Div and Span `(CSS float property)`
1779 |
1780 | > **Syntax & Example (CSS Div base layout)**:
1781 | ```
1782 |
1783 | Please Check example/demo: 05.12.2.css.div.layout
1784 |
1785 | ```
1786 |
1787 | #### 3. HTML5 Semantic Tags based Layout`(CSS float property)`
1788 |
1789 | > **Syntax & Example (HTML5 Sementic tag based layout)**:
1790 | ```
1791 |
1792 | Please Check example/demo: 05.12.3.semantic.tag.layout
1793 |
1794 | ```
1795 |
1796 | ### 5.13. Media Types and Media Queries
1797 | - One of the great benefits of using HTML5 & CSS3 to separate structure and presentation is also the ability to present the same content in a different way on multiple devices
1798 | - CSS3 allows targeting multiple devices by using `media types & media queries`
1799 | - **Media Types**: Allows us to control/serve a different set of styles to multiple devices based on device type
1800 | - The same content can be viewed with different styles/layouts on different media devices (screen, printer, screen readers)
1801 |
1802 | > **Syntax & Example**:
1803 | ```css
1804 | 1. @media screen {
1805 | /* different styles for screen *\
1806 | property: value;
1807 | }
1808 |
1809 | /*2. @import syntax*/
1810 | @import url("style.css") screen;
1811 | ```
1812 |
1813 | ```html
1814 | 3. link element syntax
1815 |
1816 | ```
1817 |
1818 | #### Media Type Benefits
1819 | - A powerful way to control the look and functionality of sites across multiple devices
1820 | - **Different Media Types**: all, print, projection, screen, speech (screen readers), tv
1821 |
1822 | #### Media Queries
1823 | - Media queries allow combining media types with media property expressions, to further when styles are applied based on color, screen width, and other many factors
1824 | - **Different Media features**: width, height, (min-width, max-width)
1825 |
1826 | ### 5.14. CSS3
1827 | - CSS3 is brand, the latest specification/module of CSS which consists of many latest and upgraded features/functionalities/powerful tools+options
1828 | - **CSS3 feature**:
1829 | - border-radius, border-image, multiple backgrounds images
1830 | - colors: rgba & hsla (alpha color values)
1831 | - Text formatting: text-shadow, multiple columns, @font-face
1832 | - New Selectors: many pseudo selectors like nth:
1833 | - box-shadow
1834 | - gradients
1835 | - transforms
1836 | - transitions
1837 | - animations
1838 |
1839 | ### 5.15. CSS Vendor Prefixes (CSS Browser Prefixes)
1840 | - Vendor Prefixes allows browsers manufacturers to add support for `proprietary features which are still in development`
1841 | - Browser manufacturers have used browser-specific `prefixes for experimental APIs`
1842 | - Vendor Prefixes allows the designer/developer an opportunity to use experimental/evolving features-properties
1843 | - CSS vendor prefixes/CSS browser prefixes are a way for browser makers to add support for new CSS features before those features are fully supported in all browsers
1844 |
1845 | > **Note**: CSS vendor prefixes/CSS browser prefixes are used only for the latest CSS3 properties which are not fully developed/supported by all browser
1846 |
1847 | #### Common Vendor Prefixes
1848 | | Prefix | Browser |
1849 | | ------------- |-------------------------------------------------------|
1850 | | -webkit | Webkit (Google Chrome, Safari) |
1851 | | -moz- | Mozilla (Mozilla Firefox) |
1852 | | -ms- | Microsoft (Internet EXplorer) |
1853 | | -o- | Opera |
1854 | | -khtml- | Konqueror |
1855 |
1856 | > **Syntax & Example**:
1857 | ```css
1858 |
1859 |
1882 | ```
1883 |
1884 | ```html
1885 |
1886 |
5. Common CSS Concepts
1887 |
1888 |
5.15. CSS Vendor Prefixes (CSS Browser Prefixes)
1889 |
1890 | ```
1891 |
1892 | ### 5.16. CSS Reset
1893 | - CSS Reset is a set of styles that `nullify a browsers default style` sheet
1894 | - CSS Reset a collection of styles allows designers to avoid conflicts between their styles and browser default styles
1895 | - Every browser has its own default `user agent stylesheet`, that it uses to make unstyled websites appear more beautiful/legible. (By default apply variable font-sizes to H1 to H6, a certain amount of padding to almost every element, make links blue and visited links purple, give tables a certain amount of border and padding)
1896 | - Using a CSS Reset, we can force every browser to have all its styles reset to null, thus `avoiding cross-browser differences` as much as possible
1897 | - The goal of a reset style is to `reduce browser inconsistencies` in things like default line heights, margins and font sizes of headings, etc.
1898 |
1899 | - **Common CSS Reset Properties**:
1900 | - margin
1901 | - adding
1902 | - borders
1903 | - font-size
1904 | - line-height
1905 |
1906 | > **Syntax & Example**:
1907 | ```css
1908 | /* css reset styles goes here */
1909 | body, h1, h2, h3, h4, h5, h6, p, input,li {
1910 | margin:0px;
1911 | padding:0px;
1912 | }
1913 | ```
1914 |
1915 | > **Reference websites**: https://meyerweb.com/eric/tools/css/reset/, https://cssreset.com/
1916 |
1917 | Section 6. CSS resources
1918 | =====================
1919 |
1920 | ### 6.1. CSS Frameworks and grids
1921 | - **CSS Frameworks**
1922 | - CSS Frameworks are pre-existing/pre-prepared libraries/files which provide a templating tools/systems for site layout and design
1923 |
1924 | - **Common CSS Frameworks contents**
1925 | - CSS reset for browser default styling
1926 | - Baseline rules for common elements
1927 | - Basic element styling
1928 | - Basic structural rules/styling
1929 | - Rules to overcome Browser inconsistencies
1930 | - Form & Table styling, Typography, CSS Grid
1931 |
1932 | #### CSS Grids
1933 | - CSS Grids allows to `quickly build multi-column layouts
1934 | - CSS Grids mainly designed to make `building multi-column layouts easier`
1935 | - Grids can be based on fixed, sizes, fluid layouts, or aspect ratios
1936 | - Consists of pre-build/readymade classes to define columns width and create layout easily
1937 | - CSS Grids are part of bigger CSS Frameworks or may be available alone as a grid library
1938 |
1939 | #### CSS Frameworks - Advantages
1940 | - CSS Frameworks can save lots of time and work while designing large sites/apps
1941 | - CSS Frameworks usually assist with creating cross-browser compliant code
1942 | - Inbuilt CSS Grids speed up layout design/development
1943 | - CSS Frameworks creates a standard, consistent code-base, design layouts for team
1944 |
1945 | #### CSS Frameworks - Disadvantages
1946 | - Many features/all utilities of CSS frameworks are not used in most of the sites
1947 | - Some frameworks consist of multiple files which designer/developer needs to include/import
1948 | - CSS Frameworks heavily depends on non-semantic classes
1949 | - Sometimes it is very tedious and difficult to update or debug the frameworks
1950 | - Adding custom functionality can be time-consuming and difficult
1951 | - Designer/Developer need to spend/invest time mastering framework
1952 |
1953 | ### 6.2. Popular CSS Frameworks
1954 | - Twitter Bootstrap: https://getbootstrap.com/
1955 | - Foundation Zurb: https://foundation.zurb.com/
1956 | - Materialize CSS: https://materializecss.com/
1957 | - Semantic UI: https://semantic-ui.com/
1958 | - Material UI: https://v0.material-ui.com/#/
1959 | - UI Kit: https://getuikit.com/
1960 |
1961 | ### 6.3. CSS Pre-Processors
1962 | - CSS Pre-Processors are programms/utilities `extends basic CSS features with programming abilities`
1963 | - Helps to use static CSS as a `programming language`
1964 | - Adds programming features like `variables, functions, mathematical operations, nesting etc into CSS`
1965 | - Allows to write `Semantic, Scalable, Moduler CSS with variables / mixins`
1966 | > **Example**: Pre-Processors syntax or files like .SASS, .SCSS, .LESS, .STYL -> Processed and converted to -> .CSS
1967 |
1968 | - **Popular CSS Pre-Processors**
1969 | - Sass: https://sass-lang.com/
1970 | - Less: http://lesscss.org
1971 | - Stylus: http://stylus-lang.com/
1972 |
1973 | ### 6.4 CSS Editors / CSS Authoring Tools
1974 | Editors range from basic text editors to full-featured web suites
1975 |
1976 | - **Basic Editors**
1977 | - NotePad++ https://notepad-plus-plus.org/
1978 | - textmate https://macromates.com/
1979 | - bbedit https://www.barebones.com/products/bbedit/
1980 | - SublimeText https://www.sublimetext.com/
1981 | - Atom https://atom.io/
1982 | - Adobe Bracket brackets.io/
1983 |
1984 | - **IDE (Integrated Development Enviroment)**
1985 | - ADOBE DREAMWEAVER CC https://www.adobe.com/products/dreamweaver.html
1986 | - Aptana Studio 3 www.aptana.com/
1987 | - Microsoft Visual Studio Community https://code.visualstudio.com/
1988 | - Komodo Edit https://www.activestate.com/products/komodo-edit/
1989 |
1990 | ### 6.5 CSS Tools
1991 | - **CSS Default Browser styles**
1992 | - [Default Styles for Firefox](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) , https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css
1993 | - [Default Styles for Internet Explorer](http://web.archive.org/web/20170122223926/http://www.iecss.com/)
1994 | - [Default Styles for Chrome / Webkit](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)
1995 | - [Default Styles for Opera](http://web.archive.org/web/20161031005401/http://www.iecss.com/opera-10.51.css)
1996 | - [w3.org](http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm)
1997 | - [Default Styles for HTML4 (W3C spec)](https://www.w3.org/TR/CSS2/sample.html)
1998 | - [Default Styles for HTML5 (W3C spec)](https://www.w3.org/TR/html5/rendering.html)
1999 |
2000 | - **CSS3 Style Generators**: There are many online websites/tools which generate CSS3 code in quick time
2001 | - http://css3generator.com/
2002 | - https://www.css3maker.com/
2003 | - http://css3please.com/
2004 | - https://html-css-js.com/css/generator/
2005 | - http://www.colorzilla.com/gradient-editor/
2006 |
2007 | - **CSS validators**
2008 | - https://jigsaw.w3.org/css-validator/
2009 | - http://csslint.net/
2010 |
2011 | - **PX to EM convertor**
2012 | - http://pxtoem.com/
2013 | - https://www.w3schools.com/tags/ref_pxtoemconversion.asp
2014 |
2015 | Section 7. What's the next step?
2016 | =====================
2017 |
2018 | Outstanding work! Thank You for looking into CSS3 Fundamentals. I hope you enjoyed and learned a lot out of it. I think Now you have better understandings of how CSS works and functions. To learn more about CSS specifications visit [All CSS specifications](https://www.w3.org/Style/CSS/specs.en.html). Your next step could be Mastering CSS3 Advanced features or look into [HTML5 Essentials](https://github.com/dinanathsj29/html5-essentials), jump deeper with HTML5 Advanced topics or start with [JavaScript for beginners](https://github.com/dinanathsj29/javascript-beginners). Best of Luck! Happy Learning!
2019 |
--------------------------------------------------------------------------------
37 |
38 | 
60 | 
3 | 
131 | 
169 |
170 | > **Syntax**:
171 | ```css
172 | selector {
173 | property: value; /* declaration/rule 1 */
174 | property: value; /* declaration/rule 2 */
175 | }
176 | ```
177 |
178 | > **Example**:
179 | ```html
180 |
181 |
182 |
183 |
197 |
198 |
199 |
200 |
201 |
202 | 
1252 |