XHTML/ CSS - ID's

Once again, there is another way to style elements on a webpage. Using the <div> tags we may want to position/ style multiple elements. But how do we do that using one tag. It would seem to move all the elements within the div tag. ID's help us do this without confusion.

<style>

#myHeader {
    background-color: lightblue;
    color: black;
    padding: 40px;
    text-align: center:
 }










#Paragraph {

 background-color: lightblue;
    color: black;
    padding: 40px;
}
 .city {
    background-color: tomato;
    color: white;
    padding: 10px;} </style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<h2 id="paragraph">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

If you have more than one <div> element you can create multiple hashtag ID properties in order to style them individually. 

https://www.youtube.com/watch?v=veKHw125UJs&index=23&list=PLC1322B5A0180C946

Comments

Post a Comment

Popular posts from this blog

Python 3.4 - Caesar Cipher

Caesar ciphers take a list of values and rotates through them to give them a different value. The program below takes from the alphabet and creates a cipher of the message. It returns many variations of the cipher then returns the actual message. import string import collections def caesar (rotate_string , number_to_rotate_by): upper = collections.deque(string.ascii_uppercase) lower = collections.deque(string.ascii_lowercase) upper.rotate(number_to_rotate_by) lower.rotate(number_to_rotate_by) upper = '' .join( list (upper)) lower = '' .join( list (lower)) return rotate_string.translate( str .maketrans(string.ascii_uppercase , upper)).translate( str .maketrans(string.ascii_lowercase , lower)) my_string = 'This is the message' my_string2 = caesar(my_string , 1 ) for i in range ( len (string.ascii_uppercase)): print (i , "|" , caesar(my_string2 , i)) /Users/mattfassnacht/PycharmProjects/untitled12/venv/bin/pyt
Read more

UML - Use Case Diagram

Image
UML stands for unified modeling language. It is used to create a blueprint for a project. A use case diagram is a list of steps needed to reach a goal. Its defines what is required and how those requirements are met. You will narrow down what you have to have. Before you create a use case diagram you need to create a description of the use case diagram. For example the above would look something like this: Use case descriptions includes who the actors are, what the triggers are, and other elements. Beta versions of a project have Shall requirements, should requirements can be done but can be done later. A use case diagram uses stereotypes to represent an element of your system. https://whatis.techtarget.com/definition/use-case-diagram https://www.youtube.com/watch?v=OkC7HKtiZC0
Read more