Syntax and Selectors
Class and ID Selectors
CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.
/* Selects all elements with class=”column” */
.column {
}
/* Selects element with id=”first-item” */
#first-item {
}
Groups of CSS Selectors
Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for both h1 and h2 is set to red.
h1, h2 {
color: red;
}
Selector Chaining
CSS selectors define the set of elements to which a CSS rule set applies. For instance, to select all <p> elements, the p selector can be used to create style rules.
Chaining Selectors
CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select <h3> elements that also have the section-heading class, the selector h3.section-heading can be used.
/* Select h3 elements with the section-heading class */
h3.section-heading {
color: blue;
}
/* Select elements with the section-heading and button class */
.section-heading.button {
cursor: pointer;
}
CSS Type Selectors
CSS type selectors are used to match all elements of a given type or tag name. Unlike for HTML syntax, we do not include the angle brackets when using type selectors for tag names. When using type selectors, elements are matched regardless of their nesting level in the HTML.
/* Selects all <p> tags */
p {
}
CSS class selectors
The CSS class selector matches elements based on the contents of their class attribute. For selecting elements having calendar-cell as the value of the class attribute, a . needs to be prepended.
.calendar-cell {
color: #fff;
}
HTML attributes with multiple values
Some HTML attributes can have multiple attribute values. Multiple attribute values are separated by a space between each attribute.
<div class=”value1 value2 value3″></div>
Selector Specificity
Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only color: blue will be implemented as it has an ID selector whereas color: red has a type selector.
h1#header {
color: blue;
} /* implemented */
h1 {
color: red;
} /* Not implemented */
CSS ID selectors
The CSS ID selector matches elements based on the contents of their id attribute. The values of id attribute should be unique in the entire DOM. For selecting the element having job-title as the value of the id attribute, a # needs to be prepended.
#job-title {
font-weight: bold;
}
CSS descendant selector
The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML.
div p { }
section ol li { }
<link> Link Element
The <link> element is used to link HTML documents to external resources like CSS files. It commonly uses:
href attribute to specify the URL to the external resource
rel attribute to specify the relationship of the linked document to the current document
type attribute to define the type of content being linked
<!– How to link an external stylesheet with href, rel, and type attributes –>
<link href=”./path/to/stylesheet/style.css” rel=”stylesheet” type=”text/css”>
Purpose of CSS
CSS, or Cascading Style Sheets, is a language that is used in combination with HTML that customizes how HTML elements will appear. CSS can define styles and change the layout and design of a sheet.
Write CSS in Separate Files
CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is .css. These can be linked to an HTML file using a <link> tag in the <head> section.
<head>
<link href=”style.css” type=”text/css” rel=”stylesheet”>
</head>
Write CSS in HTML File
CSS code can be written in an HTML file by enclosing the code in <style> tags. Code surrounded by <style> tags will be interpreted as CSS syntax.
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
Inline Styles
CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.
<h2 style=”text-align: center;”>Centered text</h2>
<p style=”color: blue; font-size: 18px;”>Blue, 18-point text</p>
Separating HTML code from CSS code
It is common practice to separate content code in HTML files from styling code in CSS files. This can help make the code easier to maintain, by keeping the syntax for each file separate, and any changes to the content or styling can be made in their respective files.
Visual Rules
CSS declarations
In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.
/*
CSS declaration format:
property-name: value;
*/
/* CSS declarations */
text-align: center;
color: purple;
width: 100px;
Font Size
The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.
font-size: 30px;
Background Color
The background-color CSS property controls the background color of elements.
background-color: blue;
!important Rule
The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice.
#column-one {
width: 200px !important;
}
.post-title {
color: blue !important;
}
Opacity
The opacity CSS property can be used to control the transparency of an element. The value of this property ranges from 0 (transparent) to 1 (opaque).
opacity: 0.5;
Font Weight
The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.
font-weight: bold;
Text Align
The text-align CSS property can be used to set the text alignment of inline contents. This property can be set to these values: left, right, or center.
text-align: right;
CSS Rule Sets
A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.
h1 {
color: blue;
text-align: center;
}
Setting foreground text color in CSS
Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.
p {
color : #2a2aff ;
}
span {
color : green ;
}
Resource URLs
In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image.
background-image: url(“../resources/image.png”);
Background Image
The background-image CSS property sets the background image of an element. An image URL should be provided in the syntax url(“moon.jpg”) as the value of the property.
background-image: url(“nyan-cat.gif”);
Font Family
The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.
h2 {
font-family: Verdana;
}
#page-title {
font-family: “Courier New”;
}
Color Name Keywords
Color name keywords can be used to set color property values for elements in CSS.
h1 {
color: aqua;
}
li {
color: khaki;
}
Typography
CSS font-weight Property
The CSS font-weight property declares how thick or thin should be the characters of a text. Numerical values can be used with this property to set the thickness of the text. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder.
In the given example, all the <p> elements will appear in a bolder font.
/* Sets the text as bolder. */
p {
font-weight: 700;
}
CSS font-style property
The CSS font-style property determines the font style in which text will appear.
It accepts italic as a value to set the font style to italic.
.text {
font-style: italic;
}
CSS @font-face rule
The CSS @font-face rule allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. This rule also allows locally hosted fonts to be added using a relative file path instead of a web URL.
@font-face {
font-family: ‘Glegoo’;
src: url(‘../fonts/Glegoo-Regular.ttf’) format(‘truetype’);
}
CSS Fallback Fonts
The CSS font-family property can have multiple fonts declared in order of preference. In this case the fonts following the initial font are known as the fallback fonts.
If the initial value of the property font-family fails to load to the webpage, the fallback fonts will be used.
/* Here `Arial` is the fallback font for <p> tags */
p {
font-family: “Helvetica”, “Arial”;
}
The CSS line-height property
The CSS line-height property declares the vertical spacing between lines of text. It accepts both unitless numbers as a ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but it does not accept negative numbers. A unitless number is an absolute value that will compute the line height as a ratio to the font size and a unit number can be any valid CSS unit (eg. pixels, percents, ems, rems, etc.). To set the line-height of the <p> elements to 10px, the given CSS declaration can be used.
p {
line-height: 10px;
}
CSS Linking fonts
Linking fonts allow user to use web fonts in the document. They can be imported in an HTML document by using the <link> tag. Once the web font URL is placed within the href attribute, the imported font can then be used in CSS declaration.
<head>
<link href=”https://fonts.googleapis.com/css?family=Droid%20Serif” rel=”stylesheet”>
</head>
Advance CSS
In the ever-evolving world of web design, mastering CSS is key to creating visually stunning and dynamic websites. Let’s explore some advanced CSS features that can take your styling skills to the next level!
1. CSS Custom Properties (Variables):
Gone are the days of repetitive code. With CSS variables, you can reuse values throughout your document, making your stylesheets more efficient and easier to maintain. For instance:
“css
:root {
–primary-color: hashtag#007bff;
}
body {
background-color: var(–primary-color);
}
“
2. CSS Transform: Unleash your creativity by altering the shape, size, and position of elements with the `transform` property. Create visually captivating effects with ease:
“css
div {
transform: rotate(30deg) scale(1.5);
}
“
3. CSS Filters: Enhance your images and elements directly in CSS with filters. Apply effects like blur, brightness, and contrast without needing graphic software:
“css
img {
filter: grayscale(50%) blur(5px);
}
“
4. CSS Blend Modes: Blend modes allow you to determine how an element’s content should blend with its background. This can add depth and texture to your layouts:
“css
img {
mix-blend-mode: multiply;
}
“
5. Dark Mode with CSS Variables: Cater to user preferences by incorporating a dark mode. Use CSS variables to switch between themes seamlessly:
“css
body {
–text-color: #000;
–bg-color: hashtag#fff;
}
.dark-mode {
–text-color: hashtag#fff;
–bg-color: #000;
}
body {
color: var(–text-color);
background-color: var(–bg-color);
}
“
Why It Matters: Leveraging these advanced CSS features not only enhances the aesthetics and interactivity of your website but also significantly improves the user experience. By adopting these techniques, you can create more responsive, accessible, and visually appealing designs that stand out in the digital landscape.
💡 Takeaway: Embrace these advanced CSS capabilities to push the boundaries of what’s possible in web design. Experiment, learn, and don’t be afraid to try new things. Your website will thank you!
