2A. Introduction to CSS
Overview
This section covers the Introduction into CSS.What is CSS?
CSS (Cascading Style Sheets) is as its name implies style sheets that cascade downwards, meaning that Styles applied to parent elements are inherited by their children.
CSS is used to control the appearance, layout and general presentation of a Website. In BBj you can give elements styles directly but having a at least a CSS String with all your CSS makes your code look cleaner and more maintainable, even better is it to put all your CSS into a seperate .css file.
How to use CSS Selectors
Style definitions in a CSS file are always enclosed in {} brackets and follow the property: value; standard. There are many ways to select different parts of your site with CSS but for now lets concentrate on the main three ones:
CSS Types apply to all elements that are that specific type, for example the following Code snippet would apply to all html <p> elements, so every normal text.
You just write out your element name followed by the style definition. This is especially useful if you want all elements of a specifc type to look the same.
p {
property: value;
}
CSS Classes apply to all elements that have specifically been given this class
For classes you write the name of your class but put a period before the selector. This is the most common way to apply CSS to something.
.myClass {
property: value;
}
CSS Id Selector is somewhat uncommon, the CSS gets applied to all elements that share this Id, but it most likely will only effect one element because as the Id states, its an Identifier, so something unique.
#myId {
property: value;
}
This is important if you want to give one specific element the style without having to use addClass in your BBjCode, just remember for this to take effect, you need to give your Object in BBj a static Id by using setAttribute("id","yourIdHere").
Note: An Id does not have to consist of only numbers.
CSS Selector Combinators
CSS Classes can also be Combined, the combinations do different things based on how you write them:
element-one, .class-two { ... }
A comma between selectors applies the same style to all selectors in the list, in this example the styles will apply to all element-one elements AND anything that has the class-two class.
element one.class-two.class-three { ... }
Chaining classes with other classes or onto an element to select something that fits ALL these criteria, in this example it will target all element-one elements that have both the class-two and class-three classes.
element-one .class-two { ... }
A Space between selectors specifies descendants, in this example, the styles will apply to anything with the class-two class that is a child of an element-one element.
element-one > element-two { ... }
A > between selectors to specify a direct descendant. This example will target an element-two element that is an immediate descendant of an element-one element.
CSS Pseudo-Classes (States)
Pseudo-classes are CSS selectors that can represent state or other information about an element. These are some Pseudo-Classes:- :hover : when the mouse pointer is over and element.
- :focus : when an element has focus.
- :not() : can be used for not matching some other selector.
The inspector tool can toggle pseudo-classes!
Note: We only list those three, as you may use them the most, but there are a lot more, here is a List of Pseudo-Classes!
Shadow DOM's
DOM (Document Object Model) is the structural model of all element on a page, its used by JavaScript and CSS to apply styles and functionality.Shadow DOM's are the elements that have their own DOM that is hidden from the page's CSS and JavaScript, which prevents interference and improves reusability.
DWC Components are implemented as custom Web Components with Shadow DOM's, you can access different parts of the Shadow DOM by using the ::part() selector.
You can Inspect the elements with the Browser Developer Tools to see the structure of these components.
The Mozilla Developer Network is a good source to learn about CSS including Shadow DOM
Apply Classes and inject CSS Files in BBj
Classes are easily applied to any Object by using addClass("CSSClassNameWithoutDot"), you can also add multiple Classes to any object by using multiple addClass method. Injecting a CSS File works like this:injectStyle(String style, boolean top, String attributes)
- style: A String of CSS. This could be as large as the entire contents of a CSS file, or it could be only a single CSS definition.
- top: Injected into the head of the page if true (the default), otherwise injected in the body (not preferred).
- attributes: Additional attributes - this can be used to give a name to the injected CSS, which can be useful when determining which styles are taking effect when you look at the final output of your program.
Notes:
The programs ExternalCssExample.bbj and InlineCssExample.bbj will show you the different ways to style and inject the CSS.
This is only meant as a small introduction, should you need further exercise, we recommend:
The CSS Tutorial on W3Schools.com