Join us and get access to thousands of tutorials and a community of expert Pythonistas.
This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.
Writing Your First CSS Code
00:00 With CSS, you can define rules with how to style elements on the page. Selectors define which elements you want to target. Type selectors, target the tag name.
00:11 To target the <h1> tag. You would use <h1>, and then your declaration block.
00:16 The declaration block immediately follows the selector. The declaration block is delimited by an opening brace and closing brace. Declarations inside the block are separated by a semi-colon.
00:30 The declaration itself is structured into two parts: property, which is the identifier defining the feature and value the description of how the feature should be handled.
00:41
In a previous example of h1 {color: blue} the property is color and the value is blue. h1 is the selector and the curly brackets with color blue is the declaration block.
00:54 Now that you’ve had a brief intro into CSS, you can head over to code and add color to your website.
01:01 First, you’ll want to add the style element. This will allow you to add CSS code to your HTML document. It’s typically best to place your style element inside of your <head> element.
01:11 Otherwise, your browser might try to render elements before applying any CSS rules, which can result in unstyled content. So just under your <title> element, drop down to a new line and add your opening <style> tag and then your closing <style/> tag.
01:28 Then I’m just gonna line these up and then open it up. The content of style is an HTML code, but CSS. This is where you can begin defining rules on how to style elements on the page.
01:41 You can select the body tag by typing body and add your declaration block with curly braces.
01:48 Add the property color. The value can be a named color, such as blue, red, green, and so forth. But you can also add other color options such as RGB notation.
02:01 For this, you can add rgb parentheses 240, 248, and 255, and close that off with a semicolon. Now you can add a background color as well. This will be inside the same declaration block.
02:18 So drop down to new line, `background-color: rgb` front c, 20, 40, and 60. And once again, close that off with a semi-colon.
02:32
The background color will change the background color of the body and the color will change the text color of the body. Now select your anchor tag with a so outside of the body declaration block drop down to a new line and then a, and then a new declaration block so curly braces, and inside of this you wanna select color for your property and then another RGB value, so ‘rgb 255, 111 and 111`, and then close that off with the semi-colon.
03:04 Now that you’ve added color to your website, head over to your browser to see your changes.
03:10 You now have color added to your website. The background color of your body now has a navy blue color, the text an off-white, an anchor tags are a salmon color.
03:21
Navigate to your gallery page. Notice how the styling doesn’t appear here. That’s because you only added the style elements to your index.html file.
03:30 But don’t worry, you’ll learn how to address this shortly. For the next lesson, you’ll learn how to add text styles to your website.
Become a Member to join the conversation.