The class was conducted on 29th September for both batches. The Instructors for the program are Arun Padmanabhan , CSE 3rd Year and Joel Johnson , IT 4th Year.
Agenda
- Quick recap of last class
- Learning CSS
- Homework
- Resources
1. Quick recap of last class
In last class we learned about HTML (Hyper Text Markup Language) which is the standard markup language for Web pages. For more information of HTML, we have published our article here.
2. Learning CSS
Why learn CSS?
Before we go to the topic let us tell you why do we need CSS(Cascading Style Sheets). Without CSS, every webpage would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page-your web pages can feel like works of art!.So let us learn some basic CSS codes.
Take-Away Skills:
You will learn many aspects of styling web pages! You’ll be able to set up the correct file structure, edit text and colors, and create attractive layouts. With these skills, you will be able to customize the appearance of your web pages to suit you every need!.
Note on Prerequisites:
We recommend that you complete learn HTML Before learning CSS.
Coding Time
- Inline Styles
<h2 style="text-align: center;">
centered text</h2>
<p style="color: blue; font-size:18px;">
Blue, 18-point text</p>
Inline styles is a fast way of styling HTML, for example the above given code sets every statements written using h1 tag to align text to center of the web page and set texts written under p tag to blue color and font size to 18px. Using this method has some limitations. Inline styles are the most specific in the cascade , they can over-ride things you didn't intend them to. They also negate one of the most powerful aspects of CSS - the ability to style lots and lots of web pages from one central CSS file to make future updates and style changes much easier to manage.
- Writing CSS code in separate files
<head>
<link rel="stylesheet" href="master.css" type="text/css">
</head>
CSS code can be written in its own file to keep it separate from the HTML code. The file extension for CSS is .css . This file can be linked to an HTML file using a <link> tag in the <head> section.
- CSS class and ID selectors
/* selects all elements with class="column" */
.first{
}
/* selects element with id="first-item" */
#first-item{
}
CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period (.something) 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.
- CSS font size
p{
font-size: 14pt;
}
The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.
- Background color
body{
background-color: violet;
}
The CSS background-color property controls the background color of the elements.
- Controlling opacity in CSS
.first{
opacity: 0.5;
}
The opacity property can be used to control the transparency of an HTML element. The value of this property ranges from 0 to 1. An element having the value 0 for the opacity property will be fully transparent. Conversely, the value 1 means it is fully opaque. In the example, the value 0.5 indicates any HTML element having .first class will be semi transparent.
- CSS font weight
p{
font-weight: bold;
}
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.
- Setting alignment of inline content
p{
text-align: center;
}
The text-align property can be used to set alignment of inline contents. This property can be used to set these values: left, right, center. For instance, to right align the text inside a <p> tag. text-align: right is added to the rule set.
- Setting foreground text color in CSS
p{
color:#c51a1a;
}
span{
color: green;
}
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.
- Setting resource URLs
body{
background-image: url("../resources/image.jpg");
}
In CSS, the url( ) function is used to wrap resources URLs.These can be applied to several properties such as the background-image.
- CSS font families
p{
font-family: 'Mansalva', cursive;
}
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, browser will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes. (You can try various fonts from Google Fonts and link the desired font inside the head tag of your html document.
Flexbox
The Flexbox Layout (Flexible Box) module which aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow.
In order to understand more about Flexbox, here's a game for you. Go to Flexbox froggy and complete all 24 levels!
3. Homework
This article hasn’t covered all topics and properties of CSS. It is done so that you can explore some other tags by yourself.Now go to freecodecamp and complete the Basic CSS, CSS Flexbox and CSS Grid in the responsive web design certification section which can be found here
4. Resouces
The GitHub Repository where the codebase should be present: Click here
This blog is written by Aman Zishan and Joel Johnson. Feel free to comment on this post if you have any queries and show us some love by liking the post!
Hosted at CITTIC
